si fa, si fa... 
basta replicare opportunamente
il percorso per il file jquery.easing è quello presente sul server di html, poi lo sistemi tu
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery floating menu - Esempio JavaScript scaricato da HTML.it</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="HTML.it - il sito italiano sul Web publishing" />
<meta name="Keywords" content="javascript" />
<meta name="Owner" content="HTML.it srl" />
<meta name="Author" content="HTML.it srl" />
<meta name="Copyright" content="HTML.it srl" />
<style type="text/css">
body{margin:0px; padding:0px;}
#fl_menu{position:absolute; top:50px; left:0px; z-index:9999; width:150px; height:50px;}
#fl_menu .label{padding-left:20px; line-height:50px; font-family:"Arial Black", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; background:#000; color:#fff; letter-spacing:7px;}
#fl_menu .menu{display:none;}
#fl_menu .menu .menu_item{display:block; background:#000; color:#bbb; border-top:1px solid #333; padding:10px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none;}
#fl_menu .menu a.menu_item:hover{background:#333; color:#fff;}
/**/
#fl_menu_2{position:absolute; top:50px; left:200px; z-index:9999; width:150px; height:50px;}
#fl_menu_2 .label{padding-left:20px; line-height:50px; font-family:"Arial Black", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; background:#000; color:#fff; letter-spacing:7px;}
#fl_menu_2 .menu{display:none;}
#fl_menu_2 .menu .menu_item{display:block; background:#000; color:#bbb; border-top:1px solid #333; padding:10px 20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none;}
#fl_menu_2 .menu a.menu_item:hover{background:#333; color:#fff;}
.content{width:520px; margin:50px auto;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.html.it/wp-content/uploads/script/demo/b/38144/jquery.easing.1.3.js"></script>
</head>
<body>
<div id="fl_menu">
<div class="label">MENU</div>
<div class="menu">
An menu item
A long menu item
Item 3
Another one
A really, really long menu item
Menu item 6
And one more
A tiny
</div>
</div>
<div id="fl_menu_2">
<div class="label">MENU</div>
<div class="menu">
An menu item
A long menu item
Item 3
Another one
A really, really long menu item
Menu item 6
And one more
A tiny
</div>
</div>
<div class="content">
<h1>A long content</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat nunc in nibh feugiat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. In lacinia sodales commodo. Nam lorem enim, facilisis ut iaculis ac, mattis non diam. Cras nec nibh vel lacus aliquet mattis. Nunc dapibus, lectus at molestie laoreet, sem velit aliquet velit, at consectetur diam neque vitae erat. Pellentesque justo dui, ullamcorper ac pulvinar a, convallis a nisi. Curabitur luctus, nunc quis varius tincidunt, quam lorem consectetur felis, eu congue tellus justo non velit. Etiam eget velit lacus. Pellentesque mollis luctus risus, sit amet blandit nulla accumsan nec. Nunc eu iaculis lorem. Aenean porta venenatis ultrices. Suspendisse et leo id ligula suscipit convallis sodales in enim. Ut iaculis ligula et tellus tristique consectetur. Cras mauris leo, lacinia vel pretium sagittis, lobortis ac risus. Cras turpis felis, accumsan nec placerat ac, gravida adipiscing metus.</p>
</div>
<script>
//config
$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=0.75;
//cache vars
$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");
$(window).load(function() {
menuPosition=$('#fl_menu').position().top;
FloatMenu();
$fl_menu.hover(
function(){ //mouse over
$fl_menu_label.fadeTo($menu_fade_speed, 1);
$fl_menu_menu.fadeIn($menu_fade_speed);
},
function(){ //mouse out
$fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
$fl_menu_menu.fadeOut($menu_fade_speed);
}
);
});
$(window).scroll(function () {
FloatMenu();
});
function FloatMenu(){
var scrollAmount=$(document).scrollTop();
var newPosition=menuPosition+scrollAmount;
if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()){
$fl_menu.css("top",menuPosition);
} else {
$fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
}
}
</script>
<script>
//config
$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=0.75;
//cache vars
$fl_menu_2=$("#fl_menu_2");
$fl_menu_2_menu=$("#fl_menu_2 .menu");
$fl_menu_2_label=$("#fl_menu_2 .label");
$(window).load(function() {
menuPosition=$('#fl_menu_2').position().top;
FloatMenu();
$fl_menu_2.hover(
function(){ //mouse over
$fl_menu_2_label.fadeTo($menu_fade_speed, 1);
$fl_menu_2_menu.fadeIn($menu_fade_speed);
},
function(){ //mouse out
$fl_menu_2_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
$fl_menu_2_menu.fadeOut($menu_fade_speed);
}
);
});
$(window).scroll(function () {
FloatMenu_2();
});
function FloatMenu_2(){
var scrollAmount=$(document).scrollTop();
var newPosition=menuPosition+scrollAmount;
if($(window).height()<$fl_menu_2.height()+$fl_menu_2_menu.height()){
$fl_menu_2.css("top",menuPosition);
} else {
$fl_menu_2.stop().animate({top: newPosition}, $float_speed, $float_easing);
}
}
</script>
</body>
</html>
Permessi di invio
Rispondi quotando