Выпадающие меню на jQuery

В этом уроке мы разберем создание выпадающего меню с помощью html, css и jquery. Выпадающие меню нужно для удобства в навигации. Оно очень удобное и простое. Выпадающие меню мы будет создавать с помошью анимации slideDown и slideUp на jquery.

Аккордеон на JavaScript

Разметка HTML

Первое что нам надо - это разметка HTML. В теге head мы поместим ссылку на jquery. Для этого воспользуемся api Google.


<!DOCTYPE html>
<html> 
<head>
<meta charset="utf 8">
<title>Выпадающие меню на jQuery</title>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

Теперь разберем создание самого меню. Меню мы поместим в тег nav с идентификатором menu.


 <nav id="menu">
  <ul>
    <li><a href='/'>Главная</a></li>
    <li><a class='prett'>Уроки</a>
  <ul class='menus'>
 <li><a href='#'>Дизайна</a></li>
 <li><a href='#'>Программирования</a></li>
 <li><a href='#'>Монтажа</a></li>
 </ul>
   </li>
    <li><a href='#'>Новости</a></li>
    <li><a href='#'>Курсы</a></li>
    <li><a class='prett'>Статьи</a>
    <ul class='menus'>
 <li><a href='#'>Новостные</a></li>
 <li><a href='#'>Научные</a></li>
 <li><a href='#'>Финансовые</a></li>
 </ul>
  </li>
 </nav>


Css

Теперь приступаем к стилям. Создаем папку css. В ней мы создаем файл style.css. Чтобы наше меню выглядело красиво, мы добавим некоторые стили.


#menu{
    background:#464646;color:#eee;height:35px;
}
#menu ul,#menu li{
    margin:0;padding:0;list-style:none;
}
#menu ul{
    height:35px
}
#menu li{
    float:left;display:inline;position:relative;
}
#menu li a{
    color:white
}
#menu a{
    display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;font-family: 'PT Sans Narrow', sans-serif;font-size: 1.2em;
}
#menu li:hover > a,#menu li a:hover{
    color:#fff
}
#menu span{
    font-size:13px;position:absolute;left:35px
}
#menu ul.menus{
    height:auto;overflow:hidden;width:180px;background:#464646;
    position:absolute;z-index:99;
    border:1px solid #ccc;border-top:none;
}
#menu ul.menus a{
    color:white
}


Там, где у нас будет выпадающий список мы поставим стрелочку вниз. Также добавим hover эффект, чтобы наше меню выглядело красивее.


#menu a.prett,#menu a.trigger2{
    padding:0 27px 0 14px
}
#menu li:hover > a.prett,#menu a.prett:hover{
    background:#fff;color:#333
}
#menu a.prett::after{
    content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px
}
#menu ul.menus a:hover{
    background:#BABABA;
}
#menu a.trigger2::after{
    content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px
}


И последнее, что мы добавим в стилях - это спрячем наш список.


#menu li ul{
    display: none;
}


jQuery

Последнее, что нам надо сделать это добавить jquery код.


$(document).ready(function () {
     
   $('#menu  ul li').hover(
            function () {
                $('ul', this).stop().slideDown(400);
            }, 
            function () {
                $('ul', this).stop().slideUp(400);            
            }
        );
});
 

В этом коде мы добавили плавную анимацию при открытие меню. Значение мы задали в функции slideDown и slideUp. Задали мы 0.4 секунды.