Скрыть активное подменю при наведении других пунктов меню

Я использую класс css:

#navbar .current-menu-ancestor ul.sub-menu {display: inline;}

чтобы сделать подменю своей страницы липкой.

Мне нужно скрыть его (через jQuery), если я нахожу другие элементы меню верхнего уровня.

пример:

Top Item 1
- Menu 1a
- Menu 1b
Top Item 2
Top Item 3
- Menu 3a
- Menu 3b
- Menu 3c

Если я нахожусь на странице меню 1b, теперь у меня есть все подменю, показанное в верхнем пункте 1.
Мне нужно это, когда я нахожу в верхнем пункте 3, чтобы показать его подменю и скрыть «активное» подменю.

(это горизонтальные подменю с прозрачным фоном ...)

0
nl ja de
Я вас интересует использование плагинов для этого, а затем chk this tripwiremagazine.com /2012/12/jquery-menu-plugins.html есть хорошие анимации и css, прикрепленные к этим меню ...
добавлено автор Scorpio, источник
Это действительно поможет, если вы поместите код в jsFiddle, чтобы показать, что не работает.
добавлено автор Brian Hoover, источник

2 ответы

Есть способы сделать это с помощью CSS, который может быть более жизнеспособным.

Red Team Design.com опубликовал несколько очень популярных методов достижения вашей цели:

Это отличный пример, и они также дают полезный учебник. Однако, если вам абсолютно необходимо использовать jQuery (если это какое-то назначение, например), я бы придерживался событий щелчка, чтобы избежать сложного кода, а затем я действительно ленивый :)

Вы можете легко сделать что-то вроде этого:

Demo: http://jsfiddle.net/jrb9249/5n5Bp/4/

HTML:

<html>
    <body>
        <div class="div_parent">
            
  • Home
  • Shop <div class="sub_div" id="shop_div"> </div>
  • Contact Us <div class="sub_div" id="contact_div"> </div>
</div> </body> </html>

Javascript:

var anim;

$(document).click(function(event){
    if(event.target.nodeName != 'LI' && (anim==0)){
        $('.sub_div').fadeOut('fast');
    };
});

anim = 0;
function mouseEvent(myid){
    $('.top_menu li > div').each(function(){
        $(this).fadeOut('fast');
    });
    anim = 1;
    $(myid).fadeIn('fast', function(){
        anim = 0;
    });
};

CSS:

.div_parent
{
    background:transparent;
    padding:5px;
    margin:0px;
    float:left;
    border:solid 1px gray;
}

.sub_div
{
    paddin:0px;
    margin:0px;
    position:absolute;
    margin-top:3px;
    display:none;
}


.top_menu, .sub_menu
{
    margin:0px;
    padding:0px;
    background:transparent;
}

.top_menu li
{
    float: left;
    display:inline;
    margin:0px 5px 0px 5px;
}

a:link,a:active,a:visited
{
    color:blue;
    text-decoration:none;
}

a:hover
{
    text-decoration:underline;
}

.sub_menu li
{
    clear:both;
    float:left;
    background:#E2EDD5;
    border:solid 1px white;
    padding:2px;
    width:150px;
}

.sub_menu li:hover
{
    cursor:pointer;
    background:#FFFFE8;
}

Это использует анимацию jadeery fadeOut (простой) и переменную «anim», чтобы избежать конфликтов между открытием и закрытием формы. И CSS будет прибирать все для вас. Я попытался использовать jQuery как можно больше в этой демонстрации. Я надеюсь, что это помогает. Удачи.

1
добавлено

Привязать к .mouseleave() событие smth. похожий на

$('.main_menu_container').mouseleave( function() {
    $(this).children('.submenu').hide();
});
0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda