Here i made an example of my menu jsfiddle. So i have horizontal menu with drop down, but what i need is - on page load first li
should be expanded(this is not hard) and when i hover on any other element it should display current expanded content(and if i mouseleave
current element should be expanded).
This is the situation when i hover on Item2
and mouseleave Item2
it should stay like this:
Item1 Item2 Item3
|||||
subItem2.1 subItem2.2 subItem2.3
UPDATE:
i managed to do it, but with exception, here is the link on JSFiddle
Its works as i wanted, but when i click on a link Item1
, or Item2
, init()
function is called, and Item1
, active again, i need somehow to set active link - clicked one,
for example if i clicked on a Item3
link it redirects me to Item3 page and this link is active in menu.
(all code on Jsfiddle)
If I understand your question correctly, the problem is that you need to call the init function to redraw all, but at the same time you set there item1 as current; and this is not ok if you have just pressed link2.
If think that your solution should be to almost remove all the init code. All this can be done in the css styles, simplifying a lot your code.
you set active to items. (You are already doing this in the anchors, do it in the li). Then, put all the appearance styles inn the css, and your script is reduced.
don't need to set active on subitems. you can set rules like li.active li; that is, the li that is descendant of the active li.
Once you do all this, you can avoid the init funcion altogether.
Added fiddle
I have changed that in the updated fiddle
I am marking the visible item menu 'current', I find 'active' confusing for a class name. It must be in the li and not in the, so that it can affect the second level lis
Now the script is just
$(document).ready(function() {
$("#menu_item ul.menu li.expanded").mouseover(function(){
var previous = $('.current');
previous.removeClass('current');
$(this).addClass('current');
});
});
I am just removing current from the previous current element, and adding it to the new one.
The initial selection is just in the markup
<div id="menu_item">
<ul class="menu">
<li class="expanded first current">
<a href="#" title="">Item1</a>
And the new css rules are:
#menu_item > ul.menu > li.current {
background-color: orange;
}
#menu_item ul.menu li ul {
display: none;
}
#menu_item ul.menu li.current ul {
display: block;
}
you should doing changes in your style than its can work properly.
ul.menu li.expanded ul {
position: relative;
display: block;
top: 20px;
background-color: orange;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With