header responsivo html css
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devide-width, initial-scale=1.0">
<style>
body{ font-family: arial sans-serif; margin: 0; padding: 0; color: #333;}
.cabeza{
padding: 1rem;
background-color: #333;
display: flex;
justify-content: space-between;
align-items: center;
color: white
}
.cabeza__boton-menu{
display:none;
}
.cabeza__logo{
font-size: 3rem;
color: white;
}
.cabeza__titulo{
font-size:2.5rem;
margin: 0;
color:white;
}
.cabeza__nav{
display: block;
}
.cabeza__nav-lista{
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.cabeza__nav-elemento{
margin-left: 1.5rem;
font-size: 1.3rem;
}
/*estilos css para telefonos*/
@media( max-width:700px){
.cabeza__boton-menu{
display: block;
margin: 0;
padding: 0;
border: 0;
background: none;
color: white;
font-size: 2.5rem;
cursor: pointer;
}
.cabeza__nav{
display: none;
background-color:orange;
/*no hereda el color del contenedor por ser superpuesto, se debe explicitar un color o hacer herencia background-color: inherit;*/
position: absolute;
width:100%;
left:0;
top:60px;
margin: 0;
padding: 0;
}
.cabeza__nav-lista{
flex-direction: column;
padding: 0rem;
}
.cabeza__nav-elemento{
margin:0;
padding: 0.5rem;
}
.cabeza__nav--activado{
display: block;
}
}/*fin estilos de telefonos*/
</style>
</head>
<body>
<header class="cabeza">
<div class="cabeza__logo">*</div>
<h1 class="cabeza__titulo">Mi web</h1>
<button class="cabeza__boton-menu" id="boton-js">≡</button>
<nav class="cabeza__nav" id="nav-js">
<ul class="cabeza__nav-lista">
<li class="cabeza__nav-elemento">elemento1</li>
<li class="cabeza__nav-elemento">elemento2</li>
<li class="cabeza__nav-elemento">elemento3</li>
</ul>
</nav>
</header>
<script>
const boton = document.getElementById('boton-js');
const navegacion = document.getElementById('nav-js');
boton.addEventListener('click',
()=>{ navegacion.classList.toggle('cabeza__nav--activado'); }
);
</script>
</body>
</html>
Comentarios
Publicar un comentario