Build a Dynamic Menu in JavaScript Article

Here, we’re not talking about DHTML drop-down/pull-down menus. Here, we’re talking about a simple navigation menu using Javascript. It identifies the active page, and accordingly displays that link differently from the other links, making it easy for the user to navigate.

Here we’ll employ a single .js file that will be used for all the pages under the navigation menu. So you need not update all the pages: you’ll have to update only one javascript library file (.js file).

For example, consider these 3 navigation links:

Build a Dynamic Menu in JavaScript Article

Link 1 is active.

Build a Dynamic Menu in JavaScript Article

Link 2 is active.

Build a Dynamic Menu in JavaScript Article

Link 3 is active.

As you can see, these are shots of how the navigation menu appears at different pages depending on which links is active. These menus are generated by a single javascript file.

It’s possible to create such a menu using only Cascading Style Sheets (CSS), by defining a class (say .links) for the menus, and assigning different properties for .links:active. So you can create the menu just by using a CSS file.

Though this is perfect, there is an advantage to using Javascript here. As you can see in the above shots, the active link has the “»” character in the end. This is created only for the active link, therefore it’s created dynamically. With JavaScript, you can use any character or iconic image that will make the link really look active.

Implementation

To implement this type of menu, first of all you will need is a CSS file, say links_style.css, to define the styles for the links. Next comes the Javascript file nav.js.

In the file nav.js, first of all we declare three arrays. One array, called “links“, includes the names of the links. Another array is called “links_text“, and consists of the text of the links (eg. Link 1). The former will be used for comparison against this file. Name the various elements in the links array using the titles from the link files, excluding the extension (i.e. if the first link takes you to index.htm, name it index). The third array, called “links_url” includes the URL to which a link will take the user.

Now, what we want is to compare each element in the array links to the current page’s file name without the extension. We’ll then accordingly assign the link a style, and whatever extra text or image you’ve decided to add to the link text to highlight the active page.

Let loc be the comparison string. loc can be found as :

var loc=String(this.location);
loc=loc.split("/");
loc=loc[loc.length-1].split(".");
loc=loc[loc.length-2];

Thus if current page is http://www.sitepoint.com/index.htm then loc will be index. Now we compare this with each element in the array links. The first element of this array and loc are equal, thus we write this link in the following way.

document.write('<table class="explorer_active"
onmouseover="this.className='explorer_active';return true"
onmouseout="this.className='explorer_active';return true"
onmousedown="this.className='explorer_active';return true"
onclick="location.href='' + links_url[i] + ''"><tr><td>
<a href="' + links_url[i] + '" class="menu">'
+ links_text[i] + ' <b>»</b></a></td></tr></table>');

As the other elements in the links array are not equal to loc, they will be written as:

document.write('<table class="explorer"
onmouseover="this.className='explorer_over';return true"
onmouseout="this.className='explorer';return true"
onmousedown="this.className='explorer_down';return true"
onclick="location.href='' + links_url[i] + ''"><tr><td>
<a href="' + links_url[i] + '" class="menu">'
+ links_text[i] + '</a></td></tr></table>');

And that’s your dynamic menu!

The code you’ll have to place in all your pages is:

<script language="javascript" src="nav.js"></script>

Place this code wherever you need the navigation menu to appear on the page.

The other code that you’ll require is

<link rel="stylesheet" href="links_style.css" />

which must be placed in the <head> section of your HTML page.

Therefore, listing 1 nav.js is:

/* The link details */
var links = new Array ("link1", "link2", "link3");
var links_text = new Array ("Link 1", "Link 2", "Link 3");
var links_url = new Array ("link1.htm", "link2.htm",
"link3.htm");

/* Resolve the location */
var loc=String(this.location);
loc=loc.split("/");
loc=loc[loc.length-1].split(".");
loc=loc[loc.length-2];

