Ir para conteúdo

POWERED BY:

Arquivado

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

thiagosvl

[CSS] Menu responsivo

Por , em Desenvolvimento frontend

Recommended Posts

thiagosvl    1

thiagosvl
Postado

Estou tentando criar um menu responsivo - a princípio sem dropdown - e ele funciona bem, até a parte principal (pasmem haha), que é quando eu aperto na imagem - no caso um checkbox - e o menu não aparece.

Acredito que o erro esteja na seguinte linha: 

input#btn-menu:checked - nav.menu {
        margin:0;
    }

Com o código acima, ele deveria remover o width:70% que existe no código do nav,menu, que segue:

  1. nav.menu {
position:absolute;
background:#4e94ab;
width:70%;
    }

    HTML

  2. <!DOCTYPE html>
<html lang="pt-br">
<head>
<title>MENU</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum scale=1, minimum scale=1">
<link rel="stylesheet" href="menu.css">
</head>
<body>
<header>
<input type="checkbox" id="btn-menu">
<label for="btn-menu"><img src="_imagens/icone-menu.png" width="35" height="35" alt=""></label>
<nav class="menu">
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Inicio</a></li>
<li><a href="">Inicio</a></li>
<li><a href="">Inicio</a></li>
<li><a href="">Inicio</a></li>
</ul>
</nav>
</header>
</body>
</html>

    CSS:

  3. body {
margin:0;
font-family: sans-serif;
}
header {
width:100%;
background:#4e94ab;
}
input#btn-menu {
display:none;
}
header label {
display:none;
width:30px;
height:30px;
padding:10px;
border-right:1px solid #fff;
}
header label:hover {
cursor:pointer;
background:rgba(0,0,0,0.3);
}
nav.menu ul {
margin:0;
list-style-type:none;
padding:0;
display:flex;
}
nav.menu li {
border-right:1px solid #fff;
}
nav.menu li:hover {
background: rgba(0,0,0,0.3);
}
nav.menu li a {
display:block;
padding:15px 20px;
color:#fff;
text-decoration:none;
}
@[member="MEDIA"] (max-width:768px) {
header label {
display:block;
}
nav.menu {
position:absolute;
background:#4e94ab;
width:70%;
}
nav.menu ul {
flex-direction:column;
}
nav.menu li {
border-top:1px solid #FFF;
}
input#btn-menu:checked - nav.menu {
margin:0;
}
}

Obs.: Como eu faço para adicionar um dropdown nesse menu?

Conto com vocês!
obrigado,
Thiago.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

Olá Thiago,

Entendi a sua lógica de fazer o checked do CSS disparar o display block no menu, nunca tinha visto algo assim acredito que funcione sim, porém o começo de sua media querie não esta correta o certo é @media screen and (max-width: 768px) ou @media (max-width: 768px) e na parte onde você percebeu o erro o (-) hifen não faz parte das CSS por isso ele não retornou nada.

Modifiquei o seu código um pouco e adicionei um pouco de javascript para funcionar deixarei aqui para seus estudos, qualquer dúvidas quando a solução é só perguntar.

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>MENU</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum scale=1, minimum scale=1">
<style>
	body {
margin:0;
font-family: sans-serif;
}
header {
width:100%;
background:#4e94ab;
}
#btn-menu {
display:none;
}
header label {
display:none;
width:30px;
height:30px;
padding:10px;
border-right:1px solid #fff;
}
header label:hover {
cursor:pointer;
background:rgba(0,0,0,0.3);
}
nav.menu ul {
margin:0;
list-style-type:none;
padding:0;
display:flex;
}
nav.menu li {
border-right:1px solid #fff;
}
nav.menu li:hover {
background: rgba(0,0,0,0.3);
}
nav.menu li a {
display:block;
padding:15px 20px;
color:#fff;
text-decoration:none;
}
@media (max-width:768px) {
header label {
display:block;
}
nav.menu {
position:absolute;
background:#4e94ab;
width:70%;
display: none;
}
nav.menu ul {
flex-direction:column;
}
nav.menu li {
border-top:1px solid #FFF;
}
#btn-menu{
margin:0;
display: block;
}

.menu.db {display: block;}
}
</style>


</head>
<body>
<header>
<button type="button" id="btn-menu" >
<img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" width="35" height="35" alt="">
</button>
<nav class="menu" id="menu">
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Inicio</a></li>
<li><a href="">Inicio</a></li>
<li><a href="">Inicio</a></li>
<li><a href="">Inicio</a></li>
</ul>
</nav>
</header>


<script>
(function() {

	document.getElementById('btn-menu').onclick = function() {

		var verificaMenu = document.getElementById('menu').className;

		if(verificaMenu == 'menu') {
			document.getElementById('menu').className = 'menu db';
		} else {
			document.getElementById('menu').className = 'menu';
		}

		
	};


})();
</script>
</body>
</html>

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