WordPress как на ладони
wordpress jino

Меню на 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 стили).

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

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

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

Меню на jQuery 22 комментария
Полезные 1 Все
  • Я попробовал написать без javascript. И смотрите, у меня получилось:

    <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; 
    		-webkit-transition: all 500ms ease-out;
    		-moz-transition: all 500ms ease-out;
    		-ms-transition: all 500ms ease-out;
    		-o-transition: all 500ms ease-out;
    		transition: all 500ms ease-out;
    	}
    
    	.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; 
    		margin:-40px 0 ; 
    	}
    	.menu li a div{
    		background:#F0F3F4;  
    	}
    </style>
    
    <ul class="menu">
    	<li><a href="#">О сайте<BR>О сайте</a></li>
    	<li><a href="#">Бизнес<BR>Бизнес</a></li>
    	<li><a href="#">Искусство<BR>Искусство</a></li>
    	<li><a href="#">Живопись<BR>Живопись</a></li>
    	<li><a href="#">Дизайн<BR>Дизайн</a></li>
    	<li><a href="#">Творчество<BR>Творчество</a></li>
    	<li><a href="#">История<BR>История</a></li>
    </ul>
    Ответить3.7 года назад #
    • Kama4696

      Спасибо за коммент. Когда я писал эту статью, CSS 3 еще не была так широко используема, как сейчас.

      Ответить3.7 года назад #
      • Я это понял только когда написал коммент. Благодарю за Вашу работу - она очень помогает.

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

    Может тогда через jquery и высоту (height) узнать? И не править вручную.

    1
    Ответить2.7 года назад #
  • Александр

    Не так давно на http://www.vesti.ru/ появилась такая менюшечка, рекомендую глянуть, там должно быть выполнено посложнее, но тоже занимательно! Спасибо за статью. JQuery пока не осваивал, должно быть пора знакомиться с этой библиотекой.

    Ответить2.6 года назад #

Здравствуйте, !

Ваш комментарий
Предпросмотр