Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

emilyoly

Menu responsivo (mostrar e ocultar)

Por , em Desenvolvimento frontend

Recommended Posts

emilyoly    1

emilyoly
Postado

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;
}
.DBe {float: left;margin-left: 10px;display: none;color: #fff;font-size: 20px;}

@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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Seu problema é puramente css.

 

.contentmenu { position: relative; }
.three-line { position: absolute; top: 1px; right: 10px; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

emilyoly    1

emilyoly
Postado

Seu problema é puramente css.

 

.contentmenu { position: relative; }
.three-line { position: absolute; top: 1px; right: 10px; }

 

mesmo assim o botão continua descendo:

YNc8Brs.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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..

Compartilhar este post

Link para o post
Compartilhar em outros sites

emilyoly    1

emilyoly
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito