Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde, estou tentando criar um menu responsivo, onde quando aberto em tablets e smartphones ele se transformasse em um menu de tres linha (hamburguer) que abrisse para baixo. Bem até ai consegui, o problema é que meu botão de tres linhas (hamburguer) desce junto com o menu e eu queria q ele continuasse fixo no mesmo lugar.
Segue abaixo os codigos :
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
<header>
<div class="contentmenu">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Portifolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contato</a></li>
</ul>
<a href="#" class="three-line">☰</a>
<!--<span class="DBe">DanieleBe</span>-->
</nav>
<!--<div id="bloco"> Teste </div>
<div class="teste">Teste dois</div>-->
</div>
</header>
</body>
</html>CSS
* {text-decoration: none;list-style: none;
margin:0;padding: 0;}
header {width: 100%}
.contentmenu {
width:100%;
line-height: 35px;
margin:auto;
background: black;
}#bloco {background: gray;min-width: 100%;background-size: cover;text-align: center;}
.teste {width: 100%;height: 30px;background: black;text-align: center;color: #fff;}
nav {max-width: 1180px;width: 100%; height: 35px;margin:auto;}
nav ul li {float: left;}
nav ul li a {display: block;color: #fff;padding-right: 10px;padding-left:10px;}
nav ul li a:hover {background: gray;}
.three-line {
float: right;
color: gray;font-size: 30px;
display: none;
}@media screen and (max-width:768px){
nav ul {display: none;padding-top: 35px;text-align: center;}
nav ul li {float: none;background: darkgray;border-bottom: 1px solid #fff;}
.three-line {display: block;}
nav ul.menu-responsive {display: block;}
JS
$(document).ready(function() {
$('.three-line').click(function(){
$("nav ul").toggle();
});
});Desde já agradeço.
>
Seu problema é puramente css.
.contentmenu { position: relative; }
.three-line { position: absolute; top: 1px; right: 10px; }
mesmo assim o botão continua descendo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/YNc8Brs.jpg&key=c9f08dd62f8b09ebbbf2ccca4c98bf926df5ca0eac16bad73cbefc994ac35ba6" alt="YNc8Brs.jpg" />
Então você não atualizou o arquivo, ou o teu browser está com cache. =)
Impossível o botão descer se você aplicar essa regra que eu enviei. Teste novamente, troque de browser, limpe os temporários..
>
Então você não atualizou o arquivo, ou o teu browser está com cache. =)
Impossível o botão descer se você aplicar essa regra que eu enviei. Teste novamente, troque de browser, limpe os temporários..
Era isso mesmo, limpei o cache e funcionou, Obrigado .
Só mais uma coisa, quando clico no botão mostra o menu normal e talz. Mas se eu fecho ele e mudo a resolução da tela (aumento o navegador) ou menu nao aparece mais.
Mas quando clico no botao para abrir o menu, e aumento a tela sem fechar o mesmo, ai aparece normalmente.
Seu problema é puramente css.
.contentmenu { position: relative; }
.three-line { position: absolute; top: 1px; right: 10px; }