ansaurus

Question

If I have one nav_bar.html file that is included on other pages, how do I show which menu item is active?

Answer 1

A:

You could attempt to detect which page the user is currently on by use of window.location.pathname, and shade the relevant menu item based on this.

Example:

function shadeMenuItem(item){
    //Your code to style the given element here
}
$(document).ready(function() {
    if(window.location.pathname.match(/^\/questions.*/)){
        shadeMenuItem($('#questions'));  //shade menu item 'questions'
    }
    else if(window.location.pathname.match(/^\/users.*/)){
        shadeMenuItem($('#users'));  //shade menu item 'users'
    }
});

If this code was implemented on this page, the first condition would be matched, meaning that shadeMenuItem() would have the element with #questions passed to it.

Michael Robinson 2010-08-14 01:59:07

Answer 2

A:

I don't know if this is the answer you're looking for. But you don't need any javascript in order to shade certain element in certain page.

You can always take advantage of CSS selectors, for example:

<body id="homepage">
   <ul id="tabs">
     <li id="tab-homepage"><a href="...">homepage</a></li>
     <li id="tab-news"><a href="...">news</a></li>
     ...

In your CSS you can say something like:

#homepage #tab-homepage { background-color: red }
#newspage #tab-news { background-color: blue }

So, finally, you would only have to change the "id" attribute of the body element to get your shaded menu items.

Anyway, if you're using jQuery you can always use something like:

$('body').attr('id', '...');

JuanIgnacioIglesias 2010-08-14 02:12:52

I think he wants to keep the nav_bar.shtml file static but shade the menu item for the current page... Either he's going to have to use Javascript, or have a different nav_bar file included on each page.

Michael Robinson 2010-08-14 02:15:00

You're right. Maybe he could use window.location and a CSS3 selector to get the menu item that points to that location and then change the attribute of the item.

JuanIgnacioIglesias 2010-08-14 02:18:06

Answer 3

A:

One way to do this is to write some code to look in your menu, find the hrefs of the links therein, and compare them to the current window.location.pathname. If you have nice clean URLs this isn't too hard. If you have long, complex URLs, it may not be workable.

So, here's the general idea:

$(document).ready( function(){
  var thispage = location.pathname.substring(1);
  $('#menu li a[href~="' + thispage + '"]') // ~= is contains. Tweak as needed.
    .addClass('active');
});

Assuming your menu looks something like this:

<ul id="menu">
  <li><a href="page1.html">This</a></li>
  <li><a href="page2.html">That</a></li>
  <li><a href="page3.html">The Other</a></li>
</ul>

And of course:

li.active {
    background-color: yellow;
}

Ken Redler 2010-08-14 02:21:49

ansaurus

tags:

views:

answers:

If I have one nav_bar.html file that is included on other pages, how do I show which menu item is active?

related questions