Este menú tiene dos características interesantes:
- cuando se cierne sobre cada uno de los elementos del menú, da la impresión de que se mueve una caja/rectángulo que queda suspendido por detrás del elemento y se adapta a la anchura del mismo.
- se desliza hacia dentro una barra de descripción de el lado izquierdo de la página hacia el elemento de menú enfocado.
Se hace uso de jQuery para el efecto y algunas propiedades de CSS3 para el estilo.
Para usarlo solo hay que seguir los siguientes pasos:
- en nuestro index.html (o cualquier otro archivo donde queramos incluirlo) entre etiquetas <head></head> colocamos lo siguiente:
<!-- incluimos el estilo --> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <!-- incluimos las librerias --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="cufon-yui.js" type="text/javascript"></script> <script src="BabelSans_500.font.js" type="text/javascript"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script> <script type="text/javascript">
y seguidamente:
(clic para mostrar/ocultar).
$(function() {
Cufon.replace('a, span').CSS.ready(function() {
var $menu = $("#slidingMenu");
/**
* the first item in the menu,
* which is selected by default
*/
var $selected = $menu.find('li:first');
/**
* this is the absolute element,
* that is going to move across the menu items
* It has the width of the selected item
* and the top is the distance from the item to the top
*/
var $moving = $('<li />',{
className : 'move',
top : $selected[0].offsetTop + 'px',
width : $selected[0].offsetWidth + 'px'
});
/**
* each sliding div (descriptions) will have the same top
* as the corresponding item in the menu
*/
$('#slidingMenuDesc > div').each(function(i){
var $this = $(this);
$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
});
/**
* append the absolute div to the menu;
* when we mouse out from the menu
* the absolute div moves to the top (like initially);
* when hovering the items of the menu, we move it to its position
*/
$menu.bind('mouseleave',function(){
moveTo($selected,400);
})
.append($moving)
.find('li')
.not('.move')
.bind('mouseenter',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide in the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').
stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
//move the absolute div to this item
moveTo($this,400);
})
.bind('mouseleave',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide out the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').
stop(true).animate({'width':'0px'},400, 'easeOutExpo');
});;
/**
* moves the absolute div,
* with a certain speed,
* to the position of $elem
*/
function moveTo($elem,speed){
$moving.stop(true).animate({
top : $elem[0].offsetTop + 'px',
width : $elem[0].offsetWidth + 'px'
}, speed, 'easeOutExpo');
}
}) ;
});
y entre etiquetas <body></body> nuestro menú:
<div id="slidingMenuDesc" class="slidingMenuDesc"> <div><span>Esta es resumen para el item 2.</span></div> <div><span>Esta es resumen para el item 3.</span></div> <div><span>Esta es resumen para el item 4.</span></div> <div><span>Esta es resumen para el item 5.</span></div> <div><span>Esta es resumen para el item 6.</span></div> </div> <ul id="slidingMenu" class="slidingMenu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> <li><a href="#">Item 6</a></li> </ul>
Para qué explicar lo demás si tympanus lo hizo muy bien.
Hermano el enlace para descargar los archivos del menu estan caidos
ResponderEliminarHola, el problema es en el servidor del sitio, puedes descargarlo desde el siguiente enlace (cufonizedflyoutmenu.zip) mientras restablecen el enlace de descarga oficial.
ResponderEliminarOH YEAH!!! estaba buscando este menu desde hace días y mira donde lo encontré :D
ResponderEliminarQue casualidad marquito, ¿No será que andabas buscándome?
Eliminar