-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.
Y la clase la definimos así: Se ponen valores distintos para movil @media (max-width:900px) { /*Esto es para movil*/
.botonmenu{
display: none;
}
.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:
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;
