Menú vertical con css

#codigo{
background:#999;
border:solid 1px #DADADA;
padding:10px;
color:#fff;
}
#contenido{
text-align:justify;
}

Menú vertical con css

Hola amigos como están? En esta nueva entrada vamos a ver cómo crear menu vertical con css, en entradas anteriores ya aviamos tratado alguos temas parecido como menú con html y css también menú con html5 y css3 y en una entrada más antigua también vimos como hacer un menú dinámico con HTML5 y CSS3.

Ver el menú en función: Menú vertical con css

Un menú vertical se hace de una forma muy fácil si manejas css y HTML, ahora bien este pequeño mini-tutorial va dedicado a las personas que no entienden muy bien la tecnología de CSS y quieren aprender a crear un menú vertical con un estilo mucho más agradable y más profesional.

Menú vertical con css

Como te mencione antes para crear este menú vertical solo vamos a necesitar un editor, entender un poquito de CSS aunque no es obligatorio y por supuesto el interés del lector de crear dicho menú en su página web.
Si leíste nuestros mini-tutoriales anteriores sobre menú con html5 y css3 este te será sencillamente fácil de comprender de lo contrario te remito a que lo leas o le des un vistazo.

Mi primer menú vertical con css

Bueno empezando con nuestro menú vertical vamos a necesitar en esta ocasión un solo documento ya que en el vamos a introducir todo el código tanto HTML como css algo que no hicimos en los mini-tutoriales anteriores.
Menú-vertical.html

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Menu vertical con css</title>
<style>
.main_cont
{
float:left;
width:200px;
background:-moz-linear-gradient(#333 0%, #f1f1f1 100%);
padding:0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border:solid 1px #dadada;
}
.menu_top_bg
{
width:200px;
background:-moz-linear-gradient(#f90 0%, #f60 100%);
height:30px;
padding-top:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
font-weight:bold;
text-align:center;
margin-bottom:1px;
}
.sub_menu ul
{
padding:0px;
cursor:pointer;
margin:0px;
}
.sub_menu ul li
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
line-height:32px;
border-bottom:1px dotted #fff;
list-style-type:none;
text-indent:8px;
cursor:pointer;
}

.sub_menu ul li a
{
text-decoration:none;
color:#FFFFFF;
}
.sub_menu ul li
{
background:;
float:left;
width:242px;
height:32px;
}
.sub_menu ul li a:hover
{
background:-moz-linear-gradient(#f90 0%, #f60 100%);
box-shadow:0 0 15px #fff;
float:left;
width:200px;
font-size:16px;
text-shadow:0 0 10px #fff;
color:blue;
cursor:pointer;
height:32px;
}
</style>
</head>
<body>
<div class=”main_cont”>
<div class=”menu_top_bg”>Navegacion</div>
<div class=”sub_menu”>
<ul>
<li><a href=”#”>Menu vertial con css</a></li>
<li><a href=”#”>Menu vertial con css</a></li>
<li><a href=”#”>Menu vertial con css</a></li>
<li><a href=”#”>Menu vertial con css</a></li>
<li><a href=”#”>Menu vertial con css</a></li>
<li><a href=”#”>Menu vertial con css</a></li>
</ul>
</div>
</div>
</body>
</html>

Si te fijas este menú vertical tiene algunas cualidades de css3 como son sombras o resplandor al pasar el mouse por encima y también tiene colores degradado para darle un estilo mas elegante puede verlo en funcion en el siguiente enlace.

Ver el menú en función: Menú vertical con css

Comments

  1. By Anónimo

  2. By Anónimo

Deja un comentario

Tu dirección de correo electrónico no será publicada.