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.
|
