Анимированное выпадающее меню на jQuery
Здравствуйте. В этом уроке Вы узнаете как быстро и просто с помощью jQuery сделать аниммированное выпадающее меню. Появляться оно будет по нажатию на кнопку. В данном случае это - "Навигация". Также хотелось бы сказать, что при наведении на каждый пункт этого меню будет происходить интересный эффект. Ниже вы можете просмотреть демонстрацию получившегося меню и скачать исходные файлы урока:
Шаг 1. HTML-каркас меню.
Ну, в общем-то, как и всегда, начнем с создания каркаса нашего меню. Выглядеть оно очень просто, примерно так, как построил его я ниже:
HTML:
<div class="container">
<img src="navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_body">
<li><a href="http://ruseller.com/index.php">Главная</a></li>
<li><a href="http://evgeniypopov.com/index.php">Блог</a></li>
<li><a href="http://evgeniypopov.ru/index.php">Форум поддержки</a></li>
<li><a href="http://ruseller.com/about.php">О нас/Контакты</a></li>
</ul>
</div>
Шаг 2. Дизайн меню
Следующим шагом работы нашего выпадающего меню будет его стилизация. Стилей будет не очень-то и много. Ниже я привожу примерный css-код, который я использовал для дизайна меню:
CSS:
<style type="text/css">
body{background:#534741;font-family:Arial, Helvetica, sans-serif; font-size:12px;
}
ul, li{margin:0; padding:0; list-style:none;
}
.menu_head{border:1px solid #998675;
}
.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;
}
.menu_body li{background:#493e3b;
}
.menu_body li.alt{background:#362f2d;
}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;
}
.menu_body li a:hover{padding:15px 10px; font-weight:bold;
}
</style>
Шаг 3. "Прикрутка" основного фреймворка jQuery
Конечно же, как и в любом уроке по jQuery, мы не обойдемся без основного фреймворка. Этот файл я выложил также в исходниках. "Прикручивать" его к нашему документу с выпадающим меню будем следующим образом, между тегами <head> и </head>:
<script src="jquery.js" type="text/javascript"></script>
Шаг 4. jQuery - доработки.
Теперь мы будем делать специальный эффект для нашего меню, чтобы при наведении на каждый пункт, его текст сдвигался немного в сторону и увеличивался. Этот эффект можно получить скопировав нижеприведенный jQuery-код и прописав его между тегами <head> и </head>:
<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt"); $('img.menu_head').click(function () {
$('ul.menu_body').slideToggle('medium'); });
$('ul.menu_body li a').mouseover(function () {
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 ); });
$('ul.menu_body li a').mouseout(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 ); });});
</script>