Efecto Menu – Resalto

zonefacil 13 junio, 2012 0

Vista Demo : http://bit.ly/oZHd5f
Vista PnG: http://bit.ly/oul2eN

1- Primero Pegamos Este Codigo

<link rel=”stylesheet” href=”http://bit.ly/o0CuAv” type=”text/css” media=”screen”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script src=”http://bit.ly/n4UW0N” type=”text/javascript”></script>
<script src=”http://bit.ly/nGsyr3″ type=”text/javascript”></script>
<script src=”http://bit.ly/ohOioE” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function() {
Cufon.replace(‘a, span’).CSS.ready(function() {
var $menu         = $(“#slidingMenu”);
var $selected    = $menu.find(‘li:first’);
var $moving        = $(‘<li />’,{
className    : ‘move’,
top            : $selected[0].offsetTop + ‘px’,
width        : $selected[0].offsetWidth + ‘px’
});
$(‘#slidingMenuDesc > div’).each(function(i){
var $this = $(this);
$this.css(‘top’,$menu.find(‘li:nth-child(‘+parseInt(i+2)+’)’)[0].offsetTop + ‘px’);
});
$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’);
});;
function moveTo($elem,speed){
$moving.stop(true).animate({
top        : $elem[0].offsetTop + ‘px’,
width    : $elem[0].offsetWidth + ‘px’
}, speed, ‘easeOutExpo’);
}
}) ;
});
</script>
</head>
<body>
<div id=”slidingMenuDesc”>
<div><span>Ver Mas Codigo O Recurso Webmaster</span></div>
<div><span>Every man dies. Not every man really lives.</span></div>
<div><span>It is your work in life that is the ultimate seduction.</span></div>
<div><span>It’s the friends you can call up at 4 a.m. that matter. </span></div>
<div><span>We are time’s subjects, and time bids be gone. </span></div>
</div>

<ul id=”slidingMenu”>
<li><a href=”#”>Home</a></li>
<li><a href=”http://bit.ly/rlphES/”>ZoneFacil</a></li>
<li><a href=”http://bit.ly/rlphES/”>ZoneFacil</a></li>
<li><a href=”http://bit.ly/rlphES/”>ZoneFacil</a></li>
<li><a href=”http://bit.ly/rlphES/”>ZoneFacil</a></li>

<li><a href=”http://bit.ly/rlphES/”>ZoneFacil</a></li> </ul>
</body>

Espero Que Les Guste Pronto Traeremas Mas Recurso Asi Que no dejes de entre a este sitio



Conectate con:

Responder »

Debes estar conectado para comentar.