Este menú también lo pueden ver en la parte superior del Blog, pero con otro estilo, es editable, básico y tiene lo necesario para que puedas modificar el color de fondo, letras, submenú, y más.
En este ejemplo hice un menú colorido para que puedas tener una idea más clara de que modificar en el estilo.
Menu.html
Primero empezamos creando el menú sin estilo, el 2 y 4 tendrán submenús, id VaiNavMenu, VaiNavMenux, VaiUlNav nos permitirá darle un estilo más editable, en el # puedes cambiarlo por una página.
<style> </style> <div id="VaiNavMenu" align="center"> <div id="VaiNavMenux"> <ul id="VaiUlNav"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a> <ul> <li><a href="#">SubMenu 2_1</a></li> <li><a href="#">SubMenu 2_1</a></li> <li><a href="#">SubMenu 2_1</a></li> </ul> </li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a> <ul> <li><a href="#">SubMenu 4_1</a></li> <li><a href="#">SubMenu 4_1</a></li> <li><a href="#">SubMenu 4_1</a></li> </ul> </li> <li><a href="#">Menu 5</a></li> </ul> </div> </div>
Ahora en las etiquetas <style></style> empezamos con los siguientes bloques de código, este bloque es para que el menú se ubique en forma horizontal.
#VaiUlNav li { display:inline-block; /*Permite la ubicación del menú en forma horizontal*/ }
Pueden notar que los submenús están fuera de su bloque que le corresponde, entonces usamos el siguiente bloque de código para que se oculte por un momento los submenús.
#VaiUlNav li ul /*Permite que el sub menú este dentro del menú*/ { position: absolute; /*Absolute*/ left: -300px; /*Para que se esconda el submenú*/ width: 150px; /*Ancho aproximado del submenú*/ margin: 0px; /*El sub menú no se mueva mucho arriba o abajo */ padding: 0px; /*El sub menú no se mueva mucho a la derecha o izquierda*/ }
Cuando pasemos el mouse por cada bloque del menú este mostrará los submenús que tiene bajo su mando y si quitamos el mouse los submenús estarán ocultos.
#VaiUlNav li:hover ul, ul { left:auto; /*Mostrar submenú al pasar el mouse*/ }
Este bloque nos va a permitir editar por completo la barra exterior del menú y puedes modificar el tamaño, color de fondo, bordes, etc.
#VaiNavMenu /*Barra exterior*/ { width: 100%; /*Ancho de la barra, puedes darle un tamaño exacto o dejarlo al 100% */ background:green; /*Color de fondo*/ position:relative; /*Puedes usar relative o absolute*/ border: 2px solid blue; /*Borde*/ }
Este bloque nos ayudará a fijar un tamaño, para luego editar la parte interior del menú.
#VaiNavMenux /*Bloque interior */ { width:1200px; /*Ancho del bloque, puedes darle un tamaño exacto o dejarlo al 100%*/ border: 2px solid yellow; /*Borde*/ }
Por el momento no se nota muy bien, pero eso más adelante se arregla. El siguiente bloque es para darle más color.
#VaiUlNav { background:orange; /*Color de fondo del bloque interior*/ margin: 0px; /* Dejar en 0*/ padding: 0px; /* Dejar en 0*/ }
Podemos modificar el tipo de letras, color y el tamaño de los bloques.
#VaiUlNav li a, #VaiUlNav li a:link, #VaiUlNav li a:visited { font: bold 16px Arial; /*Fuente*/ color: black; /*Color del texto */ display: block; /*Mostrar como bloques*/ margin:0px; /*Dejar en 0*/ padding: 10px 15px 10px 15px; /*Para que no se mueva el texto del menú al pasar el mouse*/ }
El siguiente bloque es para modificar el estilo del menú cuando el mouse este encima.
#VaiUlNav li a:hover, #VaiUlNav li a:active { color:red; /*Cambia el color de las letras al pasar el mouse*/ margin:0px; /*Dejar en 0*/ padding: 10px 15px 10px 15px; /*Para que no se mueva el texto del menú al pasar el mouse*/ background: white; /*Color del fondo del menú al pasar el mouse */ }
Usamos el siguiente bloque para modificar el estilo del submenú, podemos cambiar el tipo letras, color, el tamaño, etc.
#VaiUlNav li li a, #VaiUlNav li li a:link, #VaiUlNav li li a:visited { font: bold 16px Arial; /*Fuente del submenú*/ color: white; /*Color del texto del submenú*/ width: 150px; /*Ancho del submenú*/ background: black; /*Color de fondo del submenú*/ margin:0px; /*Dejar en 0*/ }
Este bloque es para modificar el estilo del submenú cuando el mouse este encima, podemos cambiar su fondo y el color de las letras.
#VaiUlNav li li a:hover, #VaiUlNav li li a:active { color: black; /*Color de fondo del submenú al pasar el mouse*/ background: white; /*Color de texto del submenú al pasar el mouse*/ }
a {text-decoration:none;} /*Quitar el subrayado del texto*/
Listo. 😁
¿Fácil o difícil?
