Создание вертикального меню на jQuery и CSS

Здравствуйте, уважаемые читатели и все любители интересных изобретений в мире современных веб-технологий. Предлагаю вам ознакомиться с темой создания вертикального меню на jQuery, а так же чистом CSS3. Как это будет выглядеть можно посмотреть на демо странице в теме недавнего поста, в котором я показывал как можно красиво оформить страницу FAQ с помощью jQuery. Но на самом деле я подготовил для вас 3 варианта создания подобного меню. Первый — это чисто на CSS без использования скриптов, второй с применением фреймворка Mootools и третий на jQuery. А началось все с того, что я давно хотел оживить ссылки архива, что находится справа, но все никак руки не доходили. А тут случайно наткнулся и решил изучить эту тему более подробно. Прошу заметить, архив на блоге тоже стал живым. 🙂

И давайте начнем с первого варианта создания вертикального меню и поговорим о минусах этого способа. И они, на самом деле, очевидны. Не все браузеры поддерживают спецификацию CSS3, поэтому эффекты будут видны только в более современных браузерах. Нам нужно добиться того, чтобы при наведении курсора на пункт меню происходило плавное смещение, а после плавно возвращался на место. Для этого воспользуемся шпаргалкой, которая находится в статье: Плавность и анимация в CSS. Нас интересует пункт: плавное перемещение. И давайте создадим список.

1
2
3
4
5
6
7
8
9
10

<ul>
<li><a href="#">Пункт меню</a></li>
<li><a href="#">Пункт меню</a></li>
<li><a href="#">Пункт меню</a></li>
<li><a href="#">Пункт меню</a></li>
<li><a href="#">Пункт меню</a></li>
<li><a href="#">Пункт меню</a></li>
<li><a href="#">Пункт меню</a></li>
<li><a href="#">Пункт меню</a></li>
</ul>

Помещаем этот список на страницу. Рекомендую потренироваться на тестовом HTML документе. Смотрите: Урок HTML для чайников. Для того, чтобы ссылки меню плавно смещались при наведении, добавляем CSS код:

1
2
3
4
5
6
7
8

li{-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;}
li:hover{-webkit-transform: translate(-15px,0); /* Chrome */
-moz-transform: translate(-15px,0); /* Mozilla */
-0-transform: translate(-15px,0); /* Opepa */
-webkit-transform: translate(-15px,0);} /* Остальные */

Таким образом мы указали, что пункт меню будет смещаться вправо по оси X на 15 пикселей. Будет задействован псевдокласс hover. Смотрим результат в современных браузерах. В качестве примера я сделал симпатичное меню, которое вы потом можете скачать.

Демо

Настала очередь разбираться с фреймворком Mootools. И для начала его нужно подключить к странице. Прописываем строчку в заголовке и указываем путь к файлу.

<script type="text/javascript" src="js/mootools.js"></script>

И между тегами head помещаем этот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

window.addEvent('domready', function() {	
	 	var list = $$('.module_menu ul.menu li a');
		list.each(function(element) {	 
			var fx = new Fx.Styles(element, {duration:400, wait:false, transition: Fx.Transitions.Expo.easeOut});		 
			element.addEvent('mouseenter', function(){
				fx.start({
					'margin-left': 15
				});
			});
 
			element.addEvent('mouseleave', function(){
				fx.start({
					'margin-left': 0
				});
			});
 
		});
 
});
 
window.addEvent('domready', function() {
var tmjmosmsg,fx;
function pload(){
	 if($type(tmjmosmsg[0])=='element'){
	 //delayed start, then remove the html element upon completion
	(function(){
		fx.start({
			}).chain(function(){el.remove();});
			}).delay(3500);
			}
		};
		 window.addEvent('load',function(){
 
		 }
);
 
});

Этот код можно так же переместить в сам файл Mootools.js, чтобы на странице не было таких нагромождений кода, а было все аккуратно. Давайте посмотрим пример.

Демо

На первый взгляд можно подумать, что нет никакой разницы с первым методом. Однако Mootools создан специально для внедрения кроссбраузерных решений, и данный пример будет работать даже в старых браузерах, включая IE-6. его можно смело применять на сайте, не опасаясь, что у кого-то он не будет работать. Теперь давайте прейдем к третьему способу создания вертикального меню, который попал в коллекцию готовых jQuery скриптов. Подключаем библиотеку jQuery способом, указанном во втором примере и добавляем на страницу между тегами head или же в сам файл jquery, а так же любой другой js файл, этот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

$(document).ready(function()
{
	slide("ul", 15, 0, 150, .8);
});
 
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creates the target paths
	var list_elements = navigation_id + " li";
	var link_elements = list_elements + " a";
 
	// initiates the timer used for the sliding animation
	var timer = 0;
 
	// creates the slide animation for all list elements 
	$(list_elements).each(function(i)
	{
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-left","-180px");
		// updates timer
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});
 
	// creates the hover-slide effect for all link elements 		
	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 150);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 150);
		});
	});
}

Вам наверняка, как и мне, понравился третий способ больше, чем первые два. И не удивительно, он более динамичный. Получилось танцующее меню на jQuery. Надеюсь, что вы осилили большое количество букв. 🙂 Это стоит того, чтобы применить подобные эффекты на своем сайте. Есть так же и мобильное меню для сайта на jQuery. И напоследок, как и обещал, можете скачать все три примера и разобраться более подробно. А тем, кто еще не подписан на мою информационную рассылку, сообщаю, мои подписчики получают интересные бонусы. Добро пожаловать. Подписаться

СКАЧАТЬ