js Выпадающее меню фиксированное на JQuery 

Дата публикации  Дата изменения16.01.13  КомментарииНет   Просмотры1867

Левое горизонтальное выпадающее меню на JQuery. При прокрутке возвращается на установленную в настройках позицию. Просто и со вкусом.

Пример использования:

Между <head></head>:

<style type="text/css">
body{margin:0px; padding:0px; background:#fff;}
#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;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
// Подключаем JQuery
<script type="text/javascript" src="jquery.easing.1.3.js"></script>// Подключаем вспомогательный скрипт для JQuery
<script type="text/javascript">
function FloatMenu(){
	var animationSpeed=1500;// Скорость анимации
	var animationEasing='easeOutQuint';
	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}, animationSpeed, animationEasing);
	}
}
$(window).load(function() {
	menuPosition=$('#fl_menu').position().top;
	FloatMenu();
});
$(window).scroll(function () {
	FloatMenu();
});
jQuery(document).ready(function(){
	var fadeSpeed=500; // Cкорость проявления меню
	$("#fl_menu").hover(
 function(){ //mouse over
 $('#fl_menu .label').fadeTo(fadeSpeed, 1);
 $("#fl_menu .menu").fadeIn(fadeSpeed);
 },
 function(){ //mouse out
 $('#fl_menu .label').fadeTo(fadeSpeed, 0.75);
 $("#fl_menu .menu").fadeOut(fadeSpeed);
 }
	);
});
</script>

Между <body></body>:

<div id="fl_menu">
	<div class="label">MENU</div>
	<div class="menu">
    	<a href="#" class="menu_item">An menu item</a>
        <a href="#" class="menu_item">A long menu item</a>
        <a href="#" class="menu_item">Item 3</a>
        <a href="#" class="menu_item">Another one</a>
        <a href="#" class="menu_item">A really, really long menu item</a>
        <a href="#" class="menu_item">Menu item 6</a>
        <a href="#" class="menu_item">And one more</a>
        <a href="#" class="menu_item">A tiny</a>
    </div>
</div>

  Размер:  5,17kB | Изменен: 16.01.13 | Загрузок: 51
Бесплатные курсы

Категории

Теги: , , , , ,

Оцените материал:

Рейтинг: 0.0/10 (0)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые