Newbie help with horizontal drop down menu.
Hey,
I've only just started using jQuery today after finally moving onto the UI side of my project and can instantly tell how great it is.
However, I am stuck with what I am trying to achieve. I've spent the last 3 hours trying to figure out how to do it from a variety of sources, but there is something I'm still not quite understanding about the way jQuery works or something as I'm unable to get the right combination to make it function.
It is a navigation bar for an administration system. I've used it for clients before and am trying to make it a bit better. Here is what I am trying to achieve:
Basically the black bar is always visible, and when you hover over each of the "module" links, the blue bar appears with the relevant "actions" for that "module".
The whole menu is made up using an unordered list, with the main list having a class of "bar" and the nested list having "sub". Example:
There are two parts to my issues:
1) Have the relevant blue bar slideDown when the module link is hovered (I can do this). Then, if it is "unhovered", have it fadeOut (I can do this, providing I simply do a hover prior to the slideDown - using the second parameter on the over function causes it to fade when the mouse goes along the blue bar). The issue here is I can't get the slideDown to wait for any fadeOut animations to complete when the mouse is hovered onto the next module link.
2) Force the blue hover on the black bar to remain while the blue bar is down. I managed to get it to add a class to the hover. I then managed to have it remove it on hovering over another module link. However, it then reapplies the hover class to the first one...
Here is my script:
Even that has other issues at the moment, which I think are caused by the hover effect on the .bar level interfering with the .sub level. I tried the :not selector but it made no difference.
Drop down menus of any kind have never been my strong suit (hence why my previous rendition of this was just <div> tags and Javascript - but I want to do it properly this time), so there may even be something fundamentally wrong with the way I'm approaching this.
Any and all advice is appreciated.
Thanks
I've only just started using jQuery today after finally moving onto the UI side of my project and can instantly tell how great it is.
However, I am stuck with what I am trying to achieve. I've spent the last 3 hours trying to figure out how to do it from a variety of sources, but there is something I'm still not quite understanding about the way jQuery works or something as I'm unable to get the right combination to make it function.
It is a navigation bar for an administration system. I've used it for clients before and am trying to make it a bit better. Here is what I am trying to achieve:
Basically the black bar is always visible, and when you hover over each of the "module" links, the blue bar appears with the relevant "actions" for that "module".
The whole menu is made up using an unordered list, with the main list having a class of "bar" and the nested list having "sub". Example:
-
<ul class="bar">
<li><a href="link">module</a>
<ul class="sub">
<li><a href="link">action</a>
</ul>
</li>
</ul>
There are two parts to my issues:
1) Have the relevant blue bar slideDown when the module link is hovered (I can do this). Then, if it is "unhovered", have it fadeOut (I can do this, providing I simply do a hover prior to the slideDown - using the second parameter on the over function causes it to fade when the mouse goes along the blue bar). The issue here is I can't get the slideDown to wait for any fadeOut animations to complete when the mouse is hovered onto the next module link.
2) Force the blue hover on the black bar to remain while the blue bar is down. I managed to get it to add a class to the hover. I then managed to have it remove it on hovering over another module link. However, it then reapplies the hover class to the first one...
Here is my script:
-
$(document).ready(function() {
$("#actionBar ul.bar li:not(ul.sub li)").hover(
function() {
$("a.hover").removeClass("hover");
$("ul.sub").fadeOut("fast");
$("a:not(ul.sub li a)", this).addClass("hover");
$("ul.sub", this).slideDown("normal");
}
);
});
Even that has other issues at the moment, which I think are caused by the hover effect on the .bar level interfering with the .sub level. I tried the :not selector but it made no difference.
Drop down menus of any kind have never been my strong suit (hence why my previous rendition of this was just <div> tags and Javascript - but I want to do it properly this time), so there may even be something fundamentally wrong with the way I'm approaching this.
Any and all advice is appreciated.
Thanks
Topic Participants
mj.fourjays
xfreestyler