En este tutorial vamos a enseñaros como crear un elegante menú vertical con CSS. Este tutorial es muy recomendable para principiantes, al igual que el otro sobre crear un menú horizontal.
En este tutorial veremos el efecto hover en los menús, lo que es muy bueno si deseas aprender más allá de crear un menú un poco simple. La imagen con la que ilustramos esta entrada corresponde con la previsualización del menú. Un menú sencillo a la vez que elegante creado mediante listas.
Para ello estamos usando estas dos imágenes:
Código CSS
Como podemos observar, el código CSS simplemente es aplicar estilos a unas listas. Cada lista formará un item del menú, que luego definiremos por HTML:
.main_cont
{
float:left;
width:220px;
background-color:#4d7986;
padding:10px;
}
.menu_top_bg
{
width:223px;
background:url(../grfx/menu_top_bg.gif) repeat-x;
height:22px;
padding-top:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
font-weight:bold;
text-align:center;
margin-bottom:1px;
}
.sub_menu ul
{
padding:0px;
margin:0px;
}
.sub_menu ul li
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
line-height:32px;
border-bottom:1px dotted #93bcc3;
list-style-type:none;
text-indent:8px;
}
.sub_menu ul li a
{
text-decoration:none;
color:#FFFFFF;
}
.sub_menu ul li a.selected
{
background:url(../grfx/menu_selected.gif) no-repeat;
float:left;
width:242px;
height:32px;
}
.sub_menu ul li a:hover
{
background:url(../grfx/menu_selected.gif) no-repeat;
float:left;
width:242px;
height:32px;
}
Usaremos este código para llamar al código CSS en el documento (Más información sobre esto):
<link href="css/left_menu.css" rel="stylesheet" type="text/css" />
Código HTML
Finalmente usamos el siguiente código HTML para el efecto final:
<div class="main_cont"> <div class="menu_top_bg">Navegacion</div> <div class="sub_menu"> <ul> <li><a href="#" class="selected">Tu texto 1</a></li> <li><a href="#">Tu texto 2</a></li> <li><a href="#">Tu texto 3</a></li> <li><a href="#">Tu texto 4</a></li> <li><a href="#">Tu texto 5</a></li> <li><a href="#">Tu texto 6</a></li> </ul> </div> </div>
Vía | Tutorialfeed
