MouseOver remove a classe MouseOut restore class

Question

então, estou tentando encontrar um pequeno script para remover a classe no item de menu ativo quando passo o mouse sobre outros itens de menu. Mas restaure-o quando eu me afastar do nav. A parte complicada é garantir que o script não seja acionado se houver um submenu ativo no item ativo atual.

Portanto, por exemplo, temos 4 itens de menu (Principal 1, Principal 2, Principal 3, Principal 4). Dois têm submenus (Principal 2, Principal 4). Principal 1 está atualmente ativo e tem uma classe chamada ativa. Quando você passa o mouse sobre Principal 2, o submenu mostra e o Principal 2 tem uma classe de foco e uma classe hilite ao passar o mouse sobre seu submenu, mas agora o Principal 1 está de volta ao estoque normal. Agora você se afasta do nav e Main 1 volta a ter uma classe ativa e Main 2 parece normal

Agora faça a mesma configuração e torne o Principal 2 ativo com seu submenu sendo exibido por padrão. Quando você passa o mouse sobre Main 1 Main 3 Main 4, o submenu fecha e a classe ativa em Main 2 é removida, mas quando você se afasta ela volta a estar ativa e mostrando seu submenu. Agora, se você passar o mouse sobre Main 2 ou seu submenu, a classe nunca muda, ela permanece a mesma.

Pesquisei em toda parte por uma configuração semelhante e não consigo encontrar nada além do que eu havia postado em uma pergunta anterior que pode ser encontrada aqui eu joguei todas as minhas coisas e sem sorte o stopPropagation () que me faz pensar que este é o código errado para este projeto, mas funcionou em um projeto muito diferente. Fiz uma segunda pergunta sobre isso porque não tinha certeza se poderia postar na outra caso já estivesse marcada como respondida.

Agradeço antecipadamente e espero obter alguma ajuda,
Tyler

EDITAR: aqui está um link para o script antigo em jsfiddle aqui ATUALIZADO: 30/04/2011

Answer 1

Observe que isso só funcionará no wordpress
Publique as edições no jsfiddle e não neste código, a menos que seja importante

Ok, finalmente temos um menu funcionando. Eu fiz algumas pesquisas sérias e encontrei uma solução. Agora eu não tenho certeza se está correto ou não, mas funciona como eu quero. Se alguém quiser usar, fique à vontade. Ele está sendo usado com o WordPress, então eu tenho uma função para adicionar algumas linhas de código e vou postar isso abaixo também.

Aqui está a função que adicionei ao WordPress:

function additional_active_item_classes($classes = array(), $menu_item = false){

    if(in_array('current-menu-item', $menu_item->classes)){
        $classes[] = 'active active-menu';
    }
    return $classes;
}  
add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );

O código acima é para wordpress 3.0+

Isso adicionará uma classe ao item de menu atual

Até agora o jQUERY eu meio que adicionei um cluster de coisas e provavelmente há uma maneira de mesclar tudo e fazê-lo funcionar como um só, mas eu não sei como fazer isso, mas postarei o código aqui e então uma demonstração para jsfiddle

Aqui está o script jQUERY que juntei e adicionará o efeito encontrado na demonstração:

Isso adiciona uma classe .not-active a todos os itens pai e não pai:

$('*:not(li) > ul#navbar > li').addClass('not-active');

Isso adiciona uma classe .child-menu a todos os ul.sub-menus:

$('ul.sub-menu').children().addClass('child-menu');

Isso adiciona uma classe .first-child ao primeiro item filho em cada submenu (adicionado para um estilo extra):

$('#navbar ul.sub-menu :first-child').addClass('first-child');

Isso adiciona uma classe .last-child ao último item filho em cada submenu (adicionado para um estilo extra):

$('#navbar ul.sub-menu :last-child').addClass('last-child');

Isso irá alternar a classe .not-active em um menu ativo (remove .not-active para o último script abaixo):

$("#navbar li.active").toggleClass("not-active");

Isso irá alternar a classe .not-active em um menu filho ativo (remove .not-active para o último script abaixo):

