Вашему вниманию я подготовил скрипт с эффектом анимационного меню для сайта. Чтобы лучше понять как это работает, посмотрите демо версию. Мне лично идея показалась очень интересной, поэтому решил ее реализовать и поделится с Вами! Кстати, имеется по этой теме урок, чем то схожий приблизительно смыслу выпадающее меню CSS, посмотрите! И так, урок выполнен на JQuery, поэтому начнем по-порядку разбираться что к чему.
Подключим для начала библиотеку jquery-1.4.2.min.js.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
Теперь будем использовать функцию, которая позволит влиять на тег а, тем самым будем применять анимацию к данному тегу. В комментариях подробно расписано ход действий той или иной функции.
<script type="text/javascript">
$(function() {
$('#menu > li').hover(
/*Задаем идентификатор menu и указываем
что с ним должно происходить при наведении*/
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'top':'140px'}, 1000);
},
/*Задаем функцию в которой указываем
анимацию (1 сек) при наведении на ссылку. В данном
случае ссылка выезжает в меню вниз на 140px.*/
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'top':'95px'}, 1000);
}
/*Задаем функцию в которой указываем
анимацию (1 сек) при наведении на ссылку. В данном
случае ссылка выезжает в меню вверх на 95px.*/
);
});
</script>
Начинаем работу с html данного скрипта и первым делом создадим контейнер для меню и дадим ему идентификатор menu_container. Далее создаем само анимационное меню с помощью тегов ul, li и даем тегу ul идентификатор menu.
Внутри тега li, прописываем тег а, в котором есть путь к изображению и названию с классом name тега label. Дальнейшая работа будет выполняться при помощи jquery и css.
<div id="menu_container" align="center"> <ul id="menu"> <li><a> <label class="name">vk.com</label> <img src='vk.png'/> </a></li> <li><a> <label class="name">facebook.com</label> <img src='facebook.png'/> </a></li> <li><a> <label class="name">twitter.com</label> <img src='twitter.png'/> </a></li> </ul> </div>
Стили для меню, которые придадут нужный эффект анимации.
#menu_container
{
width:1000px;
height:300px;
margin:0 auto;
position:relative;
margin-top: -140px;
}
ul#menu
{
position:absolute;
font-size:40px;
}
ul#menu li
{
float:left;
}
ul#menu a
{
position:relative;
float:left;
bottom:-95px;
line-height: 20px;
width:250px;
}
ul#menu label.name
{
display:block;
color:black;
padding-top: 20px;
padding-bottom: 10px;
}
Вообще, существует огромное множество разнообразных по вкусу и цвету анимационных меню, главное подобрать то, которое Вам, действительно, пригодится и понравится. Вот поэтому данную тему мы широко будем использовать и пытаться придумывать для Вас все новые и новые идеи. К примеру, можете посмотреть адаптивное меню SlickNav или меню для сайта SuperFish. Будем стараться прогрессировать в этом плане и удивлять Вас своим разнообразием и выборам по скриптам. А на этом все, спасибо всем за внимание!