En esta entrada les voy a enseñar a poner un menú muy bonito y que hace que tu blog se vea más espacioso a mi parecer :D aqui les dejo una imagen de como funciona. Igualmente, al momento de hacer scroll el menú se mantiene visible en la ventana.
ul#navigation { position: fixe margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#E7F2F9; /*COLOR DEL FONDO*/ background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; /*COLOR, TIPO Y GROSOR DEL BORDE*/ -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; /*BORDES DERECHOS REDONDEADOS*/ -webkit-border-bottom-left-radius: 10px; /*BORDES IZQUIERDOS REDONDEADOS*/ -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; /*POSICIÓN DEL TEXTO: CENTER, LEFT O RIGHT*/ padding-top:80px; /*LARGO, RECOMIENDO DEJARLO ASÍ O MÍNIMO 75*/ opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);/*OPACIDAD, SI QUIERES QUITARLE LA OPACIDAD, BORRA ESTAS 2 LINEAS COMPLETAS*/ } ul#navigation li a:hover{ background-color:#CAE3F2; /*COLOR QUE CAMBIA CUANDO SE PASA EL MOUSE*/ } ul#navigation li a span{ letter-spacing:2px; /*ESPACIADO ENTRE LETRAS*/ font-size:11px; /*TAMAÑO DE LA LETRA*/ color:#60ACD8; /*COLOR DE LA LETRA*/ text-shadow: 0 -1px 1px #fff; /*SOMBRA DE LETRA*/ } ul#navigation .home a{ background-image: url(URL DE LA IMAGEN); } ul#navigation .about a{ background-image: url(URL DE LA IMAGEN); } ul#navigation .search a{ background-image: url(URL DE LA IMAGEN); } ul#navigation .podcasts a{ background-image: url(URL DE LA IMAGEN); } ul#navigation .rssfeed a{ background-image: url(URL DE LA IMAGEN); } ul#navigation .photos a{ background-image: url(URL DE LA IMAGEN); } ul#navigation .contact a{ background-image: url(URL DE LA IMAGEN); }
Aquí les hago un paréntesis para mostrarles como se verían con imágenes
Lo que se encuentra en morado es lo que pueden editar a su gusto
2. Ahora, nuevamente ejecutaremos Ctrl + f y pondremos </script> y arriba del eso pondremos esto.
$(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); });
3. Por ultimo, ve a Diseño» Agregar gadget» HTML/JavaScript y por ultimo pondremos este código.
<ul id="navigation"> <li class="home"><a href="(URL DE LA PAGINA/ETIQUETA)"><span>Home</span></a></li> <li class="about"><a href="(URL DE LA PGINA/EIQUETA)"><span>About</span></a></li> <li class="search"><a href="(URL DE LA PAGINA/ETIQUETA)"><span>Search</span></a></li> <li class="photos"><a href="(URL DE LA PGINA/ETIQUETA)"><span>Photos</span></a></li> <li class="rssfeed"><a href="(URL DE LA PAGINA/ETIQUETA)"><span>Rss Feed</span></a></li> <li class="podcasts"><a href="(URL DE LA PAGINA/ETIQUETA)"><span>Podcasts</span></a></li> <li class="contact"><a href="(URL DE LA PAGINA/ETIQUETA)"><span>Contact</span></a></li> </ul>Y solo quedaría editar las secciones del menú y su dirección
Les gusto?, espero que si<3, ya saben como siempre, cualquier duda me dicen y tratare de responder lo antes posible. Me encantaría ver como quedan sus lindos menús :D
Yo me despido y nos vemos en la próxima entrada besos<3
No hay comentarios.:
Publicar un comentario