Меню на jQuery

Сегодня расскажу, как сделать оригинальное меню на jQuery.

Решил написать эту заметку, потому что я провозился не один час, чтобы сделать меню и все что вы здесь прочитаете моих рук дело.

Чтобы далеко не ходить и сразу решить для себя нужно ли читать эту статью дальше, посмотрите что в итоге у нас получится:

ДЕМОнстрационная страница

Неоднократно встречал на сайтах подобные меню, но когда я их видел, у меня не возникало желания посмотреть, как они реализованы. Недавно самому понадобилось сделать подобное меню, а конкретного решения я не знал, найти и посмотреть, как сделаны подобные меню на сайтах которые мне встречались, я не смог — с поисками у меня, как и прежде, сложно.

Первый блин комом

Первое что мне пришло на ум, для реализации этой задачи — это конечно создать картинки, поместить их на фон (css свойство background) и передвигать их с помощью функции animate() библиотеки jQuery . Но как оказалось animate() не умеет корректно работать с CSS свойством background-position, точнее нет возможности задать оба параметра X и Y (background-position:X Y), можно только X.

Чтобы решить эту проблему существует jQuery плагин (Background-Position Animations).

После его установки я смог создать такое меню, используя картинки вместо текста, но такой вариант мне показался крайне неудобным, ведь если, к примеру, нам нужно будет поменять название пункта меню, то придется перерисовывать картинки и переназначать размеры в CSS, а это очень неудобно.

Поэтому от такого варианта я отказался и решил сделать его с помощью CSS и HTML разметки.

Создаем меню

Чтобы создать такое меню без использования текстов-картинок и без подключения различных jQuery плагинов нужно не так уж и много.

Давайте разберем все по этапам:

1. В первую очередь, создадим меню в html:

<ul class="menu">
	<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>

2. Подключим библиотеку jQuery, если она еще не подключена: добавим в начало html документа такую строчку:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

jQuery в данном случае подключается из репозитории Google. Разумеется, можно подключить как-то иначе.

3. Добавим CSS стили:

<style type='text/css' rel='stylesheet'>
/* сброс */
ul, li{ margin:0; padding:0; vertical-align:baseline; list-style:none; }

/* обязательные */
.menu li{ float:left; height:40px; overflow:hidden; }
.menu li a,
.menu li a div{ display:block; padding:0 20px; line-height:40px; }
.menu li a div{ margin:0 -20px; }

/* раскраска */
.menu{ position:absolute; margin:100px 10px; font:12px Georgia; }
.menu li{ border-right:1px dashed #999; text-transform:uppercase; }
.menu li a{ color:#4C596F; }
.menu li a:hover{ text-decoration:none; }
.menu li a div{ background:#F0F3F4;  }
</style>

Как видите, я разделил стили на «обязательные» и те, которые отвечают за внешний вид меню и не влияют на корректную работоспособность jquery скрипта. Т.е. если удалить вторые стили, меню по-прежнему будет работать.

4. Добавляем jQuery код:

<script type="text/javascript">
(function($){

$(function(){
	var munu = $('.menu li a');
	munu.each(function(){
		$(this).append('<div>'+ $(this).html() +'</div>');
	});
	munu.hover(
		function(){
			$(this).stop().animate( {marginTop:'-40px'}, 300 );
		},
		function(){
			$(this).animate( {marginTop:'0'}, 500 );
		}
	)
})

})(jQuery)
</script>

Разберем немного код. В munu.each(...) мы добавляем внутрь ссылки (тега a) блок div с анкором ссылки, т.е. мы делаем как бы двух уровненный анкор ссылки, который в последствии будет двигаться. В munu.hover(...) задаем действие при наведении на ссылку: передвигаем её на 40 пикселей вверх.

Важно! Значение marginTop:'-40px' обязательно должно совпадать со значениями свойств в обязательных CSS стилях height: 40px и line-height: 40px (см. CSS стили).

Вот и все. Теперь, такое меню можно редактировать без лишних телодвижений.

Я уже говорил, что это меню — плод моей фантазии, поэтому хотелось бы увидеть то, как реализованы подобные менюшки на других сайтах. Если вдруг у вас есть примеры, поделитесь пожалуйста!

Еще раз напомню, что этот блог можно комментировать, задавать любые вопросы, подписаться на RSS, ретвитить все без исключения статьи и при этом не забывать, что всегда можно воспользоваться справочником по функциям WordPress, на русском

На условиях обмена ссылками, можно заказать неплохие видео обзоры блогов — видео-блог Юрия Гусева.