Publicado em 29 de set.

[CSS] Menu responsivo

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: -
nav.menu {

position:absolute. background:#4e94ab. width:70%. } HTML

-
<!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:

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

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Bergs· 29 de set.

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>