/* Menu generating function */
function dyn_menu_gen()
{
for(var i=0; i<links.length; i++)
{
if(loc==links[i])
{
document.write('<table class="explorer_active"
onmouseover="this.className='explorer_active';return true"
onmouseout="this.className='explorer_active';return true"
onmousedown="this.className='explorer_active';return true"
onclick="location.href='' + links_url[i] + ''"><tr><td>
<a href="' + links_url[i] + '" class="menu">'
+ links_text[i] + ' <b>»</b></a></td></tr></table>');
}
else
{
document.write('<table class="explorer" onmouseover="this.
className='explorer_over';return true" onmouseout="this.className=
'explorer';return true" onmousedown="this.className=
'explorer_down';return true" onclick="location.href=''
+ links_url[i] + ''"><tr><td><a href="' + links_url[i] +
'" class="menu">'
+ links_text[i] + '</a></td></tr></table>');
}
document.write('<table cellspacing="0" cellpadding="0"
bgcolor="#FFFFFF"><tr><td></td></tr></table>');
}
}

/* Generate the menu */
dyn_menu_gen();

Listing 2, links_style.css is:

.explorer{font-family:verdana,arial,helvetica; font-size:8pt;
font-weight:normal; text-decoration:none; color:#000000;
background:#B5D0FF; cursor:hand; width:150px;
height:30px; border:1 solid #A6C0ED}
.explorer_over{font-family:verdana,arial,helvetica; font-size:8pt;
font-weight:normal; text-decoration:none; color:#000000;
background:#A7C0EB; cursor:hand; width:150px;
height:30px; border-right:1 solid #5C6980; border-bottom:1
solid #5C6980; border-left:1 solid #B8D3FF; border-top:1
solid #B8D3FF}
.explorer_down{font-family:verdana,arial,
helvetica; font-size:8pt; font-weight:normal;
text-decoration:none; color:#000000; background:#A7C0EB;
cursor:hand; width:150px; height:30px; border-left:1
solid #5C6980; border-top:1 solid #5C6980; border-right:1
solid #B8D3FF; border-bottom:1 solid #B8D3FF}
.explorer_active{font-family:verdana,arial,helvetica; font-size:8pt;
font-weight:normal; text-decoration:none; color:#000000;
background:#FFFFFF; cursor:hand; width:150px;
height:30px}
.menu{font-family:verdana,arial,helvetica; font-size:8pt;
font-weight:normal; text-decoration:none; color:#000000}

I hope this script simplifies the creation of dynamic JavaScript navigation for your Web pages!

Replay

Category: javascript Time: 2003-02-03 Views: 6
Tags:

Related post

  • Build a Dynamic Menu in ColdFusion 2003-09-24

    Static content is so yesterday. Websites, whether internal or external, are all about staying current. To that end, on a recent internal project I created a new intranet site and opted to develop a dynamically populated menu in ColdFusion. I went thi

  • How to build a dynamic menu structure 2011-10-22

    I'm building a module for which I want to create two dynamic menus: one main menu with each menu item being a group name that the user belongs to (the groups come from a different database) and a secondary menu with a fixed set of menu items that man

  • Dynamic menu with latest Article in drupal7 2012-09-21

    I'm a bit new to Drupal environment. I'm trying to develop a demo site for CMS application. Now I'm facing a difficulty to create a dynamic menu for showing taxonomy-wise latest Article. Can I do it with any existing module (Muchomenu, OM Menu etc.,)

  • Drupal 7: building a dynamic menu based on taxonomy terms 2014-05-12

    I'm new to Drupal and am currently using Drupal 7 and I need to know if what I am trying to do is even possible. If so I am going to need some pointers on how to implement it. I have 2 vocabularies Category and Brand. I have products that are tagged

  • Custom code for WordPress dynamic menu 2014-04-01

    Without using plugins, how can I create a custom WordPress navigation menu to produce the following code? <div class="bottom_section_full"> <div class="bottom_section_left bottom_part"> <a href="what.html">&

  • Building a Custom Right-Click (Context) Menu with JavaScript 2015-03-25

    Web applications, as opposed to just informational websites, are being more and more utilised as the web continues to mature. Two cutting edge and leading examples of web applications are Gmail and Dropbox. As web apps continue to grow in functionali

  • Dynamic Menu Builder for Bootstrap 3: Menu Manager 2014-06-20

    Dynamic Menu Builder for Bootstrap 3 Dynamic Menu Builder for Bootstrap 3: Menu Manager Dynamic Menu Builder for Bootstrap 3: Item and Link Creating menus and navigation bars has never been easier than with Twitter Bootstrap. We can easily create sty

  • Dynamic Menu Builder for Bootstrap 3: Item and Link 2014-06-21

    Dynamic Menu Builder for Bootstrap 3 Dynamic Menu Builder for Bootstrap 3: Menu Manager Dynamic Menu Builder for Bootstrap 3: Item and Link In part 1, we prototyped the end product and wrote the main Menu class, which serves as the menu manager – a c

  • Build a dynamic form based on user input 2011-08-24

    I am looking on how to build a dynamic form in Drupal 6. Users enter the number of people attended the meeting, and the form should present a text box for each of the people attending the meeting, and containing the contact information. I would love

  • Dynamic menu wp_list_pages displaying only current branch including: current page, his siblings and its childs 2014-12-27

    I'm trying to build a sidebar menu displaying child pages of a grandparent page, his siblings and their childs, and keep those siblings and childs available while navigating through them. I've been looking at different and similar posts at the forum,

  • How can I call controls on a 'multiple control webpart' dynamically by using JavaScript 2011-02-14

    Could anyone please tell me how to call controls on a 'multiple control webpart' dynamically by using JavaScript in sharepoint --------------Solutions------------- I've written an approach on my blog which deals with this. Basically you have to creat

  • creating a dynamic menu in wordpress 2011-02-28

    I'm trying to use the dynamic menu of wordpress! So I try to create an dropdown based on category, my question is... I need to block the first (title/category name) for being access .... right now it will take a page with all post of that category, I

  • Keyboard shortcuts for dynamic menu items (Keynote) 2011-10-17

    I often find myself creating Keynote presentations with lots of extra slides. I then go through and skip a bunch for a particular class. To make this slide choice easier, I added a keyboard shortcut for the "Skip Slide" and "Don't Skip Slid

  • Dynamic menu with custom post types 2012-02-02

    I'd like to create a dynamic menu with a mix of static pages and custom post type archives that applies a class of "current" to the current tab. The example below uses 1) Static page set as Home 2) Static page 3) Custom post type archive 4) Stat

  • Creating new dynamic menu including BP links 2012-07-31

    Perhaps I have missed something fundamental, but I am attempting to include the various dynamic menu items included with BuddyPress and other add-ons to my primary drop-down menu. For example, the Twenty Eleven WP theme has a tall header with a drop-

  • Building the level (menu) hierarchy by creating sites and subsites deeper 2012-10-07

    I am working on a portal project that was a custom asp.net wcm/ecm portal and i will develop it in sharepoint from scratch. In that custom portal there is a 5 level menu hierarchy. And only some levels have contents and some levels are only for build

  • Dynamic Menu drops pages? 2013-02-06

    I've created a Dynamic Menu that highlights the selected page and colors for example the blog page "red" while the other links (home, about, contanct) remain white. My question is how can I make the Dynamic Menu work when say the blog goes to /b

  • How to create dynamic menu from HTML 2013-06-30

    I tried creating a dynamic menu from HTML, I registered menu in function name is main menu, Here is the HTML code that display the main menu- <div class="submenu"> <div style="width:980px;"> <ul> <a class="spr

  • Dynamic menu depending on a set mode 2013-07-27

    I am creating a dynamic menu whose items appear depending on a set 'mode' (that is passed via AJAX). Off this it creates the menu, disabling and hiding icons that are not associated with that mode. The problem is, there are a lot of if conditions in

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.767 (s). 13 q(s)