Меню на jQuery

Сьогодні розповім, як зробити оригінальне меню на jQuery.

Вирішив написати цю замітку, тому що я провозився не одну годину, щоб зробити меню і все, що ви тут прочитаєте моїх рук справу.

Щоб далеко не ходити і відразу вирішити для себе, чи потрібно читати цю статтю далі, подивіться, що в результаті в нас вийде:

ДЕМОнстраційна сторінка

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

Перший млинець грудкою

Перше що мені спало на думку, для реалізації цього завдання – це звичайно створити картинки, помістити їх на фон (css властивість background) і пересувати їх за допомогою функції animate() бібліотеки jQuery. Але як виявилося , animate() не вміє коректно працювати з CSS властивістю background-position , точніше немає можливості задати обидва параметри X і Y (background-position:XY), можна тільки 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 пікселів вгору.

От і все. Тепер, таке меню можна редагувати без зайвих рухів тіла.

Я вже казав, що це меню – плід моєї фантазії, тому хотілося б побачити те, як реалізовані подібні меню на інших сайтах. Якщо раптом у вас є приклади, будь ласка, поділіться!