Создаем выпадающее вертикальное меню посредством jQuery

Сегодня мы научимся создавать выпадающее вертикальное меню с помощью CSS3 и платформы jQuery. Красивое навигационное меню поможет вашему сайту выделиться среди других. Именно поэтому, сегодня мы покажем вам, как разработать меню с красивым скользящим выпадением при наведении курсора мыши. Давайте начнем!


* Демо
* Скачать


Файлы, которые нам потребуются

Платформа jQuery – скачать
Плагин jQuery – скачать

Мы будем использовать плагин jQuery easing, чтобы напрямую получить эффект easeoutbounce. Причем, нам не придется писать много кода. Мы можем получить нужный результат, проделав всего несколько несложных действий.

Этап 1: HTML

Создадим li-элементы для навигационного меню с описанием в тэге абзаца. Для пояснения, ознакомьтесь с кодом ниже.

<div id="vnav">
     <ul>
         <li><h1>Home</h1><p>Home page</p></li>
         <li><h1>About Us</h1><p>Know About our company</p></li>
         <li><h1>Portfolio</h1><p>Check our Portfolio</p></li>
         <li><h1>Contact Us</h1><p>Have a question?</p></li>
     </ul>
</div>

Этап 2: стили CSS

Здесь мы применим несколько параметров CSS3, чтобы получить крутой эффект UI (box-shadow и text-shadow).

Box-Shadow – Box shadow придаст эффект выпадения всему блоку (в данном случае li).

Box shadow требуется 3 параметра длины и атрибут цвета (смещение по горизонтали, вертикали, радиус размытия и цвет).

У Text-Shadow такие же параметры (смещение по горизонтали, вертикали, радиус размытия и цвет).

Просмотрите код, представленный ниже, для ознакомления.

Примечание: Сделайте так, чтобы li покрывал весь абзац текста, и далее мы воспользуемся jQuery, чтобы отобразить текст.

li {
    height:20px;
    width:200px;
    overflow:hidden;  /* Important */
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        line-height: 1;
                              /* Rounded Corners */
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
                              /* Box Shadow */
       -moz-box-shadow: 0 1px 3px #999;
       -webkit-box-shadow: 0 1px 3px #999;
                              /* Text Shadow */
       text-shadow: 0 -1px 1px #222;
       border-bottom: 1px solid #222;
       padding: 7px 10px 6px;
       margin-top:5px;
       background-color:#a447cf;
}
li p {
    margin-top:10px;
    font-size:12px;
    color:#6CF;
}

Этап 3: добавляем jQuery и Easing Plugin

Теперь у нас есть jQuery и Easing Plugin, и теперь пришло время их подружить с нашим файлом HTML. А также с пустым файлом custom.js, в который мы позже добавим код.

<script src="jquery.min.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Этап 4: jQuery

Здесь мы будем использовать параметры jQuery - mouseover и mouseout для того, чтобы получить финальный результат. Используя функцию анимации, мы изменим высоту элемента li так, чтобы возможно было отобразить абзац с текстом. А параметр mouseout изменить высоту так, чтобы все стало обратно в исходный вид.

$(document).ready(function(){
    //When Mouse rolls over li
    $("li").mouseover(function(){
        $(this).stop().animate({height:'60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
    //When Mouse cursor removed from li
    $("li").mouseout(function(){
        $(this).stop().animate({height:'20px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
});