ciao a tutti ho creato modificando un plugin di jquery un div che segue il mouse, per meglio dire il fnzionamento è il seguente,
io quando clicko su di una voce di menu (ul.menu li a) il #follower (un 'li' aggiuntivo creato con jquery) va slidando verso la voce.
spero di essermi spiegato.... posto il codice cosi capite meglio anche voi....
jQuery
$(document).ready(function($) {
if($('#block-menu-menu-progetti .menu li > a.active').length > 0){
$('#block-menu-menu-progetti .menu .active').parents('.leaf').addClass('active');
$('#block-menu-menu-progetti .menu .active a').removeClass('active').addClass('active-page');
$("#block-menu-menu-progetti .menu").append("<li id='follower'></li>");
var $magicLine = $("#follower");
$magicLine
.height($("#block-menu-menu-progetti .menu .active").find('a.active-page').height())
.css("top", $("#block-menu-menu-progetti .menu .active").position().top)
.css('margin-top', '30px')
.data("origTop", $('#block-menu-menu-progetti .menu .active').position().top)
.data("origHeight", $("#block-menu-menu-progetti .menu .active").find('a.active-page').height());
$("#block-menu-menu-progetti .menu li").find('a').hover(function() {
$el = $(this);
topPos = $el.position().top;
newHeight = $magicLine.height();
$magicLine.stop().animate({
top: topPos,
Height: newHeight
}).css('margin-top', '0px')
;
}, function() {
$magicLine.stop().animate({
top: $('#block-menu-menu-progetti .menu .active .active-page').position().top,
height:$('#block-menu-menu-progetti .menu .active .active-page').height()
});
});
}else {
$('#block-menu-menu-progetti .menu .active').parents('.leaf').addClass('active');
$('#block-menu-menu-progetti .menu .active a').removeClass('active').addClass('active-page');
var $el, topPos, newHeight;
$("#block-menu-menu-progetti .menu").append("<li id='follower'></li>");
$('#follower').animate({opacity: 0});
var $magicLine = $("#follower");
$magicLine
.height($("#block-menu-menu-progetti .menu li:first").height())
.css("top", $("#block-menu-menu-progetti .menu li:first").position().top)
.data("origTop", $('#block-menu-menu-progetti .menu li').position().top)
.data("origHeight", $("#block-menu-menu-progetti .menu li").height());
$("#block-menu-menu-progetti .menu li").find('a').hover(function() {
$el = $(this);
topPos = $el.position().top;
newHeight = $magicLine.height();
$magicLine.stop().animate({
top: topPos,
Height: newHeight,
opacity:1
});
}, function() {
$magicLine.stop().animate({
opacity:0,
top: $('#block-menu-menu-progetti .menu li:first').position().top,
height:$('#block-menu-menu-progetti .menu li:first').height()
});
});
};
});html
<div class="content" >
<ul class="menu"><li class="first leaf home mid-217"><a href="/bruno/" class="active">Home</a></li>
<li class="leaf chi-siamo mid-420"><a href="http://google.com" title="">Chi siamo</a></li>
<li class="leaf in-movimento mid-1107"><a href="/bruno/in-movimento" title="">IN MOVIMENTO</a></li>
<li class="last leaf photogallery mid-1090"><a href="/bruno/photogallery" title="">Photogallery</a></li>
</ul>
</div>il problema avviene quando clicko su di una voce, carica la pagina e avviene questo, ma non sempre, spesso però (vedere immagine allegata).
che può essere??? mi sembra che in fondo il codice funzioni.... però sbrocca a random....
