Bueno seguimos con los menu pero en esta ocacion lo que haremos es un menu desplegable de daremos color algo vistuso para que lo utilizen en su blog o sus practicas.
Este codigo es bastante sencillo pero practico, si tienes poco conocimiento podras adaptarlo a tus necesidades.
Cuando estes realizando un menu ya sea para tu blog o un cliente ten en cuenta como esta estructurada la web y poco a poco van saliendo los enlaces pero algo mas importante es el estilo que le daras al menu y la combinacion de colores.
Esta ves pegare el codigo y te lo ire explicando paso a paso para que le entiendas que significa o quiere decir cada linea de codigo.
Al momento de que vos lo pegues en tu editor tendras que quitarle los comentarios que he realizado.
La estructura que ves es la que esta actualmente que es la de html5 y se distingen de las siguiente manera el doctype ya no esta cargado como antes y e tipo de lenguaje del sitio se lo asignamos con la etiqueta lang.
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<html lang="es">
<head>
<meta charset="UTF-8">
Lo que es el title y el llamado del archivo css es siempre el mismo. igual que el llamado de los archivos js todo esto lo hacemos antes del etiqueta </head>
<title>Menu desplegable</title>
<link rel="stylesheet" href="estilo5.css">
</head>
<body>
<title>Menu desplegable</title>
<link rel="stylesheet" href="estilo5.css">
</head>
<body>
Creamos un etiqueta nav para indicar que es un menu el que vamos a realizar
agregamos las lista desordenas al ul le asignamos una clase llamda hmenu y a los sub menus le agregamos otra clase llamada submenu.
Siempre que creen las clases y los ID haganlo con nombres bastantes sencillo y descriptivos par que no tenga ningun lio a la hora de llamarlas.
<nav>
<ul id="hmenu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a>
<ul class="submenu">
<li><a href="#">Diseño web</a></li>
<li><a href="#">Mantenimiento</a></li>
<li><a href="#">Programacion</a></li>
</ul>
</li>
<li><a href="#">Portafolio</a>
<ul class="submenu">
<li><a href="#">Diseño web</a></li>
<li><a href="#">Mantenimiento</a></li>
<li><a href="#">Programacion</a></li>
</ul>
</li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Contactar</a></li>
</ul>
</nav>
</body>
</html>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a>
<ul class="submenu">
<li><a href="#">Diseño web</a></li>
<li><a href="#">Mantenimiento</a></li>
<li><a href="#">Programacion</a></li>
</ul>
</li>
<li><a href="#">Portafolio</a>
<ul class="submenu">
<li><a href="#">Diseño web</a></li>
<li><a href="#">Mantenimiento</a></li>
<li><a href="#">Programacion</a></li>
</ul>
</li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Contactar</a></li>
</ul>
</nav>
</body>
</html>
CSS
Le asignamos al body un tipo de letra verdana con tamaño de 15px
body
{
font-family: verdana;
font-size: 15px;
}
Todos los ul que esten dentro de la etiqueta nav van a tener lo siguiente un color azul que le quite los padding o mejor dicho que los deje en 0 y que por ultimo le quite la decoracion o estilo que tiene por defecto que son las puntitos.
nav ul
{
background: #06AFE4;
padding: 0;
list-style:none;
}
Este codigo se interprete de la siguiente manera que cualquier elemento li que
sea hijo directo de un elemento o clase o ID en esta ocuacion la clase hmenu agregale un display: inline-block lo que quiere decir que los posiciones en forma horizontal o los desplaze hacia la izquierda y de esta manera evitamos ocupar el float:left.
#hmenu > li
{
display: inline-block;
}
Covierte los enlaces en bloque y le dice que desplazacete internamente 10px arriba y abjo y tambien 5px hacia la izquierda y la derecha dameles un tamaño de 90px
#hmenu > li > a
{
display:block;
padding:10px 5px;
margin: 0 20px;
width: 90;
}
Este codigo no lleva lo que el signo > (mayor que) por que se interpreta de la siguiente manera que todo ul que este dentro de un li que su posicion sea absoluta y que su display no tenga. de esta manera quedaria oculto los submenu
li ul
{
position:absolute;
display:none;
}
Que todos los enlaces que esten dentro de la clase submenu tengan un display block y un padding de arriba y abajo de 10px y derecha e izquierda de 5px pero con la diferencia del codigo anterior que se parece a este tendra un tamaño de 130px
.submenu a
{
display:block;
padding:10px 5px;
width:130px;
}
Cuando uno pase el mouse mostrara la clase submenu
li:hover ul
{
display: block;
}
Aquel ul que este dentro de un li y asu ves este dentro de una etiqueta nav agregale un fondo color plomo o crema o plateado usted le cambian el color de su preferencia.
nav li ul
{
background: #ccc;
}
Al ID hmenu o mejor dicho el ul con el ID hmenu dale un tamaño de 620px yo le agrege ese tamaño para que alcanzara todos los enlaces el margin 0 auto hace que se centro.
#hmenu
{
width: 620px;
margin:0 auto;
}
Todos los enlaces dentro de ID hmenu agregale un color para el texto blanco y quitale cualquier decoracion que tenga esto se refieres que le quite el interlineado que tienen los enlaces y ponelo en negrita eso es el bold.
#hmenu a
{
color: #fff;
text-decoration: none;
font-weight: bold;
}
Y por ultimo cuando pases el mouse por aquellos li que esten dentro del ID hmenu agregale el color de fondo como anaranjado y al texto una sombra
#hmenu li:hover
{
background: #FF6600;
text-shadow: 0 0 2px #000;
}
.
ResponderEliminar