$('#navbar ul.sub-menu li.active').toggleClass("not-active");

Isso adiciona uma classe .parent-active se .current-menu-parent estiver presente:

$('ul#navbar li.current-menu-parent').addClass('parent-active');

Isso adiciona uma classe .child-active se li.current-menu-parent ul.sub-menu estiver presente:

$('ul#navbar li.current-menu-parent ul.sub-menu').addClass('child-active');

* Isso adiciona uma classe .hilite ao pai ao passar o mouse sobre o menu filho: *

$('#navbar li').hover(
    function() {
        $(this).parents('li').children('a').addClass('hilite');
    },
    function(){
        $(this).parents('li').children('a').removeClass('hilite');
    }
);

Isso remove a classe .active de um menu ativo ao passar o mouse sobre outros itens de menu, mas não será usada ao passar o mouse sobre o item ativo ou itens filho do item ativo:

$('#navbar li.not-active').hover(
    function() {
        $('#navbar .active').removeClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').removeClass('parent-active child-active');
    },
    function() {
        $('#navbar .active').addClass('active-menu');
        $('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').addClass('parent-active child-active');
   }
);

Agora que temos o jQUERY, vamos obter o css e o html para referência.

Aqui está o css:

/*Main position of menu*/
#navigation{float: left; margin: 5px 0 15px; padding: 0; position: relative;  width: 100%}
/*First UL tag for menu*/
ul#navbar{margin: 0; padding: 0; font-size: 96%; height: 20px; background: #009AD9}
/*Sets style for each LI tag and sets effects*/
#navbar li{float: left; list-style: none; text-transform: uppercase; font-weight: bold}
#navbar li a{display: block; text-decoration: none; color: #fff; padding: .24em .8em; line-height: normal}
#navbar li:hover a:hover, #navbar li a.hilite{background: #fff; color: #000}
#navbar li.active-menu a{background: #fff; border-top: 2px solid #B70F0F; padding-top: .063em; color: #666}
/*Sets parent active when child is active*/
#navbar li.parent-active a{background: #fff; color: #666}
/*Sets child-menu to not display when not-active*/
ul.sub-menu{display: none}
/*Sets the position of child menu using first-child (leave to avoid conflict with other style's)*/
#navbar li ul.sub-menu li.first-child{margin-left: -0.375em}
/*Sets child as visible on parent hover*/
#navbar li:hover ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child as visible when parent is active menu*/
#navbar li.active-menu ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child menu active when active item is inside of child menu*/
ul.child-active{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}
/*Sets style of child links*/
#navbar li ul.sub-menu li a{display: block; text-decoration: none; padding: 0 .5em; line-height: normal}
/*Sets various child link styles*/
ul.sub-menu li a{color: #666!important}
ul.sub-menu li a:hover{color: #000!important}
li.active-menu ul.sub-menu a{border-top: none!important; padding: 0 .5em!important}
#navbar li.current-menu-parent:hover ul.sub-menu{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}

Deve ser muito simples de ler

Aqui está o html:

<div id="navigation">
    <ul id="navbar">
        <li class="not-active"><a href="#">Main 1</a></li>
        <li class="active active-menu"><a href="#">Main 2</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 1</a></li>
                <li class="child-menu"><a href="#">Sub 2</a></li>
                <li class="child-menu last-child"><a href="#">Sub 3</a></li>
            </ul>
        </li>
        <li class="not-active"><a href="#">Main 3</a></li>
        <li class="not-active"><a href="#">Main 4</a>
            <ul class="sub-menu">
                <li class="child-menu first-child"><a href="#">Sub 4</a></li>
                <li class="child-menu"><a href="#">Sub 5</a></li>
                <li class="child-menu last-child"><a href="#">Sub 6</a></li>
            </ul>
        </li>
    </ul>
</div>

Sinta-se à vontade para usar este código e se encontrar uma maneira mais simples de agrupar todos esses scripts, faça-o.

Você pode ver uma demonstração ao vivo aqui em JSFIDDLE