Дизайн та розробка сайту

Адаптивное меню, появление меню при нажатии

Адаптивное меню

Доброго времени суток 🙂

Сегодня поделюсь с Вами одним из способов, как сделать адаптивное меню на сайте. Данное меню можно организовать для адаптивного сайта. Например чтобы оно появлялось при определенном разрешении экрана. В этой статье будет простейший пример такого меню.

Адаптивное меню

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

В примере я покажу как примерно будет выглядеть меню, отображаться оно будет постоянно, но потом я покажу как показывать его только на мобильных устройствах. Что же, не будем затягивать, приступим к инструкции.





Наше меню будет использовать jQuery поэтому в самом начале нужно убедиться в том что на сайте подключена эта библиотека. Скорее всего, если Вы используете какую-то систему, то это уже сделано, но все же открыв исходный код страницы посмотрите есть ли там строка, которая похожа на такую:

Чтобы просмотреть исходный код страницы, нажмите правой кнопкой мыши по сайту в любом месте и найдите пункт меню который даст возможность сделать просмотреть код. У каждого браузера называется по своему, но примерно - Исходный код страницы. Чаще всего схожая строчка находится в шапке или подвале. Она может отличаться, путь к библиотеке может быть разный, другая версия и тд, но в ней точно есть название jQuery.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Если такой строки нет, то можете пока пропустить данный шаг, но если у Вас в конце меню не заработает, добавьте эту строку шапку или подвал перед скриптом меню.

Для работы нашего будущего меню, понадобится небольшой скрипт, который можно подключить или в виде отдельного файла или просто как код. Если Вы подключаете отдельный файл то создайте его, например script.js и внутрь него добавьте код. После подключите его указав правильно путь. Например если он лежит в папке js, которая рядом с файлами шапки и подвала, путь будет таким - js/script.js

<script type="text/javascript" src="script.js"></script>

Если хотите вставить код просто в тело сайта то заключите его в теги:

<script type="text/javascript">
// СЮДА КОД!!!
</script>

Ну и наконец то сам код:

jQuery(document).ready(function($){
$('.menu-body').hide();
$('.menu-title').click(function(){$(this).next().toggle()});
});

Эта простейшая функция затрагивает 2 блока. Заглавие меню и тело самого меню. Если захотите сменить имена классов, то следует их менять и в скрипте.

Теперь добавим HTML код меню. Выглядеть он будет примерно так;

<div id="adapt">
<div class="menu-title"></div>
<div class="menu-body">
<ul>
<li>Пункт меню 1</li>
<li>Пункт меню 2</li>
<li>Пункт меню 3</li>
<li>Пункт меню 4</li>
</ul>
</div>
</div>

Разберем код по порядку. Все меню заключено в общий контейнер с ID - adapt. Далее выводим блок с заглавием нашего меню, который имеет класс - menu-title. Данный блок видно всегда, ну или при определенном разрешении, тут как Вы укажите. Он выводит иконку и название Меню. У нас это просто - МЕНЮ.

Дальше уже идет блок с самим меню и имеет он класс - menu-body. Внутри этого блока можете разместить любое меню, все что хотите. В нашем случаи, для примера я просто вывел обычный ul-список.

Как упомянул выше если захотите переименовать классы, то делайте это и в скрипте выше.

Последним штрихом в запуске меню - будет добавление стилей. Добавить их можно в любое место Вашего файла стилей, который может называться, например - style.css.

/*Адапт меню*/
#adapt{text-align:center;background:#333;line-height:45px;position:relative;color:#fff;}

.menu-title:after{content:"Меню";position:absolute;top:0px;right:-45px;color:#fff;line-height:35px;}
.menu-title{position:relative;background:url(menu.png) no-repeat center;width:30px;height:35px;margin:0 auto;}

.menu-body{position:relative;z-index:2;margin-top:10px;}
.menu-body li{line-height:35px;}

В виде иконки из трех полосочек используется просто картинка, ее название menu.png. Укажите правильный путь, если картинка лежит в какой-то папке или отдельно от файла стилей. Можете скачать ее, сохранив себе на компьютер. Сделать это можно правой кнопкой мыши, нажав на нее и выбрав пункт - "Сохранить изображение". Так же вы можете добавить свою картинку назвав ее menu.png или вовсе вместо картинки использовать иконку из шрифта. Как это сделать, можете прочитать в статье - Иконки из шрифта Font Awesome

Меню должно работать и отображаться постоянно. Если это Вам и нужно то это все. Чтобы настроить его появление только для мобильных устройств, то нужно внести некоторые изменения в CSS стили.

Блоку с айди - adapt, нужно добавить свойство - display:none; После этого меню исчезнет, чтобы оно появлялось при малом размере нужно добавить такие строки к нашим стилям.

@media (max-width: 480px) {
#adapt{display:block;}
}

Данные стили указывают, что если разрешение равно 480 пикселям и меньше, показывать наше меню. Разрешение можете менять под себя и указывать что хотите. Если Вы выводите данное меню вместо какого-то другого, которое отображается в обычном размере сайта, как это делаю я у себя на сайте, то Вам нужно добавить схожие стили и своему меню, но наоборот.

Получится что изначально у Вашего обычного меню свойство - display:block; а уже при 480(или как вы зададите) пикселях наоборот указать - display:none; Тоесть при появлении адаптивного меню, обычное исчезнет.

Например в обычного меню айди - #menu. Тогда примерные стили будут такими:

@media (max-width: 480px) {
#adapt{display:block;}
#menu{display:none;}
}

Думаю тут все понятно. Сделав все правильно, Вы получите желаемый результат. Вы можете все подогнать под свои нужды и настроить идеальное адаптивное меню для своего сайта. Я часто использую данный способ и он меня никогда не подводил.

На этом все, спасибо за внимание. 🙂

Дизайн та розробка сайту

Back to top