-
Similar Content
-
.thumb.jpg.62d3082d00f160528d91e0723e7168ad.jpg)
By Sherlock02
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>
-
By Sapinn
Opa galera tudo beleza? Então criei um layout de um dashboard com css grid e eu gostaria de fixar o menu lateral na esquerda e a barra que está em cima e quando eu rolasse para baixo a unica coisa que mexesse fosse o conteúdo da direita. Já tentei usar o position fixed mas ele quebra a página, tentei usar o position: sticky mas ele não funciona. Alguém sabe como resolver isso ?
-
By AlexandrePrezzi
Preciso de uma ajuda....
Tenho um código que gera um botao dropdown e dentro dele gera um segundo nivel....
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } </style> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Segundo <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Primeiro <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">3nd level dropdown</a></li> <li><a tabindex="-1" href="#">4nd level dropdown</a></li> </ul> </li> </ul> </div> </div> <script> $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> </body> </html> o que acontece
Se eu clico em "Primeiro" abre um menu de subitens ao lado .... quando eu clico de novo ele fecha (ate ai ok)
Mas supondo que eu clique em "Primeiro" (abre ao lado) ... mas sem clicar pra fechar eu clico em "Segundo" (abre o submenu ao lado mas sem fechar o primeiro).
e isso acaba deixando empilhado..
Gostaria q quando tu clica em Segundo (caso o primeiro esteja expandido ele feche) e vice-versa.
Na imagem coloquei o q esta acontecendo.....
-
By Sapinn
Tenha um menu hamburguer que abre a esquerda mas eu gostaria que ele abrisse a direita(O menu ficaria retrátil a direita ) para meu site se adequar a responsividade
codigo do menu que fica a esquerda
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu vertical reponsivo com html e css</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<style>
*{
margin:0;
padding:0;
}
.menuMobileVertical a{
text-decoration:none;
color:white;
display:block;
padding:20px 5px;
}
.menuMobileVertical a:hover{
background:rgba(176,224,230);
color:black;
}
body{
font-family:arial;
}
input[type="checkbox"]:checked ~ nav{
transform: translateX(350px);
}
.menuMobileVertical ul{
list-style:none;
position:absolute;
top:70px;
width:100%;
}
.icone-menu{
font-size:40px;
}
input[type="checkbox"]{
display:none;
}
.menuMobileVertical{
background:rgba(16,16,16,.5);
width: 350px;
height: 100vh;
left:-350px;
position: absolute;
transition:all 0.5s;
}
label{
padding:15px;
position:absolute;
z-index:1;
}
</style>
</head>
<body>
<div class="menuMobile">
<input type="checkbox" id="check">
<label for="check"><i class="bi bi-list icone-menu"></i></label>
<nav class="menuMobileVertical">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">LOGIN</a></li>
<li><a href="">ALUNO</a></li>
<li><a href="">PROFESSOR</a></li>
<li><a href="">CONTATO</a></li>
</ul>
</nav>
</div>
</body>
</html>
-
By Sapinn
Fala galera blz? Então preciso de ajuda numa coisa aqui que não sei de jeito nenhum como resolver.
Eu encontrei na W3School um menu tab vertical perfeito para minha página que é one page. Segui o link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs
Mas estou me encontrando com um problema! Eu gostaria que esse menu permanece-se na mesma tag mesmo atualizando a página, por exemplo, se eu escolher a segunda opção do menu
ela permanecerá ativada mesmo se eu atualizar a página. Na opção oferecida pela W3Shool, toda vez que a página é atualizada ele volta para a primeira tag que tem por padrão a primeira opção com um active. Não sei como resolver ou se tem uma solução para algo assim mas se alguém puder me ajudar eu agradeceria muito.
-
