В этой статье я расскажу вам, как сделать выпадающее меню с помощью HTML, CSS и Java Script. Идея такая: жмём на панель, и выпадает список меню. Эта тема полезна для адаптивной верстки под планшеты и мобильные устройства.
Выглядеть наше выпадающее меню после нажатия на панель будет вот таким образом:
Итак, идём в редактор и создаём файл index.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 и пишем обычные стили (пока ничего нового и сложного).
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;
}
В браузере видим нечто отдалённо похожее на нашу задумку.
Теперь создаём нашу самую главную панель, на которую должен будет нажимать пользователь и будет плавно появляться выпадающее меню.
Эту панель следует прописать в блоке div с классом "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>
И пишем стили для этой панели.
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, и делаем его невидимым.
display:none;
margin-left: -35px;
}
На этом со стилями мы закончили, а теперь самое интересное.
В файле index.html между тегами head подключаем библиотеку jquery:
Сам файл вы можете скачать в конце статьи.
И ниже пишем код JavaScript.
$(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
<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
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%;
}
Скачать исходники.