Mostrando entradas con la etiqueta Menus. Mostrar todas las entradas

Menu horizontal 'San Valentin'

Con motivo de estas fechas enamoradizas de San Valentin, os presento este idilico menu para vuestro blog o web. Como podeis obsevar, cada enlace lleva su corazoncito correspondiente. Ademas, cuenta con animacion, al situar el cursor sobre un enlace aparece una flechita que atraviesa el corazon, como si de Cupido se tratase. Esta realizado integramente con CSS3, utilizando tambien una pequeña imagen 'sprite'. Si te gusta y quieres ponerlo en tu pagina, copia el codigo de abajo y añadelo donde quieras mostrarlo. Escribe tus direcciones urls y los nombres de los enlaces donde esta indicado en color naranja. Si quieres poner mas enlaces, añade la linea <a href="URL">NOMBRE ENLACE</a> mas veces, por el contrario si quieres poner menos, elimina lineas.

Enlace Enlace Enlace Enlace

ver codigo del menu

<div class="menucorazon cor"><a href="URL">NOMBRE ENLACE</a><a href="URL">NOMBRE ENLACE</a><a href="URL">NOMBRE ENLACE</a>
<a href="URL">NOMBRE ENLACE</a><div class="efecto"></div></div>

<link href='http://fonts.googleapis.com/css?family=Unica+One' rel='stylesheet' type='text/css'> <style>
.cor {
text-align: center;
overflow: hidden;
margin: 1em auto;
width:;
position: relative; }
.cor a {
    display: block;font-family: "Unica One";font-size:25px;
    position: relative;
float: left;
padding: 1em 0 2em;
    width: 25%;
text-decoration: none;
   color: #393939 !important;
   -webkit-transition: .7s;
   -moz-transition: .7s;
   -o-transition: .7s;
   -ms-transition: .7s;
   transition: .7s; }
   .nav a:hover {
     color: #c6342e; }
.efecto {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }

.cor a:nth-child(1):hover ~ .efecto {
   left: 12.5%; }
.cor a:nth-child(2):hover ~ .efecto {
   left: 37.5%; }
.cor a:nth-child(3):hover ~ .efecto {
   left: 62.5%; }
.cor a:nth-child(4):hover ~ .efecto {
   left: 87.5%; }
.menucorazon .efecto, .menucorazon a:after, .menucorazon a:before {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-heFpoFDkwf7bt2WurONK05xfSkqZ582pY4A47s_5bUesTVBSe7FrmF9uasvNW9Sq7GO1u22WHAYCUL3xp0dQYeCNekKCs1RIn5R21_EVuNp_EQ7wbjXOpLvFGFrBvof-sWRQMl2xW4/s84/heart.png') no-repeat; }
.menucorazon .efecto {
position: absolute;
bottom: 26px;
background-position: 0 0;
height: 8px;
width: 62px;
margin-left:-31px;

}

.menucorazon a:hover {color:#C6342E !important;}

.menucorazon a:before {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 20px;
background-position: -62px 0;
height: 20px;
width: 11px;
margin-left: -11px; }

.menucorazon a:after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 20px;
z-index: 1;
background-position: -73px 0;
height: 20px;
width: 11px; }
</style>

leer articulo ➨

Menu vertical con hover zoom-out

2 comentaron

Las posibilidades del CSS3 nos permiten hoy en dia hacer diseños sin utilizar ningun tipo de imagen y javascript. Es el caso del menu que os presento hoy, y que lo he realizado integramente a base de codigo de estilos. Como podeis ver, tiene un diseño elegante que se adapta a cualquier plantilla, efecto zoom-out al pasar el raton y es ideal para colocarlo en la sidebar de nuestro blog. Para añadirlo a vuestra pagina, tan solo teneis que copiar el codigo de abajo y pegarlo donde querais mostrarlo. Sustituid lo que esta escrito en color rojo por las urls y el texto que quereis poner. Si quereis añadir mas enlaces, poneis la linea <li><a href="DIRECCION URL">TEXTO ENLACE</a></li> tantas veces como deseeis.

ENLACE 1
ENLACE 2
ENLACE 3
ENLACE 4
ENLACE 5

CODIGO:

<center>
<div class="menuzoomout">
<ul>
  <li><a href="DIRECCION URL">TEXTO ENLACE</a></li>
  <li><a href="DIRECCION URL">TEXTO ENLACE</a></li>
  <li><a href="DIRECCION URL">TEXTO ENLACE</a></li>
  <li><a href="DIRECCION URL">TEXTO ENLACE</a></li>
  <li><a href="DIRECCION URL">TEXTO ENLACE</a></li>
</ul>
</center></div>

<style>
.menuzoomout ul {
  width: 100%;
  margin: 15px 10px;
  padding: 10px;
  list-style: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
background: #cccccc;
background: -moz-linear-gradient(left,  #cccccc 0%, #e8e8e8 29%, #cccccc 43%, #e8e8e8 65%, #cccccc 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cccccc), color-stop(29%,#e8e8e8), color-stop(43%,#cccccc), color-stop(65%,#e8e8e8), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(left,  #cccccc 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#cccccc 100%);
background: -o-linear-gradient(left,  #cccccc 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#cccccc 100%);
background: -ms-linear-gradient(left,  #cccccc 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#cccccc 100%);
background: linear-gradient(to right,  #cccccc 0%,#e8e8e8 29%,#cccccc 43%,#e8e8e8 65%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 );

}
.menuzoomout ul li {
  margin: 5px auto;
  padding: 5px;border:2px solid #cdcdcd;
  cursor: pointer;color:#575757;
  font-family: century gothic;font-weight: bold;
  font-size: 25px;
  line-height: 30px;
  -webkit-transition: 200ms all;
  -moz-transition: 200ms all;
  -o-transition: 200ms all;
  transition: 200ms all;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
text-shadow: -1px 0 #cdcdcd, 0 1px #cdcdcd, 1px 0 #cdcdcd, 0 -1px #cdcdcd, -1px 1px 2px #cdcdcd;
background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );

-webkit-box-shadow: 0px 1px 9px rgba(50, 50, 50, 0.75);-moz-box-shadow:    0px 1px 9px rgba(50, 50, 50, 0.75);box-shadow:         0px 1px 9px rgba(50, 50, 50, 0.75);
}
.menuzoomout ul li:first-of-type {
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
}
.menuzoomout ul li:last-of-type {
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.menuzoomout ul li:hover {
  padding-left: 20px;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.menuzoomout ul li a {color:#575757 !important;}
  </style>

leer articulo ➨

Menu social vertical

comentar

El menu que os propongo en esta ocasion no es para enlazar las secciones de vuestro blog o web, es para enlazar vuestras cuentas en las redes sociales. Como podeis ver, esta realizado con CSS3 y cuenta con 5 botones con los colores caracteristicos de cada red para conectar con vuestro Twitter, Google+, Facebook, Youtube y Feed RSS. Esta diseñado esencialmente para ponerlo en la sidebar y se ajusta al tamaño de esta automaticamente. Para añadirlo en vuestro blog o web, tan solo teneis que copiar el codigo de abajo y pegarlo donde querais mostrarlo. Recordad que teneis que poner las urls de vuestras cuentas y la de vuestro feed donde esta indicado.

leer articulo ➨

Menu horizontal con submenus efecto balanceo

10 comentaron

Si buscas un menu para tu blog o web que quede bien, contenga animaciones y subenlaces, este te gustara. Como lo he realizado integramente con CSS3, no contiene ninguna imagen ni Javascript, por lo que su tiempo de carga no se notara apenas en tu pagina. Gracias a las animaciones que se pueden hacer con los estilos hoy en dia, se consigue este efecto balanceo o 'columpio' cuando aparecen los submenus.

Para ponerlo en tu blog o web, tan solo copia este codigo y pegalo donde quieras mostrar el menu. Sustituye las almohadillas (#) por las urls que desees y donde pone enlace y subenlace por los textos que creas conveniente.

Ver/Ocultar Codigo

leer articulo ➨

Menu vertical desplegable

1 comentó

Cada vez se pueden hacer mas maravillas con el CSS3, es cuestion de experimentar e ir probando, sobre todo a l@s que les guste el diseño web como a mi. En esta ocasion, he diseñado este menu vertical en el que solo se ve una pestaña, pero que al posar el cursor sobre ella, se despliega como si fuera de papel. Para realizar estos efectos, he utilizado las propiedades 'perspective', 'transform' y 'linear-gradient', entre otras. Esta confeccionado integramente con CSS3, quitando de los pequeños iconos que son imagenes en formato png transparente. El resultado es un menu original y visualmente atractivo, como podeis ver.

Para ponerlo en vuestro blog o web, tan solo teneis que copiar el siguiente codigo y ponerlo en un gadget HTML. Modificais lo siguiente para adaptarlo a lo que querais enlazar a vuestro gusto: Lo que esta en color rojo son las direcciones (urls), lo que esta en color verde es el texto de los enlaces y lo que esta en color violeta son las urls de las imagenes de los iconos.

<div class="menudesplegable"><a class="main">Menu</a><div class="sub first"><img src="http://png-4.findicons.com/files/icons/1254/flurry_system/32/home.png"><a href="http://redeando.blogspot.com"><p><span>Inicio</span></a></p><div class="sub even"><img src="http://png-5.findicons.com/files/icons/2352/frankfurt/32/contact.png"><a href="http://redeando.blogspot.com/p/contacto_1.html"><p><span>Contacto</span></a></p><div class="sub odd">
<img alt="" src="http://png-4.findicons.com/files/icons/653/the_spherical/32/web.png"><a href="http://redeando.blogspot.com/p/webs-amigas.html"><p><span>Webs Amigas</span></a></p><div class="sub even">
<img alt="" src="http://png-4.findicons.com/files/icons/1588/farm_fresh_web/32/layout_content.png"><a href="http://redeando.blogspot.com/p/contenido.html"><p><span>Contenido</span></a></p><div class="sub odd last">
<img alt="" src="http://png-5.findicons.com/files/icons/753/gnome_desktop/32/gnome_emblem_photos.png"><a href="http://redeando.blogspot.com/p/banners_5.html"><p><span>Banners</span></a></p></div></div></div></div></div></div>

<style type="text/css">

.menudesplegable {width:250px; height:35px; margin:0 auto 450px auto; position:relative; z-index:100;
-webkit-perspective:400px;
-moz-perspective:400px;
perspective:400px;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

.menudesplegable div {position:absolute; padding:10px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
top:100%; left:0; width:230px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}

.menudesplegable .odd {background:#ddd;
-moz-transform:rotateX(-180deg);
-webkit-transform:rotateX(-180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .even {background:#eee;
-moz-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.menudesplegable .first {background:#ddd;
-moz-transform:rotateX(-100deg);
-webkit-transform:rotateX(-100deg);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.menudesplegable .last {box-shadow:0 15px 10px -10px rgba(0,0,0,0.3); border-radius: 0 0 10px 10px;}
.menudesplegable:hover .sub {
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
}

.menudesplegable .sub img {display:block;float:left; padding:0 10px 10px 0;}
.menudesplegable .sub p {font: normal 15px , sans-serif; color:#000 !important; padding:0; margin:0;}
.menudesplegable .sub p span {display:block; font: bold 22px century gothic, sans-serif; color:#ea0 !important;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000;}
.menudesplegable .sub p a {text-decoration:none;font: normal 12px/15px arial, sans-serif; color:#09c !important;}
.menudesplegable .sub p a:hover {text-decoration:none;}
.menudesplegable a.main {display:block; font: bold 30px century gothic, sans-serif;text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, -1px 1px 2px #000000; text-align:center; text-decoration:none;cursor:pointer; color:#F2F2F2 !important; border-radius:10px 10px 0 0; position:relative; z-index:100;border:2px solid #000000;
background-image: linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -o-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -moz-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -webkit-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);
background-image: -ms-linear-gradient(bottom, rgb(0,102,153) 16%, rgb(0,0,0) 58%);

background-image: -webkit-gradient(
   linear,
   left bottom,
   left top,
   color-stop(0.16, rgb(0,102,153)),
   color-stop(0.58, rgb(0,0,0))
);
}
.menudesplegable a.main:hover {opacity:0.7;}
</style>

leer articulo ➨

Menu vertical Blur

comentar

Acabo de diseñar este original menu de navegacion vertical con un poco de codigo CSS3 y una imagen de fondo, ideal para ponerlo en la sidebar o barra lateral de un blog. Lo he llamado asi (Blur), porque como vereis, los enlaces tienen un efecto desenfocado. Al pasar el cursor sobre ellos, aparecen nitidos, con el texto 'iluminado' en un borde amarillo y se desplazan ligeramente a la derecha.

Inicio
Diseño
Recursos
Foro
Blog
Contacto

Para ponerlo en tu blog, copia el siguiente codigo y añadelo en un gadget HTML. No te preocupes por el tamaño, ya que se adapta automaticamente a la anchura de tu sidebar. Sustituye lo que esta escrito en rojo por la direccion url de los enlaces y el texto que le quieras poner a cada uno. Si quieres añadir o quitar enlaces, basta con poner la linea <li><a href="URL">TEXTO</a></li> o quitarla tantas veces como quieras.

<div id="fondomenublur">
<div style="font-family:century gothic;font-size:30px;color:#cdcdcd;text-align:center;font-style: normal;border-bottom:4px solid #cdcdcd;">Menu</div>
<ul class="menublur"><br/>

<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>
<li><a href="URL">TEXTO</a></li>

</ul>

<br/></div>

<style>
#fondomenublur {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC9WI_dENYIj0ZnFs9SYkrqHP1gcf60Dav0-WZH4TjYJCM5yXVH3YSLRjWHDmk4apgy2QrpX0durISYg3M2Aus2lI5jIrtSXoobH2srVLw_3TfVCESz9GoIhoLuK_Cm0hRnQJEtORXHTw/s505/fondo%2520menu%2520Blur%2520-%2520REDEANDO.jpg)repeat scroll 0 0 #000000;
    font-family: helvetica,sans-serif;width:100%;
    font-weight: bold;border:4px solid #cdcdcd;
    font-style: italic;
}

.menublur li{
    font-size: 28px;
    display:block;
}

.menublur li a{
    text-decoration:none;
    text-transform:uppercase;
    color:transparent !important;
    text-shadow: 0px 0px 6px #ffffff;
    -webkit-transition: 0.2s ease-in;
    -moz-transition: 0.2s ease-in;
    -o-transition: 0.2s ease-in;
    -ms-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
}

.menublur li a:hover{
    color:#FFF !important;
    padding-left:20px;text-shadow: -1px 0 #FAD210, 0 1px #FAD210, 1px 0 #FAD210, 0 -1px #FAD210, -1px 1px 2px #FAD210 !important;
}

.menublur:hover li a{
    text-shadow: 0px 0px 6px #666;
</style>

leer articulo ➨

Menu horizontal 'Balloon'

comentar

Para que tengas una opcion original para poner los enlaces en tu blog o web, aqui te traigo otro menu diseñado con CSS e imagenes. Le he puesto este nombre, porque en ingles 'balloon' quiere decir globo. Como veras, al pasar el cursor sobre los enlaces, aparece un globo tipo comic de color negro que le da un aspecto original y visualmente diferente. Para ponerlo en tu pagina, tan solo tienes que copiar el codigo de abajo y pegarlo en un gadget HTML, sustituyendo lo que esta en color rojo.

Inicio
Contenido del blog
Enlaces
Contacto
Webs amigas
Otro enlace

CODIGO:

<div class="menuballoon"><ul><li><a href="ENLACE"><span>TEXTO</span></a></li><li><a href="ENLACE"><span>TEXTO</span></a></li>
<li><a href="ENLACE"><span>TEXTO</span></a></li><li><a href="ENLACE"><span>TEXTO</span></a></li><li><a href="ENLACE"><span>TEXTO</span></a></li></ul></div>

<style>
.menuballoon {
    float: left;
    height: 46px;
    padding-left: 20px;
    padding-top: 4px;
}
.menuballoon ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
}
.menuballoon li {
    display: inline;
    margin: 0;
    padding: 0;
}
.menuballoon a {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKAkjk-0CQ2gEjVaoqGCwWQPlNsVPxBe9_78kaNd2DfpSkDko_uLN036zCnu6opSHyOZyhhlkr7Zj7nJ6QKeRuusrPja9l0NWntiufSYiY4_oxySS1cpIDZehbzpxb_yeYlB97UKPfTmw/s102/lefttab.jpg") no-repeat scroll left top transparent;
    color: #262626;
    float: left;
    font-family: arial;
    font-size: 12px;
    line-height: normal;
    margin: 0;
    padding-left: 17px;
    text-decoration: none;
}
.menuballoon a span {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY0Nmv3FSUDc-1a9lWQVaF4vmlVjTImHnC38QSUsfovXJ5TUBnuDVHfuByFOffZToj0Cvtn0Y_k_QnR3E0loyEU9j5cSCijWEVErR-27QsBuKlNSNjr7278VMaawBo0-TgZNRMIpwvVRQ/s300/righttab.jpg") no-repeat scroll right top transparent;
    color: #262626;
    display: block;
    float: left;
    font-weight: bold;
    padding: 11px 18px 25px 0;
}
.menuballoon a span {
    float: none;
}
.menuballoon a:hover span {
    color: #FFFFFF;
}
.menuballoon li.selected a {
    background-position: 0 -51px;
}
.menuballoon li.selected a span {
    background-position: 100% -51px;
    color: #FFFFFF;
}
.menuballoon a:hover, .glowingtabs li.selected a:hover {
    background-position: 0 -51px;
}
.menuballoon a:hover span, .glowingtabs li.selected a:hover span {
    background-position: 100% -51px;
}
</style>

leer articulo ➨

Menu Panel Color con CSS3

1 comentó

Existen los menus horizontales y verticales, pero tambien se puede crear uno que aune estas dos caracteristicas. Y eso es lo que he hecho con este menu con forma de panel, creado unicamente con CSS3, sin ningun tipo de imagen. Como veis, consta de 9 enlaces cada uno de un color con efecto gradient (difuminado) que, al pasar el cursor por encima de ellos aparece el numero correspondiente al recuadro.

Aqui teneis el resultado:

Enlace
Enlace
Enlace
Enlace
Enlace
Enlace
Enlace
Enlace
Enlace

Para ponerlo en vuestro blog o web, tan solo teneis que poner estos dos codigos, primero el CSS, que lo pondremos en la plantilla antes de </head> y guardamos.

Ahora, alli donde queramos mostrarlo, pegamos el siguiente codigo, sustituyendo lo que esta en color rojo por los textos y las urls de los enlaces que queramos poner:

<ul class="menupanel">
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>

<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
<li tabindex="1"><span class="title"><a href="URL ENLACE">TEXTO</a></span></li>
</ul>

En Blogger tambien podeis añadir los 2 codigos juntos en un gadget HTML/Javascript, eso ya a gusto de cada uno/a.

leer articulo ➨

Menu horizontal 'Hovercolor'

comentar

Jugando un poco con el CSS y dos imagenes, me ha salido este menu tan chulo. Como veis, tiene un diseño elegante en color azul que, al pulsar sobre uno de los botones cambia de color gradualmente. Para ponerlo en vuestro blog, tan solo teneis que copiar el codigo que os facilito y añadirlo en un gadget HTML, cambiando lo que esta en rojo por las urls de los enlaces que querais poner y su respectivos nombres.

Asi te quedara:

Inicio
Contenido
Enlaces
Chat
Contacto

CODIGO

<div class="hovercolor"><ul><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li><li><a href="URL ENLACE"><span>Nombre</span></a></li></ul></div>

leer articulo ➨