Интересное меню на Mootools

Сегодня мы научимся создавать меню с анимацией.

Вот пошаговая инструкция по созданию такого меню:

1 Скачаем эти две картинки, и поместим их в корень вашего сайта

 

2 Скачаем скрипт анимации (ссылка находится в самом низу), сохраним его также в корень сайта и подключим к html файлу:


3 Включим следующие css-стили в ваш css файл, или пропишем их между тегами <heаd></heаd>

ul { 
	list-style: none;
	margin: 0; 
	padding: 0; 
}

li { 
	float: left; 
	width: 100px; 
	margin: 0; 
	padding: 0; 
	text-align: center; 
}

li a { 
	display: block; 
	padding: 5px 10px; 
	height: 100%; 
	color: #fff; 
	text-decoration: none; 
	border-right: 1px solid #fff; 
}

li a { 
	background: url(snook-animation-bg2.jpg) repeat 0 0; 
}

a:hover, a:focus, a:active { 
	background-position: -150px 0;	
}

#a a { 
	background: url(snook-animation-bg.jpg) repeat; 
	background-position: -20px 35px; 
}

#b a { 
	background: url(snook-animation-bg2.jpg) repeat; 
	background-position: 0 0; 
}

4 Пропишем между тегами <heаd></heаd> скрипт Javascript Mootools:


5 И непосредственно вставим само меню в то место, в котором вы желаете, чтобы оно отображалось:


Первое меню (нужно заметить, что оно выполнено без использования скрипта, а только с помощью CSS)


Второе меню:


Третье меню:

Example B: Right left

Другие статьи по рубрике «Mootools»

MultiBox - новый вид галереи в модальном окне

Добавить комментарии



[CODE] [/CODE]


Комментариев нет!