Адаптивное меню для сайта
14.12.2016 2091 Пишу Ваш комментарий wordpress, компьютерный практикумНи для кого, собственно, не секрет, что довольно долго уже никто (ну, или почти никто) не делает отдельных мобильных версий сайтов. Вместо этого создаются адаптивные, так называемые «Responsive Theme» шаблоны для сайтов обычных. То есть, особых мобильных версий нет, а всё содержимое сайта подстраивается под ширину браузера на том или ином устройстве, с которого его открывают.
Опять же не секрет, что процент мобильных устройств, с которых выходят в интернет всё больше. В связи с этим спрос на подобные шаблоны растёт и не остаётся без внимания создателей подобных тем. В самом деле, в официальном репозитории того же вордпресса, например, подобных тем более половины.
Однако, количество людей, желающих создать собственную адаптивную тему, никак не уменьшается. В связи с этим, приходится выбирать тот или иной инструмент для решения подобной задачи. Чаще всего используют бутстраповскую сетку для разметки основных блоков сайта. Она гибкая и встраивается в любую CMS. Материалов на эту тему в сети чуть больше, чем просто много. Поговорим же в этой статье о таком элементе как адаптивное меню. Тот факт, что подобный механизм я использую в вордпрессе, лишь частный случай. С тем же успехом подобное меню можно использовать в любом движке. Моя задача сегодня — показать вам как можно подобную навигацию по сайту реализовать.
Собственно меню
Приглядитесь к меню на моём сайте. В нём рассоложены ссылки на несколько ( не все) рубрики и на главную страницу. В общем. Всё меню состоит из трёх слагаемых — собственно меню (свёрстано в виде маркированного списка), таблица стилей — css, где расписано как именно я хочу отображать своё меню и маленький кусок кода для библиотеки JQuery, но обо всём по порядку.
Я уже сказал, что меню свёрстано как маркированный список, выглядит оно так:
<nav class=”main_menu”>
<a href=”#” id=”pull”>Меню <i class=”fa fa-bars” aria-hidden="true"></i></a>
<ul>
<li><a href=”<?php bloginfo(‘url’); ?>”>Главная</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/photos”>Снимаю</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/articles”>Пишу</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/videos”>Видео</a></li>
<li><a href=”<?php bloginfo(‘url’); ?>/photographer”>Я – фотограф</a></li>
</ul>
</nav>
Если вы обратите внимание на главное меню сайта — откроете html-код страницы — сможете убедиться, что я привёл именно его текст. Впрочем, вместо вордпрессовской конструкции
<?php bloginfo(‘url’); ?>
вы увидите домен моего сайта. Ещё на сайте установлен иконочный шрифт «Font Awesome» и конструкция
<i class=”fa fa-bars” aria-hidden="true"></i>
выводит символ .
Первая ссылка
<a id="pull" href="#">Меню <i class=”fa fa-bars” aria-hidden="true"></i></a>
видна только на маленьких разрешениях, это прописано через css — каскадные таблицы стилей. Она отображается вместо собственно меню и позволяет на малых разрешениях его открывать, но обо всём по-порядку.
Стили
Привожу css-стили.
.main_menu {}
.main_menu ul {
list-style-type: none; //убираю стили вывода маркеров для всего списка
margin: 0; //сбрасываю границы вокруг всего списка в ноль
padding: 0; //внутренние отступы тоже сбрасываю в ноль
}
.main_menu ul li {
display: inline; //элементы списка делаю строчными (меню отображается в строчку)
float: none; //сбрасываю float, если свойство было установлено для списков
border-bottom: 2px solid transparent; //прозрачная рамка в 2px снизу от каждого элемента меню
}
.main_menu ul li:hover {
border-bottom: 2px solid #b99128; //при наведении мышки рамка снизу будет этого цвета
}
.main_menu ul li a {
color: #ccc; //задаю основной цвет для ссылок меню
text-decoration: none; //не хочу, чтобы ссылки были подчёркнутыми
}
.main_menu ul li a:hover {
color: #fff; //при наведении мышки цвет ссылок – белый
text-decoration: none; //при наведении мышки ссылка тоже не подчёркивается
}
.main_menu a#pull {
display: none; //ссылку «меню» делаем невидимой изначально
}
.main_menu a#pull i {
float: right; //значок менюшки прижимаем к правому краю
}
Таковы начальные настройки css, внесённые в файл стилей. Кроме этого, разумеется, у меня указана высота всего меню, гарнитура и размер шрифта. Позвольте мне не приводить тут полного списка стилей. В конце концов, если вам станет любопытно, то инспектор кода в браузерах никто не отменял — изучайте.
Далее в блоке media-описаний css указаны стили для маленьких — менее 530 пикселей разрешений в браузерах. То есть описаны стили меню для мобильных устройств.
@media only screen and (max-width: 530px) {
.main_menu {
height: auto; //высота блока меню будет подстраиваться под содержимое
}
.main_menu ul {
display: none; //прячу меню для малых экранов
height: auto; //высота собственно меню тоже будет подстраиваться
}
.main_menu ul li {
display: block; //элементы меню блочные – занимают всю ширину экрана и выводятся один под другим, а не в строчку
}
.main_menu a#pull {
display: block; //отображаем ссылку «меню»
}
}
Программная часть
Теперь на сайте необходимо подключить и запустить библиотеку «JQuery». Коль скоро мой сайт на вордпрессе, делается это просто — вызовом функций wp_head() и wp_footer(). Первую вызывают последней директивой в хэдере.
<head> … <?php wp_head(); ?> </head>
Вторую функцию необходимо вызывать непосредственно перед закрывающим тегом body в самом низу темы.
... <!--?php wp_footer(); ?--> </body> </html>
Наконец, когда само меню опубликовано, все стили для него прописаны и библиотека «JQuery» запущена, остаётся только запрограммировать поведение меню при нажатии на соответствующую ссылку. Не забудьте подключить файл с javascript, где описан код. Код будет такой:
$(function() {
//Responsive Menu
var pull = $('#pull'),
menu = $('.main_menu ul');
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 531 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
}
Собственно, это всё. Теперь на сайте есть адаптивное меню, внешний вид и поведение которого зависит напрямую от разрешения устройства, с которого открыт сайт. Пользуйтесь.