Curso HTML / CSS desde cero 9
Curso HTML / CSS desde cero 9 ¿Te apuntas aprender con Ivardev? Cursos desde 0, donde aprenderás lo imprescindible.

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