Веб-мастерская Ларисы ВоронинойКак сделать выпадающее меню.
WEB-мастерская Ларисы Ворониной logo

Как сделать выпадающее меню. Дек 5 2016

 


В этой статье я расскажу вам, как сделать выпадающее меню с помощью HTML, CSS и Java Script. Идея такая: жмём на панель, и выпадает список меню. Эта тема полезна для адаптивной верстки под планшеты и мобильные устройства.

Выглядеть наше выпадающее меню после нажатия на панель будет вот таким образом:

Итак, идём в редактор и создаём файл index.html, пишем простую разметку выпадающего меню.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="style.css" />
          <title>Раскрывающееся меню</title>
     </head>
     <body>
          <div class="menu-main">
               <div class="menu">
                    <ul>
                         <li><a href="#">Пункт1</a></li>
                         <li><a href="#">Пункт2</a></li>
                         <li><a href="#">Пункт3</a></li>
                         <li><a href="#">Пункт4</a></li>
                         <li><a href="#">Пункт5</a></li>
                    </ul>
               </div>
          </div>
     </body>
</html>

В браузере мы увидим простой маркированный список.

Далее создаём файл style.css и пишем обычные стили (пока ничего нового и сложного).

body {
background: #aa79b1;
}
.menu-main{
width:200px;
margin:0 auto;
overflow:hidden;
padding: 20px 0 0 0;
}
.menu ul li{
list-style: none;
}
.menu ul li a{
color: #000;
}

В браузере видим нечто отдалённо похожее на нашу задумку.

Теперь создаём нашу самую главную панель, на которую должен будет нажимать пользователь и будет плавно появляться выпадающее меню.

<a id="pull" href="#">Меню</a>

Эту панель следует прописать в блоке div с классом "menu-main".

<div class="menu-main">
     <a id="pull" href="#">Меню</a>
     <div class="menu">
          <ul>
               <li><a href="#">Пункт1</a></li>
               <li><a href="#">Пункт2</a></li>
               <li><a href="#">Пункт3</a></li>
               <li><a href="#">Пункт4</a></li>
               <li><a href="#">Пункт5</a></li>
          </ul>
     </div>
</div>

И пишем стили для этой панели.

#pull{
background: #4e1c55;
display:block;
font-size:14px;
font-weight:bold;
color: #fff;
text-decoration:none;
padding:10px;
width:80%;
position:relative;
border: 1px solid #777;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Идём в браузер и видим вот это:

В файле style.css отодвигаем список меню влево на 35px, и делаем его невидимым.

.menu ul{
display:none;
margin-left: -35px;
}

На этом со стилями мы закончили, а теперь самое интересное.

В файле index.html между тегами head подключаем библиотеку jquery:

<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>

Сам файл вы можете скачать в конце статьи.
И ниже пишем код JavaScript.

<script>
     $(function() {
          var pull = $('#pull');
                 menu = $('.menu ul');
                 menuHeight = menu.height();         
          $(pull).on('click', function(e) {
                 e.preventDefault();
                 menu.slideToggle();
          });         
                 $(window).resize(function(){
                 var w = $(window).width();
                 if(w > 320 && menu.is(':hidden')) {
                      menu.removeAttr('style');
                 }
          });
     });
</script>

Открываем index.html в браузере и…вуаля…выпадающее меню готово! Жмём на панель и радуемся, если что-то не получилось, пишите.
Вот целиком все получившиеся файлы.

index.html

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="style.css" />
          <script src="js/jquery-1.10.1.min.js" type="text/javascript">.          
          <script>          
               $(function() {
                    var pull = $('#pull');
                           menu = $('.menu ul');
                           menuHeight = menu.height();
                    $(pull).on('click', function(e) {
                           e.preventDefault();
                           menu.slideToggle();
                    });
                    $(window).resize(function(){
                           var w = $(window).width();
                           if(w > 320 && menu.is(':hidden')) {
                                 menu.removeAttr('style');
                           }
                    });
                });
          </script>
          <title>Раскрывающееся меню</title>
     </head>
     <body>
          <div class="menu-main">
               <a id="pull" href="#">Меню</a>
               <div class="menu">
                    <ul>
                        <li><a href="#">Пункт1</a></li>
                        <li><a href="#">Пункт2</a></li>
                        <li><a href="#">Пункт3</a></li>
                        <li><a href="#">Пункт4</a></li>
                        <li><a href="#">Пункт5</a></li>
                   </ul>
               </div>
          </div>
     </body>
</html>

style.css

body {
background: #aa79b1;
}
.menu-main{
width:200px;
margin:0 auto;
overflow:hidden;
padding: 20px 0 0 0;
}
.menu ul{
display:none;
margin-left: -35px;
}
.menu ul li{
list-style: none;
}
.menu ul li a{
color: #000;
}
#pull{
background: #4e1c55;
display:block;
font-size:14px;
font-weight:bold;
color: #fff;
text-decoration:none;
padding:10px;
width:80%;
position:relative;
border: 1px solid #777;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#pull:after{
content:"";
background:url(images/icon-menu.png) no-repeat;
width:12px;
height:13px;
display:inline-block;
position:absolute;
top:12px;
right:3%;
}

Рейтинг@Mail.ru