| Vamos a crear un menú horizontal con efecto card-shuffle, el cual hace que cuando se ingresa a la página que lo contiene los iconos se deslizan hacia adentro; luego, cuando se pasa el cursor por cada uno de los elementos, los íconos se deslizan desde la parte superior hacia afuera. Podemos verlo en funcionamiento aquí:
Vamos a ponerlo en nuestro blog:
Página principal ► Diseño ► Plantilla ► Editar HTML |
1.- Debemos tener en nuestra plantilla la librería jQuery, para lograrlo localizamos la etiqueta </head> e inmediatamente antes pegamos el siguiente código: <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> |
2.- Añadimos el Script que producirá el efecto card-shuffle, para lo cual pegamos, después del código anterior y antes de la etiqueta </head>, el siguiente código: <script type="text/javascript">
$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
}
);
});
</script> |
3.- Para darle estilo al menú pegamos, antes de la etiqueta ]]></b:skin>, el siguiente código CSS . .navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Vz8OmIxIN1Lqnul5nWWrSoTnH1PHudyitOIR4PTcd-ok5TfQ5afbvqPXVI7homcC_zoXtiubO71rH9uu5jG_GyF4gr2Kvx0MsJtV40UELDLAuZWHJyKhvT0Ws8sduOkwsTAmDaBDrbg/) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-shadow: 0 1px 1px #fff;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.perro{
background-image:url(http://images.gograph.com/Images-9921/Icons/scoobydoo.gif);
left:33px; /*128/2 - 32(mitad del icono) +1 de borde*/
}
ul.menu li span.loro{
background-image:url(http://images.gograph.com/Images-9921/Icons/parrot.gif);
left:163px; /* más 128 + 2px de borde*/
}
ul.menu li span.oso{
background-image:url(http://images.gograph.com/Images-9921/Icons/jap38.gif);
left:293px;
}
ul.menu li span.dromedario{
background-image:url(http://images.gograph.com/Images-9921/Icons/afr21.gif);
left:423px;
}
ul.menu li span.canguro{
background-image:url(http://images.gograph.com/Images-9921/Icons/oce61.gif);
left:553px;
}
ul.menu li span.conejo{
background-image:url(http://images.gograph.com/Images-9921/Icons/ebunny19.gif);
left:683px;
}
ul.menu li span.leon{
background-image:url(http://images.gograph.com/Images-9921/Icons/afr34.gif);
left:813px;
} |
En el anterior código podemos identificar los colores aplicados al menú y cambiarlos según convenga al diseño de nuestro blog. Debemos tener en cuenta: - Las palabras resaltadas en verde son las que "atenderán al llamado" que se hará al estilo y al efecto, desde el elemento HTML/JavaScript, que crearemos en el punto siguiente.
- Las direcciones (URL) resaltadas en rojo corresponden a las de los íconos del menú. Las cambiaremos por la direcciones (URL) de los íconos que se adapten a los temas de nuestro menú.
4.- Guardamos los cambios y, por último, vamos a: Diseño ► Añadir un gadget Elegimos un elemento tipo HTML/JavaScript y pegamos el siguiente código: <div class="navigation">
<ul class="menu" id="menu">
<li><span class="perro"></span><a href="URL" class="first">Perros</a></li>
<li><span class="loro"></span><a href="URL">Loros</a></li>
<li><span class="oso"></span><a href="URL">Osos</a></li>
<li><span class="dromedario"></span><a href="URL">Dromedarios</a></li>
<li><span class="canguro"></span><a href="URL">Canguros</a></li>
<li><span class="conejo"></span><a href="URL">Conejos</a></li>
<li><span class="leon"></span><a href="URL" class="last">Leones</a></li>
</ul></div> |
- Las palabras resaltadas en verde deben ser idénticas a las resaltadas en verde, del código anterior, para que "la llamada" hecha al estilo y al efecto sea "atendida".
- Los resaltados en azul los reemplazamos por las direcciones (URL) de las páginas a las que nos llevarán los enlaces.
- Las palabras resaltadas en amarillo las cambiamos por los títulos de los enlaces.
Este elemento lo ponemos debajo de la cabecera del blog. PLantillas nuevas En los blogs diseñados con plantillas nuevas (Diseñador de PLantillas) esta clase de menús pueden presentar problemas para su funcionamiento, ya que esas plantillas tienen estilos predefinidos. Si tenemos ese problema sigamos el siguiente procedimiento: 1.- Vamos a Edición de HTML y, sin expandir plantillas de artilugios, localizamos esta línea: <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'> |
...y eliminamos la parte resaltada. Si aparece en otras líneas también la eliminamos. 2.- Localizamos la siguiente sección: /* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid $(tabs.border.color);
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
} |
...que puede variar dependiendo de la plantilla, y eliminamos todo su contenido, excepto el encabezado: /* Tabs
----------------------------------------------- */
|
3.- El contenido que eliminamos en la anterior sección lo reemplazamos por éste: #crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;} |
5.- Vista previa y Guardar plantilla. |
