jQuery nav-tree menu with li hover highlighting
Permalink
Following on this (http://www.packtpub.com/article/concrete5-mastering-autonav-for-advanced-navigation) excerpt from Remo's excellent looking book, I was inspired to develop the block further.
The idea of the template is to allow a different background color for each level of the menu. This I have accomplished with the code below. I am now having some problems with the hover highlighting. I am attempting to use
which works for the top level but seems to add the class to all the child and parent li rather than just the current hover li.
My question is thus:
what is the leanest most correct way to accomplish this?
I thought about writing a whole selection of css rules for each line but this seems needlessly complicated. FULL CODE BELOW
VIEW.JS
VIEW.CSS
The idea of the template is to allow a different background color for each level of the menu. This I have accomplished with the code below. I am now having some problems with the hover highlighting. I am attempting to use
$(".nav-tree li").hover(function() { $(this).addClass("tree-hover"); }, function() { $(this).removeClass("tree-hover"); }); ul.nav-tree li.tree-hover {background:white;}
which works for the top level but seems to add the class to all the child and parent li rather than just the current hover li.
My question is thus:
what is the leanest most correct way to accomplish this?
I thought about writing a whole selection of css rules for each line but this seems needlessly complicated. FULL CODE BELOW
VIEW.JS
$(document).ready(function() { // prepend a span element in front of each link $(".nav-tree a").parent().prepend("<span class=\"tree-item-type\"></span> "); //prepend a wider span to each child link and remove original span $(".nav-tree ul li span").removeClass("tree-item-type"); $(".nav-tree ul li span").addClass("tree-item-type2"); $(".nav-tree ul li ul li span").removeClass("tree-item-type2"); $(".nav-tree ul li ul li span").addClass("tree-item-type3"); $(".nav-tree ul li ul li ul li span").removeClass("tree-item-type3"); $(".nav-tree ul li ul li ul li span").addClass("tree-item-type4"); // those span element being part of a parent element get a "+" $(".nav-tree ul:has(*)").parent().find("> .tree-item-type").text("+").toggleClass("tree-item-folder"); $(".nav-tree ul:has(*)").parent().find("> .tree-item-type2").text("+").toggleClass("tree-item-folder"); $(".nav-tree ul:has(*)").parent().find("> .tree-item-type3").text("+").toggleClass("tree-item-folder"); // hide all submenus
Viewing 15 lines of 28 lines. View entire code block.
VIEW.CSS
ul.nav-tree{background:pink; overflow:show; margin:0; padding:10px 0 10px 0; width:100%} ul.nav-tree li {display:block; width:100%; margin:0; padding:0;} ul.nav-tree li a {margin-left:0px;} ul.nav-tree li ul {display:block; width:100%; margin:0; padding:0;} ul.nav-tree li ul li {background:blue; display:block; width:100%; margin:0; padding:0;} ul.nav-tree li ul li a {} ul.nav-tree li ul li ul {} ul.nav-tree li ul li ul li {background:red; display:block; width:100%; margin:0; padding:0;} ul.nav-tree li ul li ul li a {} ul.nav-tree li ul li ul li ul {} ul.nav-tree li ul li ul li ul li {display:block; width:100%; margin:0; padding:0;} ul.nav-tree li ul li ul li ul li a {} .nav-tree li { list-style-type: none; } .nav-tree li a {color:black;} .nav-tree { margin: 0px; padding: 0px; }
Viewing 15 lines of 24 lines. View entire code block.
Thanks for your reply. Although I'm not sure it does what I need out the tin, it has inspired some thinking :)
At present the class is being applied to the top level li which has been stretched to accommodate the descendent ul so that
Top Level ul li
-child ul li ul li ||hovering here
-grandchild ul li ul li ul li
is still hovering within the realm of the Top Level item and therefor changing the background color of the whole block.
What I think needs done is to somehow add a background:transparent class to the children when the top level is hovered, to parent and child when the middle is hovered and to all ancestors when the bottom is hovered.
actually scrap that (the transparent bits will just let the top level li background through) I think I'm going to have to go back to the drawing board and do something with the anchor elements instead..
Well, I'm a little clearer so thanks for your time..
At present the class is being applied to the top level li which has been stretched to accommodate the descendent ul so that
Top Level ul li
-child ul li ul li ||hovering here
-grandchild ul li ul li ul li
is still hovering within the realm of the Top Level item and therefor changing the background color of the whole block.
What I think needs done is to somehow add a background:transparent class to the children when the top level is hovered, to parent and child when the middle is hovered and to all ancestors when the bottom is hovered.
actually scrap that (the transparent bits will just let the top level li background through) I think I'm going to have to go back to the drawing board and do something with the anchor elements instead..
Well, I'm a little clearer so thanks for your time..
Another thought, did you start with the new cleaner template that is now in 5.6 - already been in use since 5.4.1.1 - see
http://www.concrete5.org/community/forums/customizing_c5/new-cleane...
http://www.concrete5.org/community/forums/customizing_c5/new-cleane...
- or if the ul is a descendant of .nav-tree:
Though you can usually do such class related hovers in pure css rather than using jQuery.