Este tutorial asume que ya se tiene conocimientos de CSS por lo cual no dará grandes explicaciones del código.
Bueno, básicamente nuestro menú se debe de ver de la siguiente manera cuando este finalizado.
De tal modo que cuando el ratón pase por el menú principal este despliegue un sub-menú, todo usando solamente CSS.
En la siguiente imagen se puede ver como es la estructura del menú cuando no se le ha aplicado el CSS que es lo que le da formato.
Junto con el HTML:
<!DOCTYPE html>
<html>
<head>
<title>Simple menu</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/menu.css" rel="stylesheet" type="text/javascript">
</head>
<body>
<div>
<ul class="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Como se puede observar es muy sencillo y fácil, no tiene mayor complicación.
Ahora el CSS:
html, body{
margin: 0;
padding: 0;
}
div{
padding: 50px;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
a{
color: #FFF;
}
ul.menu{
position: relative;
}
ul.menu > li{
float: left;
position: relative;
padding: 5px;
background: #09F;
}
ul.menu > li:hover{
background: #396eb6;
}
ul.menu > li:hover > ul{
display: block;
}
ul.menu > li > ul{
position: absolute;
display: none;
}
ul.menu > li > ul > li{
white-space: nowrap;
padding: 5px;
background: #0000ff;
}
ul.menu > li > ul > li:hover{
background: #396eb6;
}
Para este código se esta usando ul.menu como la clase que le dará formato a todo el menú, es de fácil implementación y puede ser adaptado de forma muy fácil pueden agregarle border, colores especificos y mas.
Bueno pues copy paste y adaptenlo a sus necesidades.
No hay comentarios:
Publicar un comentario