Search the Community

Olá pessoal... É possível desabilitar e reabilitar itens de um menu e/ou submenu construído com HTML5 e CSS3 usando Javascript? A necessidade disso é que, em diversas ocasiões vou necessitar que um ou mais itens do menu principal e dos menus secundários fiquem desabilitados. Se alguém contribuir com um exemplo bem simples, fico muito grato.

Olá, estou desenvolvendo uma página na qual escrevi um menu comum em lista não ordenada e o tornei DropDown com o JavaScript (Segue modelo abaixo). A minha questão é que quando eu passo o mouse por cima do botão do menu (que está dentro da tag <li>Botão</li>), ele abre a div dropdown, porém, quando eu levo o mouse para dentro desta div que foi aberta em DropDown pelo JavaScript, o Botão (<li>Botão</li>) correspondente à ela no menu, que a abriu, deixa de ficar selecionado (ativo em ":hover" no CSS) e volta às suas características normais, como quando o mouse não está por cima do botão. Gostaria de saber como faço para manter ativo o botão correspondente à janela dropdown que eu abri no menu e desativá-lo somente quando eu clicar fora do menu, em qualquer outra área do site. Grato desde já pela atenção. Segue abaixo exemplo de como eu escrevi: <--SCRIPT PARA DROPDOWN--> <script> $(document).ready(function(e) { $('.sub-menu').hide(); $('.show-sub-menu').hover(function(){ $(this).find('.sub-menu').slideDown('fast'); },function(){ $(this).find('.sub-menu').slideUp('fast'); }); }); </script> <----------------------------------------> <--CSS DO MENU E SUB_MENU--> .menu_principal{ width: auto; height: 32px; float: left; text-align: right; } .menu_principal ul{ width: auto; height: 31px; float: left; text-align: left; padding: 0px; margin-left: 35px; } .menu_principal ul li{ display: inline; line-height: 60px; list-style-type: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; color: #BBB; text-transform: none; } .menu_principal ul li a{ line-height: 0px; padding: 21px 13px; list-style-type: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; color: #BBB; text-transform: none; text-decoration: none; } .menu_principal ul li a:hover{ background-color: #222; color: #DDD; line-height: 0px; padding: 20px 13px; } .sub-menu{ width: 100%; height: 285px; cursor: default; z-index: 7; position: absolute; top: auto; left: 0; right: 0; display: block; } <-----------------------------------------> <--HTML DO MENU--> <div class="menu_principal"> <ul> <li class="show-sub-menu"><a href="#">Item 1</a> <div class="sub-menu"> </div> </li> <li class="show-sub-menu"><a href="#">Item 2</a> <div class="sub-menu"> </div> </li> <li class="show-sub-menu"><a href="#">Item 3</a> <div class="sub-menu"> </div> </li> </ul> </div> <!--MENU_PRINCIPAL TERMINA--> <------------------------->

Pessoal Como faço para estilizar um menu dropdown onde o html vem da seguinte maneira 1 class container = navbar 1 class menu-departamento = 1 ul com uma class = class banho 1 ul com uma class = class Mesa Percebam que não existem duas ul distintas! Como exemplo uma ul para menu-departsamento e outra para seus filhos. Sem a ul para o primeiro nivel que seria os departamentos não é possivel alinhar de maneira horizontal. Para maior entendimento segue o html para padrão da plataforma que não pode ser modificados <div class="navbar"> <div class="navbar-inner"> <div class="menu-departamento"> <span class="rt"> </span> <span class="rb"> </span> <h3 class="banho"> <span> </span> <a class="menu-item-texto" href="#">Banho</a> </h3> <ul class="banho"> <li> <a href="#">Jogos de Toalhas</a> </li> <li> <a href="#">Toalhas de Banho Gigante</a> </li> <li> <a href="#">Toalhas de Banho</a> </li> <li> <a href="#">Toalhas de Rosto</a> </li> <li> <a href="#">Toalhas Social</a> </li> <li> <a href="#">Toalhas para Pés</a> </li> <li> <a href="#">Toalhas de Praia</a> </li> <li> <a href="#">Toalhas de Times de Futebol</a> </li> <li> <a href="#">Toalhas Intanfil</a> </li> <li> <a href="#">Toalhas para Pescoço</a> </li> </ul> <h3 class="mesa even"> <span> </span> <a class="#">Mesa</a> </h3> <ul class="mesa even"> <li> <a href="#">Toalhas de Mesa</a> </li> </ul> </div> </div> </div>