Простое мобильное выезжающее меню

В этом материале я покажу, как создать простейшее выезжающее меню, которое будет отлично работать не только на компьютерах, но и на мобильных устройствах. Итак, сначала стили:

<style>
#mnu {
display: none;
float: left;
background:black;
padding: 10;
}

#pl {
background:green;
float: left;
color:white;
margin-left: 5px;
}

.label{
color:white;
text-decoration:none;
}
</style>

Затем верстка:

<div id="mnu" >
<div><a class="label" href="#">Главная</a></div>
<div><a class="label" href="#" >Книги</a></div>
<div><a class="label" href="#" >Журналы</a></div>
<div><a class="label" href="#" >Программы</a></div>
</div>
<div onclick="dvig();" id="pl">
<img src="art206-1.png" width=35 id="im1"/>
</div>

Скрипт:

<script type="text/javascript">
var flag=0;
function dvig() {
if (flag==0) {
$('#mnu').show("slow");
$('#im1').attr("src","art206-2.png");
flag=1;
}

else {
$('#mnu').hide("slow");
$('#im1').attr("src","art206-1.png");
flag=0;
}
}
</script>

Пара комментариев. Собственно, ничего сложного и нет. Сначала скрываем блок с меню (display: none;), далее по клику по элементу pl вызываем функцию dvig() (onclick="dvig();"). В теле самой функции проверяем, выдвинуто ли меню (переменная flag) и если нет, то с помощью анимации его выдвигаем. Дополнительно меняем src у изображения. Все.

Демонстрация







Если у вас остались вопросы по данному меню, или требуется создать что-то похожее на вашем сайте (или не очень похожее), то вы всегда можете обратиться ко мне - на почту up777up@yandex.ru. Либо сразу же постучаться в скайп up777up2 - вам будет оказана быстрая, квалифицированная и недорогая помощь по любым вопросам, связанным с сайтостроительством.