Pesquisar na Comunidade
Mostrando resultados para as tags ''ul''.
Encontrado 3 registros
-
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.
-
- html5
- javascript
-
(e %d mais)
Tags:
-
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--> <------------------------->
-
problemas com menu drop down sem ul
uma questão postou Marcelo Reis Tutoriais & Dicas - HTML, XHTML, CSS
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>