Vamos a crear un llamativo menú desplegable con efecto jQuery y CSS3. Este menú contiene cuadros de diapositivas e imágenes en miniatura que aparecen y se maximizan al pasar el cursor por encima de cada uno de los elementos del menú y, que al hacer click sobre las mismas, nos llevarán a las páginas de los enlaces correspondientes. También incluye recuadros en los submenús, que contienen enlaces, y con efecto deslizante hacia la derecha o hacia la izquierda.
El autor de este menú es tympanus. Para ponerlo en nuestro blog el procedimiento es el siguiente: 1.- Vamos a Edición de HTML: Página principal ► Diseño ► Edición de HTML ►  2.- Para obtener el script jQuery y la librería jQuery localizamos la etiqueta </head> y, antes de la misma, pegamos el siguiente código: <script src='http://pazos-blogger.googlecode.com/files/libreria.jquery.min.1.4.2.js' type='text/javascript'/>
<script src='http://pazos-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/> |
3.- Para darle estilo al menú pegamos el siguiente código CSS antes de la etiqueta ]]></b:skin> : /* Slide Menú desplegable con jQuery y CSS 3
----------------------------------------------- */
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiog8Qkr6qoVEaqTSz_9Y3koQmVzTERTXdXwnj4_kuD2JqP7TdlO16iouM3uF3jE4xmlHopyeP8_DUe2M72mr_vFvPjNswLP_lRPz7gT_AXOMzupi_OFovE28GU3fdIVflpKnxN9E4-2HjD/) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#ffffff;
font-size:20px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#81BEF7;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:10px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0b75af;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
} |
El código resaltado en amarillo corresponde al color de los títulos del menú principal, que en nuestro ejemplo es blanco. Si el fondo del blog en donde pondremos el menú es blanco, posiblemente los títulos no se verán. En este caso debemos cambiar ese color. El código resaltado en verde corresponde al color de los subtítulos del menú principal, que en nuestro ejemplo es azul. Si el fondo del blog en donde pondremos el menú coincide con ese color, posiblemente los subtítulos no se verán. En este caso debemos cambiar dicho color. 4.- Localizamos la etiqueta </body> y, antes de la misma, pegamos el siguiente código: <script type='text/javascript'>
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
$('#relatedPosts').toggle(
function(){
$('#rp_list').animate({'bottom':'10px'},500);
},
function(){
$('#rp_list').animate({'bottom':'-50px'},500);
}
);
$('#rp_list a').tipsy({gravity: 's'});
});
</script> |
5.- Guardamos plantilla. 6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript (debajo de la cabecera del blog). En este gadget añadido pegamos el siguiente código: <ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="http://t2.gstatic.com/images?q=tbn:04DuiA3qZ5hWeM:" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Acerca de</span>
<span class="sdt_descr">Webmaster</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Perfil</a>
<a href="#">Contacto</a>
</div>
</li>
<li>
<a href="#">
<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTUx73qNLW4NkNqtAbNHbi7o_aFU4ie5dsrUxpUyuUwLPzPW8edaQ" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">En Blogger</span>
<span class="sdt_descr">Blogs</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Herramientas</a>
<a href="#">Castorluxerías</a>
<a href="#">Poesía</a>
<a href="#">Castorluxando</a>
</div>
</li>
<li>
<a href="#">
<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRS_OfFGuJxy5B7n-23AAH45kfMzvAF9uO83TerlYs9Zdlo2i8YNDvebhz4" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Herramientas</span>
<span class="sdt_descr">para webmasters</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Generador de botones</a>
<a href="#">Generador de Popups</a>
<a href="#">Generador de Mailto</a>
<a href="#">Tutoriales</a>
</div>
</li>
<li>
<a href="#">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSPbN1_-2LGMAJ0Fw9Y9aJ92Xq2cPPbDf43i7Sc9vpv44-PtoADlhXIOf21pg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">HTML</span>
<span class="sdt_descr">Lenguaje de marcado</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Elementos</a>
<a href="#">Atributos</a>
<a href="#">Códigos básicos</a>
</div>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOw_0yiueHHsRxZ0FfhXdf6uIBLLD4e22CPlhzWfJdk0HAqW3SuyhhyrkiScJw1RMSg-44P_beNjJah1khXCydcTIg4LdM6tN8x_yhWcieDJPtMqXvluoiL495QeQCsHgw3iU5bHWPvQw/s1600/css_1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">CSS</span>
<span class="sdt_descr">Hojas de estilo en cascada</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Externa</a>
<a href="#">Interna</a>
<a href="#">En línea</a>
</div>
</li>
<li>
<a href="#">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQpdVytNQH_UzRLW7W-DthbKuVY4v49MO39OdhWVa5mAL4GO8qIRs9n5c60" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Visitantes</span>
<span class="sdt_descr">Libro de visitas</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Comentarios</a>
</div>
</li>
</ul> |
- En todos los
<a href="#"> reemplazamos # por nuestros enlaces.
- Tolas las URLs resaltadas en rojo corresponden a las imágenes del ejemplo; las reemplazamos por las URLs de nuestras imágenes. Un click sobre cada una de las imágenes nos llevará a las página enlazada.
- Las imágenes deben ser de 170px por 170px, o con dimensiones lo más próximas a éstas, para que no se distorsionen de manera notoria.
- Los títulos (ejemplo: ACERCA DE), y los subtítulos (ejemplo: WEBMASTER), del menú principal, y los títulos de los enlaces de los submenús que van en el recuadro (ejemplo: PERFIL y CONTACTO), los cambiamos por nuestros títulos.
|
14 comentarios :
el menu no me funciona noc si es por la plantilla si puedes orientame en eso este es el url http://mijuvej.blogspot.com/
Este menú no es apropiado para plantillas como la de tu blog ya que la imágenes se despliegan por detrás de la cabecera y del cuerpo de las entradas y, obviamente, no se ven. Habría que modificar casi totalmente el código CSS para aumentar las dimensión horizontal del menú para que se puedan ver las imágenes que se despliegan, lo cual haría que el menú ocupara mucho espacio y, sin las imágenes desplegadas, los espacios superior e inferior de la barra se verán vacíos, lo cual no es muy estético.
Si decides cambiar de plantilla no debes olvidar que el ancho del menú debe ser igual o menor al ancho del blog. Los enlaces y los títulos de los mismos debes cambiarlos por la páginas que quieras enlazar. Los que están en el menú del tutorial son ejemplos.
Estoy peleándome con este menú, pero es que me gusta mucha y quiero ponerlo, así que sigo con la lucha. No sé el motivo, pero cuando se abren las pestañas no se quedan fijas...
http://makeupartistt.blogspot.com
funciona a la perfeccion man
gracias.. FUNCIONA A LA PERFECCION...
ANDO BUSCADO UN MENU DESPEGABLE COMO EL TUYO PERO QUE TENGA LA OPCION DE CASCADA EN MENU HORIZONTAL.. TE AGRADECERIA QUE PUDIERAS RESPONDER..
Santy_VDJ: En la tabla de contenido de este blog (barra lateral) busca en la sección "Menús"; puede estar allí el que estás buscando.
Saludos.
Hola compañero,
El menu en principio me funciona, pero me deja unos espacios entre un menu y otro q no soy capaz de quitar. En principio deberia de ser el margin, pero en las primeras lineas ya aparece un margin a 0 y un padding a 0 asi que no se que puede ser. Ahora mismo lo veras un poco rarito el blog por que voy haciendo pruebas, pero si se te ocurre donde puede estar el error te lo agradecere. Como dato adicional te dire que la plantilla la hice con artisteer.
UN saludo y mil Gracias
Por cierto mi blog, jejeje
http://allstarstv.blogspot.com/
Saludos
el único problema es que cuando se abre la solapa , se cierra altiro , pues queda debajo de los demás elementos.
Roke Ramos: Con algunas plantillas pasa eso. Para evitarlo en Elementos de página arrastre el gadget que contiene el código del menú y que puso debajo de la cabecera, y póngalo en la parte superior del cuadro que contiene las entradas del blog. El menú no deberá ser más ancho que el cuerpo de las entradas del blog.
Saludos.
hola lo primero gracias por el codigo , pero lo he puesto entero 2 veces y en dos blogs y las imagenes siempre se me quedan recortadas
Haber si me puedes ayudar
mi blog es www.imsansc.blogspot.com
Imsan: Haga lo indicado en el comentario #10.
saludos.
Buenas Pedro. Antes de nada darte las gracias por tu blog, me está sirviendo de una inmensa ayuda. Quería hacerte una consulta respecto a esta plantilla. En principio tras seguir tus pasos, mi menú fucionaba a las mil maravillas, pero tras cambiar la url principal de mi blog por otro titulo la cosa cambió. Ahora no me funcionan las imagenes. Volví a realizar todos los pasos otra vez y nada, el menu en apariencia sigue igual, respeta los enlaces que le agrego pero no hay forma que salgan las imagenes al posiconar el puntero sobre cada cuadro dle menú. Gracias de antemano.
David: El problema no se debe a que hayas cambiado la URL principal. El problema se origina en Blogger, alguna modificación, que no sé suál sea, no permite que este script funcione. Si te fijas en la DEMO del tutorial tampoco funciona el menú. Otros menús que utilizan este script tampoco están funcionando. Trataré de averiguar de qué se trata.
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.