Доброго времени суток 🙂
Сегодня поделюсь с Вами одним из способов, как сделать адаптивное меню на сайте. Данное меню можно организовать для адаптивного сайта. Например чтобы оно появлялось при определенном разрешении экрана. В этой статье будет простейший пример такого меню.
Данное меню я применил и на своем сайте и оно появляется на мобильных устройствах, вместо обычного меню которое расположено в шапке. Такое меню удобно использовать на мобильных устройствах, то есть не нужно напрягаться чтобы попасть по пунктам. Все работает от нажатия, ведь на мобильных устройствах нет наведения мышью.
В примере я покажу как примерно будет выглядеть меню, отображаться оно будет постоянно, но потом я покажу как показывать его только на мобильных устройствах. Что же, не будем затягивать, приступим к инструкции.
Наше меню будет использовать 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;}
}
Думаю тут все понятно. Сделав все правильно, Вы получите желаемый результат. Вы можете все подогнать под свои нужды и настроить идеальное адаптивное меню для своего сайта. Я часто использую данный способ и он меня никогда не подводил.
На этом все, спасибо за внимание. 🙂