-Vamos a crear un menú para móvil. Los estilos de móvil se aplicaran independientemente al escritorio. Metemos el menú en una capa nueva. Y un botón para mostrar el menú en móvil.
<body>
<div id="cabecera">
<div class="contenido_cabecera">
<img src="img/logo_ivardev.png">
<div class="botonmenu">
<span class="material-icons-outlined">
menu
</span>
</div>
<div class="menu">
<ul>
<!--colocamos los enlaces de menu -->
<li><a href="index.html"> <span class="material-icons">home</span> Home </a></li>
<li><a href="bio.html"> <span class="material-icons">person</span>bio </a></li>
<li><a href="contacto.html"> <span class="material-icons">email</span>Contacto </a></li>
</ul>
</div>
Y la clase la definimos así: Se ponen valores distintos para movil
.botonmenu{
display: none;
}
@media (max-width:900px) { /*Esto es para movil*/
.botonmenu{
position:absolute;
left:20px;
top:20px;
color: #58c5e0;
display: block;
}
}
Todo esto seria para ver el contenido en móvil:
.botonmenu{
display: none;
}
@media (max-width:900px) { /*Esto es para movil*/
.botonmenu{
position:absolute;
left:20px;
top:20px;
color: #58c5e0;
display: block;
}
.menu{
position: absolute;
top: 60px;
left: 20px;
background-color: aquamarine;
border: 1px solid black;
text-align: left;
display:none;
}
.menu ul{
padding: 0;
}
.menu li{
display:block !important;
}
.contenido_cabecera{
padding-bottom: 20px;
}
}
-El menú en móvil esta en principio invisible. Se tiene que ver una vez se pulse. Todo comportamiento requiere javascript.
En el código HTML incluimos el comportamiento javascript en el head:
<script>
function abrirmenu(){
menu= document.getElementById("menu_principal");
if (menu.style.display=="block"){
menu.style.display="none";
}else{
menu.style.display="block";
}
}
</script>
Para llamar ala funcion abrir menu que abre y cierra el menu hay que poner en la etiqueta del boton la llamada al comportamiento:
<div class="botonmenu" onclick="abrirmenu()">
Para cambiar el menú o cualquier clase en el caso de estar por encima con el ratón. Ponemos en el CSS que cambie de color y aparezca la mano añadiendo ele estilo con :hover
.botonmenu:hover{
color: #0f43ec;
cursor: pointer;
