Geek asks and answers

Css menu, do not hide the current menu link on hover

Here I made an example of my jsfiddle menu . Thus, I have a horizontal menu with a drop-down list, but I need to - the load on the page limust first be expanded (this is not difficult), and when I hover over any other element, it should display the current expanded content (and if I am mouseleavecurrent item must be expanded).

This is a situation where I am on Item2and mouseleave Item2, it should remain like this:

Item1       Item2          Item3
            |||||
subItem2.1  subItem2.2 subItem2.3

UPDATE:

I managed to do this, but with an exception, here is a link to JSFiddle

It works the way I wanted, but when I click on the link Item1or Item2, the function is called init(), and Item1is active again, I need to somehow set the active link - clicked one,

For example, if I clicked a link Item3, it redirects me to the Item3 page, and this link is active in the menu. (all code in JSFiddle )

+5
source share
3 answers

If I understand your question correctly, the problem is that you need to call the init function to redraw everything, but at the same time you will set item1 there as the current one; and this is not normal if you just clicked link2.

, , init. css, .

. ( , li). css, script .

. , li.active li; li, li.

, init.

​​

fiddle

"current", "", . li, , lis

script

$(document).ready(function() {
    $("#menu_item ul.menu li.expanded").mouseover(function(){
        var previous = $('.current');
        previous.removeClass('current');          
        $(this).addClass('current');
    });
});

.

<div id="menu_item">
    <ul class="menu">
        <li class="expanded first current">
        <a href="#" title="">Item1</a>

css:

#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;
}
+6

, .

ul.menu li.expanded ul {
  position: relative;
  display: block;
  top: 20px;
  background-color: orange;
}
+2

, , , URL- - . JavaScript window.location.pathname. jQuery, - :

$(".first a[href=" + window.location.pathname + "]").addClass('active');

.first, href, . , .

+2

More articles:


All Articles