| 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. |
3 comentarios :
Buenas tardes Sr Pedro, desgraciadamente y a pesar de haberlo intentado en varias ocasiones, no consigo que se vean las imágenes en el menú desplegable.
He tenído el atrevimiento de enviarle un correo por si tuviera a bien ayudarme en este téma y ver donde fallo.
Gracias igualmente por comparir sus conocimientos con tod@s nosotr@s.
Un saludo.
tengo una duda, si quiero colocar una imagen de 150 de ancho x 100 de alto como hago?, gracias
Zaytel Cruz, Las medidas de las imágenes debe adaptarlas a las indicadas en los bloques cuarto y octavo del código del punto tres del tutorial. Los anchos de la imágenes deben ser menores a los anchos de los submenús (width:128px; (cuarto bloque del tutorial)). El ancho y el alto deberá modificarlos en el octavo bloque (width:64px; height:64px;). La suma de los anchos de los submenús debe ser menor que el ancho del menú (width:915px; en el tutorial).
Si las imágenes superan los anchos de los submenús, indicados en el tutorial, deberá modificar toda la estructura del menú para que no se desconfigure.
saludos.
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.