На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

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


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

<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 - вам будет оказана быстрая, квалифицированная и недорогая помощь по любым вопросам, связанным с сайтостроительством.




тегизаметки, сайты, javascript, меню





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




JavaScript фреймворки
Разработка сайтов


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.