1

I'm bulding a small menu and I need the help of jQuery to add or replace a class of a menu item if a sub-menu item is currently viewed.

<div id="menu">    
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="page.html">Page</a>
            <ul>
                <li><a href="sub-page-1.html">Page 1</a></li>
                <li><a href="sub-page-2.html">Page 2</a></li>
                <li><a href="sub-page-3.html">Page 3</a></li>
            </ul>
          </li>
    </ul>
</div>

So basically if a sub-menu item is currently viewed (ul li ul li) I must add a class to its parent menu item (ul li).

I found here on the site a similar question but does not include the sub menu part and I'm clueless about jQuery.

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('ul#menuHov a[href$="' + window.location.pathname + '"]').addClass("menuHov"); 
});

Thanks a lot in advance

1
  • What do you mean precisely with "currently viewed"? I mean: a sub-menu item is showed when the parent menu item is hovered/clicked or you create the ul with some parent item with sub-menu items and others without sub-menu items?
    – Polmonite
    Nov 15, 2012 at 11:53

6 Answers 6

3

Try this :

jQuery.noConflict();
jQuery(document).ready(function() {
   jQuery('li a[href$="' + window.location.pathname + '"]').parent('li').addClass("menuHov"); 
});
2
  • Sorry but that ads the class to the link and not to the parent ul li
    – user983248
    Nov 15, 2012 at 11:43
  • so why post something that has nothing to do with the question ? Thanks for the help any way
    – user983248
    Nov 15, 2012 at 11:55
1
document).ready(function() {
   $('li a').addClass("menuHov");
 var lastVisited =  document.referrer;//it can return last url
   $('li ul li a').find('href='+lastVisited).addClass("className");  
});
2
  • where does your example checks that the ul li ul li url it's currently viewed ?????
    – user983248
    Nov 15, 2012 at 11:45
  • would .parent( [selector] ) be a better shot rather that rely on referrers (that sometimes are not set ? api.jquery.com/parent
    – user983248
    Nov 15, 2012 at 12:11
1

If you want to add the class only to parent items with sub-menu items (one time when the page load) you can simply do:

$('ul li ul').parent().addClass('children-viewed');

If you want to add the class when the sub-menu item is hovered you can do:

$('ul li ul li').hover(function(){
    $(this).parent().parent().addClass('viewed');
},function(){
    $(this).parent().parent().removeClass('viewed');
});

If you want to add the class when the sub-menu items are showed (for example when hovering their parent's item) you can do:

$('ul li').hover(function(){
    $(this).addClass('viewed');
    // show sub-menu items
},function(){
    $(this).removeClass('viewed');
    // hide sub-menu items
});

If with "currently viewed" you mean something else, please explain what you mean.

PS: sorry for my bad english.

EDIT:

Now I understand :) . Then you can do:

$('ul li ul li').each(function(){
    var rx = new RegExp($(this).children('a').attr('href')+"$");
    if(rx.test(window.location.pathname)){
        $(this).parent().parent().addClass("menuHov");
    }
});

or, if you don't like loops:

var curr_url = window.location.pathname;
var currently_viewed = curr_url.substr(curr_url.lastIndexOf("/")+1);
$('ul li ul li a[href$="'+currently_viewed+'"]').parent().parent().parent().addClass("menuHov");
6
  • I meant that (from the html example) if the user click on any sub-item link (ul li ul li) the main parent (ul li) class should be changed or added. - <li><a href="page.html">Page</a> should have a class IF the user is currently viewing any of the following pages: ` <li><a href="sub-page-1.html">Page 1</a></li>, <li><a href="sub-page-2.html">Page 2</a></li>, <li><a href="sub-page-3.html">Page 3</a></li>` I hope that makes more sense now
    – user983248
    Nov 15, 2012 at 12:21
  • currently viewed = browser url
    – user983248
    Nov 15, 2012 at 12:24
  • Oh, now I understand! Sorry, I misinterpreted the question! I edited my answer.
    – Polmonite
    Nov 15, 2012 at 12:34
  • Sorry but still no luck with both scripts. I think you are close or I'm missing something. There was no class added to anything after using both scripts.
    – user983248
    Nov 15, 2012 at 12:50
  • Does it makes any difference if the links are http://www.example.com/sub-page-3.html instead of sub-page-3.html ?
    – user983248
    Nov 15, 2012 at 12:53
1
jQuery(document).ready(function() {
   jQuery('li a[href$="' + window.location.pathname + '"]').parent().parent().parent().addClass("yourclassname"); 
});

also can define #menu ul li ul li a

jQuery(document).ready(function() {
   jQuery('#menu ul li ul li a[href$="' + window.location.pathname + '"]').parent().parent().parent().addClass("yourclassname"); 
});
0

You can use jQuery .is() function. Try something like that

$('ul li ul li').is('.open')

And add .open class identifier to the ul li ul li when hover by using addClass('.open')

More info Here

0

IF you have example $_GET['page']=="food"

you will check in the url with something like this

function getUrlVars() {
   var vars = {};
   var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
   function(m,key,value) {
   vars[key] = value;
   });
   return vars;
}

Then you could have an ID on the menuitems

<li id="food">Food</li>

Then how to get the page.

var page = getUrlVars()["page"];

if (page){
    var currPage = $("#"+page);
    currPage.css({"background":"#eeeeee","color":"#000000"});

}else{
    console.log("No page defined!");
}
2
  • Over complicated, there is no $_GET['page']=="food" and can't be set or I don't need to set it. also I don't see on you example how the parent item would change it's class or get one, just like the question implies.
    – user983248
    Nov 15, 2012 at 13:12
  • I think i missunderstod you. but i get now what you want. Nov 15, 2012 at 13:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.