Menú desplegables con css profesional

Menú desplegables con css profesional

Hola amigos ya sé que hemos tocado este tema de menú desplegables en css pero en esta entrada lo que vamos hacer es una actualización del post anterior de nuestro menú desplegables en css.
Darle un vistazo al tema anterior

Tema anterior

En este menu desplegable con css lo único que vamos a necesitar para este menú son 2 archivos 1 que contendrá el código HTML de nuestro menú desplegable y otro que contendrá el código css que le dará un estilo agradable a dicho menú.

Creando mi primer menú desplegables con css

Lo Primero que vamos a crear para nuestro menu desplegable es un archivo HTML donde vamos a crear un div que contendrá nuestras listas a las cuales le vamos a dar estilo para que hagan lo que queremos conseguir.

Primero colocamos el archivo con el código HTML

<!DOCTYPE html>
<html lang="es">
<meta charset="utf-8" />
<title>Menu desplegables con css Profesional</title>
<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<h1>Menu desplegables con css profesional</h1>
<div id='comocrearmiweb'>
<ul>
<li class='active'><a href='../index.html'><span>Home</span></a></li>
<li class='sup-menu'><a href='#'><span>Producto</span></a>
<ul>
<li><a href='#'><span>Producto 1</span></a></li>
<li class='last'><a href='#'><span>Producto 2</span></a></li>
</ul>
</li>
<li class='sup-menu'><a href='#'><span>Usuarios</span></a>
<ul>
<li><a href='#'><span>Perfil</span></a></li>
<li class='last'><a href='#'><span>Amigos</span></a></li>
</ul>
</li>
<li><a href='#'><span>Compartir</span></a></li>
<li class='last'><a href='#'><span>Contactanos </span></a></li>
</ul>
</div>
</body>
</html>

Terminando de crear nuestro menú

Ahora para terminar nuestro menú colocamos el archivo style.css que contiene todo el código css que modelara nuestro menú.

#comocrearmiweb{
height:37px;
display:block;
padding:0;
margin:20px auto;
border:1px solid;
border-radius:5px;
}
#comocrearmiweb > ul {
list-style:inside none;
padding:0; margin:0;
}
#comocrearmiweb > ul > li {
list-style:inside none;
padding:0;
margin:0;
float:left;
display:block;
position:relative;
}
#comocrearmiweb > ul > li > a{
outline:none;
display:block;
position:relative;
padding:12px 20px;
font:bold 13px/100% Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}
#comocrearmiweb > ul > li:first-child > a{
border-radius:5px 0 0 5px;
}
#comocrearmiweb > ul > li > a:after{
content:'';
position:absolute;
border-right:1px solid;
top:-1px;
bottom:-1px;
right:-2px;
z-index:99;
}
#comocrearmiweb ul li.sup-menu:hover > a:after{
top:0; bottom:0;
}
#comocrearmiweb > ul > li.sup-menu > a:before{
content:'';
position:absolute;
top:18px;
right:6px;
border:5px solid transparent;
border-top:5px solid #fff;
}
#comocrearmiweb > ul > li.sup-menu:hover > a:before{
top:19px;
}
#comocrearmiweb ul li.sup-menu:hover > a{
background:#3f3f3f;
border-color:#3f3f3f;
padding-bottom:13px;
padding-top:13px;
top:-1px;
z-index:999;
}
#comocrearmiweb ul li.sup-menu:hover > ul, #comocrearmiweb ul li.sup-menu:hover > div{
display:block;
}
#comocrearmiweb ul li.sup-menu > a:hover{
background:#3f3f3f;
border-color:#3f3f3f;
}
#comocrearmiweb ul li > ul, #comocrearmiweb ul li > div{
display:none; width:auto;
position:absolute;
top:38px; padding:10px 0;
background:#3f3f3f;
border-radius:0 0 5px 5px;
z-index:999;
}
#comocrearmiweb ul li > ul{
width:200px;
}
#comocrearmiweb ul li > ul li{
display:block;
list-style:inside none;
padding:0;
margin:0;
position:relative;
}
#comocrearmiweb ul li > ul li a{
outline:none;
display:block;
position:relative;
margin:0;
padding:8px 20px;
font:10pt Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}
#comocrearmiweb, #comocrearmiweb > ul > li > ul > li a:hover{
background:#bf4143;
background:-moz-linear-gradient(top,  #bf4143 0%, #a13742 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#bf4143), color-stop(100%,#a13742));
background:-webkit-linear-gradient(top,  #bf4143 0%,#a13742 100%);
background:-o-linear-gradient(top,  #bf4143 0%,#a13742 100%);
background:-ms-linear-gradient(top,  #bf4143 0%,#a13742 100%);
background:linear-gradient(top,  #bf4143 0%,#a13742 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf4143', endColorstr='#a13742',GradientType=0 );
}
#comocrearmiweb{
border-color:#712730;
}
#comocrearmiweb > ul > li > a{
border-right:1px solid #712730;
color:#fff;
}
#comocrearmiweb > ul > li > a:after{
border-color:#f0696c;
}
#comocrearmiweb > ul > li > a:hover{
background:#8f2f34;
}

Bueno esto es todo solo tienen que probar cambiandole el color agregando nuevos sub-menu y probar y probar pueden ver dicho menu en el siguiente linek y no olviden si quieres que hagamos algo que estas buscando y no sabes como hacerlo para tu web entonces solo tienes que dentrar aqui y pedir tu entrada.

Ver los resultados en el link de mas abajo

Menú desplegables en css

 

Comments

  1. By Anónimo

  2. By Anónimo

Deja un comentario

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