Menú "responsive", horizontal y vertical con listas y CSS
El menú horizontal se convierte en vertical cuando lo vemos desde un móvil
Vamos a hacer un menú horizontal partiendo de una lista. Al final, el mismo menú horizontal se convertirá en un menú vertical cuando lo veamos desde un móvil, consiguiendo un diseño de menú "responsive".
No te asustes si por aquí abajo ves elementos que están pegados e incluso se montan unos encima de otros, forma parte de la explicación y lo vamos a ir resolviendo. Para ver el resultado final, ves hasta abajo del todo, y si te gusta, vuelve a subir hasta aquí.
Al parecer, San Google tiene en cuenta los elementos de lista (<ol> <ul> <li>) para su "SEO". Le da más importancia a su contenido que si se tratara de párrafos o saltos de línea.
Pero las listas, por defecto, tienen un aspecto poco agradable:
Así que tenemos que formatearlas tirando de CSS para adaptarlas a nuestros gustos y nuestros propósitos.
Le quitamos los símbolos que hay delante de cada elemento, y le quitamos margin y padding <ul style="list-style-type: none; margin: 0px; padding: 0px;">
Si queremos que el menú sea horizontal, en cada <li> añadimos : <li style="float: left;">
No debemos olvidarnos de añadir después de la lista un elemento que rompa el float: left, con clear: both: <p style="clear: both;"></p>
Ahora vamos a separar un poco las partes de nuestro menú. Esto lo haremos en cada <a> con <a href="loquesea.htm" style="margin: 5px; padding: 15px;">.
También le podemos dar un borde border: 1px solid #1A1A1A;.
Y un color de fondo background-color: #B3B3B3;.
Llegados a este punto, es fácil que tengamos que retocar el margin: 0px; que establecimos al inicio. En el siguiente ejemplo, lo hemos cambiado por un margen superior e inferior de 20px (margin: 20px 0px;).
Le podemos quitar el subrayado del enlace, cambiar el color típico y aumentar el tamaño de la fuente: text-decoration: none; color: #333; font-size: 110%;
Y si le añadimos un display: block; nuestro menú no se apelotonará cuando ocupe más de una línea. Puedes probarlo haciendo más estrecha la ventana del navegador.
Con todo lo anterior, tendremos un churro de este calibre:
<ul style="list-style-type: none; margin: 20px 0px; padding: 0px;">
<li style="float: left;">
<a href="#" style="margin: 5px; padding: 15px; border: 1px solid #1A1A1A; background-color: #B3B3B3;
text-decoration: none; color: #333; font-size: 110%; display: block;">Inicio</a></li>
<li style="float: left;">
<a href="#" style="margin: 5px; padding: 15px; border: 1px solid #1A1A1A; background-color: #B3B3B3;
text-decoration: none; color: #333; font-size: 110%; display: block;">Página 3</a></li>
<li style="float: left;">
<a href="#" style="margin: 5px; padding: 15px; border: 1px solid #1A1A1A; background-color: #B3B3B3;
text-decoration: none; color: #333; font-size: 110%; display: block;">Página 5</a></li>
<li style="float: left;">
<a href="#" style="margin: 5px; padding: 15px; border: 1px solid #1A1A1A; background-color: #B3B3B3;
text-decoration: none; color: #333; font-size: 110%; display: block;">Página 7</a></li>
<li style="float: left;">
<a href="#" style="margin: 5px; padding: 15px; border: 1px solid #1A1A1A; background-color: #B3B3B3;
text-decoration: none; color: #333; font-size: 110%; display: block;">Contacto</a></li>
</ul>
<p style="clear: both;"></p>
Así que, lógicamente, tendremos que simplificarlo definiendo los estilos CSS:
ul#menu {
list-style-type: none;
margin: 20px 0px;
padding: 0px;
}
ul#menu li {
float: left;
}
ul#menu li {
display: block;
margin: 5px;
padding: 15px;
border: 1px solid #1A1A1A;
background-color: #B3B3B3;
text-decoration: none;
color: #333;
font-size: 110%;
}
Y cambiando el código HTML:
<ul id="menu"> <li><a href="#">Inicio</a></li> <li><a href="#">Página 3</a></li> <li><a href="#">Página 5</a></li> <li><a href="#">Página 7</a></li> <li><a href="#">Contacto</a></li> </ul> <p style="clear: both;"></p>
Con el mismo resultado.
Pero si además queremos que este menú horizontal se transforme en vertical en pantallas estrechas (móviles), podemos añadir esto al CSS:
@media (max-width: 400px) {
ul#menu li {
float: none;
width: 100%;
text-align: center;
font-size: 130%;
}
}
Explicación: cuando el ancho de la pantalla sea menor de 400px, los elementos de la lista no flotan, tienen un ancho del 100%, se centra el texto y se hace más grande.
Pruébalo haciendo más estrecha la ventana poco a poco.
Y ya está, con esto creo que tienes una buena base para personalizar tus menús, y además, al gusto de San Google.