Hoy les mostraré como agregar de forma muy sencilla un menú hecho con HTML y CSS donde su diseño es muy simple pero a la vez elegante, aclaro que el menú no es de mi creación y sólo hice unas pequeñas modificaciones y estuvo.
Muy bien podemos incorporar este menú en nuestro blog haciendo los siguientes pasos:
1. Vamos a Diseño | Añadir gadget | HTML/JavaScritp y allí pegamos el siguiente código tal cual está:
<style>
/*------ CSS3 ---------*/
#bit-menu, #bit-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#bit-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #3A3A3A;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#bit-menu:before,
#bit-menu:after {
content: "";
display: table;
}
#bit-menu:after {
clear: both;
}
#bit-menu {
zoom:1;
}
#bit-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#bit-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#bit-menu li:hover > a {
color: #fafafa;
}
*html #bit-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#bit-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#bit-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#bit-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#bit-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#bit-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#bit-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#bit-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#bit-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#bit-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#bit-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#bit-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#bit-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#bit-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="bit-menu">
<li><a href="Tu-Url">Home</a></li> <li>
<a href="Tu-Url">Categories</a> <ul>
<li><a href="Tu-Url">CSS</a></li> <li><a href="Tu-Url">Graphic design</a></li> <li><a href="Tu-Url">Development tools</a></li> <li><a href="Tu-Url">Web design</a></li> </ul>
</li>
<li><a href="Tu-Url">Work</a></li> <li><a href="Tu-Url">About</a></li> <li><a href="Tu-Url">Contact</a></li> </ul>
Para modificar los textos del menú cambiamos las palabras en color Naranja y para poner sus respectivos links o enlaces al dar click modificamos los que dicen TU-URL que están en color rojo.
Hecho esto sólo queda guardar el trabajo realizado e ir al blog y mirar su función, aclaro que es lógico si se trata de un menú se debe agregar en los gadgets superiores arriba de las entradas en la parte de Diseño.
No hay comentarios.:
Publicar un comentario