Estos días he estado buscando nuevos menús elegantes para uno de mis blogs y he encontrado uno que me ha resultado muy elegante, que funciona a la perfección, tiene un código sencillo y es fácil de implementar.
Características:
· El ancho se ajusta automáticamente al espacio donde lo implementes en tu blog
· Solo CSS y HTML
· Posibilidad de incluir dos niveles de submenús
· Podemos editar el color azul principal
· Podemos editar el tamaño de la letra
· Funciona en Safari, Chrome, Firefox e Internet Explorer
CSS
Este código se implementa, si usas Blogger, arriba de "]]></b:skin>". Si usas Wordpress u otros basta con implementarlo en la hoja de estilos .css.
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset 'UTF-8';
/* Base Styles */
#cssmenu > ul,
#cssmenu > ul li,
#cssmenu > ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu > ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu > ul li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
padding: 10px;
}
#cssmenu > ul li.hover,
#cssmenu > ul li:hover {
z-index: 599;
cursor: default;
}
#cssmenu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
}
#cssmenu > ul ul li {
float: none;
}
#cssmenu > ul li:hover > ul {
visibility: visible;
}
/* Align last drop down RTL */
/* Theme Styles */
#cssmenu > ul a:link {
text-decoration: none;
}
#cssmenu > ul a:active {
color: #ffa500;
}
#cssmenu li {
padding: 0;
color: #000;
}
#cssmenu {
font-family: 'Lato', sans-serif;
width: auto;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background: #1b9bff;
font-size: 13px;
-moz-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3);
}
#cssmenu > ul {
padding: 0 5px;
-moz-box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
display: block;
float: none;
zoom: 1;
}
#cssmenu > ul:before {
content: '';
display: block;
}
#cssmenu > ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu > ul > li {
padding: 8px 5px;
}
#cssmenu > ul > li > a,
#cssmenu > ul > li > a:link,
#cssmenu > ul > li > a:visited {
text-shadow: 0 -1px 1px #004881;
color: #fff;
padding: 7px 20px;
display: block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li:hover > a {
background-color: #0082e7;
}
#cssmenu li li a {
color: #8b8b8b;
font-size: 13px;
}
#cssmenu li li a:hover {
color: #5c5c5c;
border-color: #5c5c5c;
}
#cssmenu ul ul {
margin: 0 10px;
padding: 0 10px;
float: none;
background: #efefef;
border: 2px solid #1b9bff;
border-top: none;
right: 0;
left: 0;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-ms-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
#cssmenu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
#cssmenu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#cssmenu ul > li > ul > li.has-sub > a:before {
content: '';
position: absolute;
top: 18px;
right: 6px;
border: 5px solid transparent;
border-top: 5px solid #8b8b8b;
}
#cssmenu ul > li > ul > li.has-sub > a:hover:before {
border-top: 5px solid #5c5c5c;
}
#cssmenu ul ul ul {
width: 200px;
top: 100%;
border: 2px solid #1b9bff;
}
#cssmenu ul ul ul li {
float: none;
}
Ahora pasaremos a una breve explicación del código: en las primeras dos líneas hemos implementado la fuente de letra que vamos a usar, después hemos indicado que no queremos estilos de lista (para que no salgan los puntos al lado) y hemos dejado márgenes y padding a cero. Con border-radius hemos colocado bordes, y con :hover hemos establecido los estilos diferentes del menú para cuando el ratón está sobre un botón.
HTML
Si usas Blogger este código se añade en Diseño -> Añadir gadget -> HTML/Javascript.
Si usas Wordpress lo mismo, pero en un gadget de texto.
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Aquí hemos dicho al principio que usaremos los estilos del div "cssmenú" que es el primer código que hemos visto. Posteriormente con las etiquetas <li> y <ul> hemos creado la lista del menú, las cuales tienen un enlace y un texto.
MODIFICAR SIN PROGRAMAR
Como si sabes programar como si no, te dejo este enlace para que puedas editar a tu gusto el menú. Solo tienes que tocar en la barra izquierda el menú y mover los bloques, editar su texto (Title) y enlaces (Link).
Y eso es todo amigos. ¡Nos leemos en la siguiente noticia!
Y eso es todo amigos. ¡Nos leemos en la siguiente noticia!
Publicar un comentario
Bienvenido al sistema de comentarios de Campamento Web. Todos los comentarios serán respondidos lo más brevemente posible. Por favor, no incluyas publicidad de sitios web o productos ni palabras ofensivas. ¡Gracias por comentar!