Search the Community
Showing results for tags 'submenu'.
Found 12 results
-
Olá, Eu preciso criar um menu com dois níveis utilizando Javascript. O código está assim: <div id="menu"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> Eu preciso transformá-lo em um segundo nível e inserir texto no estilo "Parent 1" no primeiro nível, dessa maneira: <div id="menu"> <ul> <li>Parent 1 <ul class="sub-menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </li> </ul> </div>
-
[Submenu] Menu horizontal com submenu vertical.
Jag Panzer posted a question in Perguntas e respostas rápidas
Olá camaradas estou desenvolvendo um menu com submenu, o problema é que o submenu fica horizontalmente, atualmente estou usando apenas o HTML e o CSS, vou colocar ambos aqui: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TesT</title> <link rel="stylesheet" href="testilo.css"> </head> <body> <h1>Teste 2</h1> <h1> Desenvolvendo Menu</h1> <img src="cabala2.jpg" alt="Árvore" width="120" height="120" id="imgpos"> <br> <hr> <br> <nav id="menu"> <ul> <li><a href="index.html">HOME</a></li> <div class="dropdown"> <button class="dropbtn"> <li><a href="meses.html">Mêses</a></li> </button> <div class="dropdown-content"> <ul > <li><a href="#nissan">Nissan</a></li> <li><a href="#iyar">Iyar</a></li> <li><a href="#sivan">Sivan</a></li> <li><a href="#tamuz">Tamuz</a></li> <li><a href="#av">Av</a></li> <li><a href="#elul">Elul</a></li> <li><a href="#tshrei">Tishrei</a></li> <li><a href="#cheshvan">Cheshvan</a></li> <li><a href="#kislev">Kislêv</a></li> <li><a href="#tevet">Tevêt</a></li> <li><a href="#shevat">Shevat</a></li> <li><a href="#adar">Adar</a></li> </ul> </div> </div> <li><a href="12tribos.html">As 12 Tribos</a></li> <li><a href="arvore.html">Árvore da Vida</a></li> <li><a href="alfabeto.html">Alfabeto Hebraico</a></li> <li><a href="banco.html">Banco de Mapas</a></li> </ul> </nav> </body> </html> Agora vou colocar o CSS: body{ background-color:rgb(0, 132, 255); } nav#titulos h1{ color: white; font-size: 30px; margin-top: -2px; text-align: center; } nav#titulos h2{ color: white; padding: 5px; font-size: 30px; text-align: center; } .dropbtn{ background-color: darkblue; } .dropdow { float: left; overflow: hidden; } .dropdow .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: darkblue; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: rgb(10, 214, 241); } .dropdown-content { display: none ; position: absolute; background-color: darkblue; min-width: 160px; box-shadow: 0px 8px 16px 0px rgb(10, 214, 241); z-index: 1; } .dropdown-content a { float: none; color: darkblue; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color:darkblue; } .dropdown:hover .dropdown-content { display: flex; justify-content: space-between; } hr { border-color: white; margin-top: -20px; } nav#menu{ display: flex; overflow: hidden; margin-top: -10px; background-color: darkblue; float: none; text-align: left; padding: 0px 0px 10px 0px; } nav#menu ul { margin:-5px 0 ; padding: 0; background-color: darkblue; overflow: hidden; right: auto; float: left; } nav#menu li{ display: flex; border: none; } nav#menu ul li { display: inline; padding: -10px; } nav#menu li a { display: inline-block ; color: white; padding:19px 39px; margin: none ; text-decoration:none ; transition: background-color 1s; } nav#menu li a:hover { background-color:rgb(10, 214, 241); } nav#menu li.active{ background-color:rgb(10, 214, 241);; } h1{ color: white; text-align: center; } p { color: white; text-align: center; } p{ text-align: center; } h2 { color: gold; text-align: center; text-decoration:none; } a { color: gold; } #imgpos { position: absolute; left: 5px; top: 10px; } nav#menu ul { width: 100%; display: table; } nav#menu ul li { display:table-cell; list-style: none; } -
Boa tarde pessoal. Tenho a seguinte estrutura para menu e submenu de uma loja virtual: {% for category in categories %} {% if loop.index <= nivelLimit %} <li class="category--{{ category.id }} category__item--one {% if category.children %} category__label{% endif %}{% if category.id == settings.featuredCategory %} featured{% endif %}"> <a href="{{ category.link }}" class="category__link--one">{{ category.name }}</a> {% if category.children %} <span class="hidden-lg category__button"> <svg class="category__button-icon icon--down"><use xlink:href="#icon-down"></use></svg> </span> <div class="category__dropdown"> <ul class="category__list--two"> {% for child in category.children %} <li class="category--{{ child.id }} category__item--two"> <a href="{{ child.link }}" class="category__link--two">{{ child.name }}</a> </li> {% if child.children %} {% for grandchild in child.children %} <li class="category--{{ grandchild.id }} category__item--three"> <a href="{{ grandchild.link }}" class="category__link--three">{{ grandchild.name }}</a> </li> {% endfor %} {% endif %} {% endfor %} </ul> O problema é que o submenu só é exibido quando eu clico no ícone do svg, eu gostaria que ao clicar na "categoria" ele não abrisse a página da categoria e sim exibisse o submenu, como posso alterar esse código? Obrigado.
-
Boas, Alguém me pode ajudar em como, ou o que poderei fazer para que este código CSS de um menu (ver no jsfiddle) possa ser aceite no blogger? É que funciona correctamente no jsfiddle, mas depois no blogger não funciona. Agradecia essa ajuda.
-
Boas, Alguém me pode ajudar em como, ou o que poderei fazer para que este código CSS de um menu (ver no jsfiddle) possa ser aceite no blogger? É que funciona correctamente no jsfiddle, mas depois no blogger não funciona. Agradecia essa ajuda.
-
Boas, Alguém me pode ajudar em como, ou o que poderei fazer para que este código CSS de um menu (ver no jsfiddle) possa ser aceite no blogger? É que funciona correctamente no jsfiddle, mas depois no blogger não funciona. Agradecia essa ajuda.
-
Boas, Alguém me pode ajudar em como, ou o que poderei fazer para que este código CSS de um menu (ver no jsfiddle) possa ser aceite no blogger? É que funciona correctamente no jsfiddle, mas depois no blogger não funciona. Agradecia essa ajuda.
-
Boas, Alguém me pode ajudar em como, ou o que poderei fazer para que este código CSS de um menu (ver no jsfiddle) possa ser aceite no blogger? É que funciona correctamente no jsfiddle, mas depois no blogger não funciona. Agradecia essa ajuda.
-
Boas, Alguém me pode ajudar em como, ou o que poderei fazer para que este código CSS de um menu (ver no jsfiddle) possa ser aceite no blogger? É que funciona correctamente no jsfiddle, mas depois no blogger não funciona. Agradecia essa ajuda.
-
css submenu de site muda após rolagem da página
Mauricio Weinert Schroer posted a topic in HTML e CSS
O menu desse site que estou desenvolvendo está com problemas na rolagem, quando no topo o submenu funciona, descendo ele desconfigura. Segue o site em página teste: weinert.com.br/apag e em anexo prints do que acontece. -
Estou desenvolvendo um site e tenho um menu que tem um submenu (um ul dentro de um li) e logo abaixo ele tem um slider. Quando eu passo o mouse para o submenu aparecer, ele fica pra baixo do slider. Eu sei que meu problema pode ser resolvido com o z-index, mas não sei exatamente como.
-
Olá, estou tentando fazer um menu horizontal no qual seus submenus ocupassem 100% do tamanho da tela como no próprio site do imasters. Por enquanto meu menu se encontra da seguinte maneira: HTML CSS Referência
.thumb.jpg.62d3082d00f160528d91e0723e7168ad.jpg)
