Одной из самых сложных частей респонсивности веб-сайта является его “Навигация”. Этот функционал является очень важным элементом, так как это один из самых главных способов посетителей увидеть все страницы вашего веб-сайта. Сущевствует много способов по созданию респонсив навигации для веб-сайта и даже есть jQuery плагины, которые могут предоставить готовый функционал за минуты.
В этой статье мы покажем вам как построить простую навигацию с нуля при помощью CSS3 Media Queries и jQuery таким образом, чтобы она правильно отображалась на экране мобильного телефона.
HTML
Прежде всего, давайте добавим мета просмотр в хедер. Этот мета тег просмотра необходим для того, чтоб наша страница масштабировалась должным образом внутри экрана любого размера, особенно при использовании мобильного устройства. Плюс мета тэг для отображения кириллицы:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
… а затем добавляем следующий фрагмент в качестве навигационной разметки внутри body тега:
<nav class="clearfix"> <ul class="clearfix"> <li><a href="#">Главная</a></li> <li><a href="#">Уроки</a></li> <li><a href="#">Картинки</a></li> <li><a href="#">Дизайн</a></li> <li><a href="#">Web 2.0</a></li> <li><a href="#">Плагины</a></li> </ul> <a href="#" id="pull">Меню</a> </nav>
Как вы видите выше, у нас есть шесть основных пунктов меню и добавлена еще одна ссылка за ними. Эта дополнительная ссылка будет использована, чтобы показать навигацию по меню, когда оно спрятано в небольшом экране.
Стили
В этом разделе мы применим CSS стили к навигации. Стиль здесь будет просто декоративным, вы можете выбрать любой цвет по вашему желанию. Но в этом случае, мы (лично) хотим стилизовать под мягкие синие тона!
body {
background-color: #ece8e5;
}NAV тег, который определяют навигацию, будет 100% во всю ширину окна браузера, в то время как ul, где содержится наша основная ссылка на меню будет 600px по ширине.
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}Затем мы передвинем меню ссылок влево, так они будут отображаться горизонтально рядом друг с другом, но двигающейся элемент также будет вызывать родительский (parent) коллапс.
nav li {
display: inline;
float: left;
}Если вы заметили из разметки HTML выше, мы уже добавили Clearfix класс для nav и ul, чтобы очистить вещи вокруг, когда мы передвигаем элементы внутри него с помощью CSS3 Clearfix хака. Итак, давайте добавим следующие правила стиля в таблицу стилей.
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}Так как у нас в меню есть шесть ссылок, мы указываем контейнер на 600px, таким образом, у каждой ссылки меню будет 100 пикселей по ширине.
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}Ссылки меню будут разделены 1px правой границой, за исключением последнего. Так как ширина меню будет расширена на 1px, что сделает его 101px при использовании дополнительной границы, так что здесь мы меняем box-sizing модель на border-box, чтобы меню сохранялось в 100px:
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}Далее, у меню будет яркий цвет, когда он находится в :hover или :active состояние:
nav a:hover, nav a:active {
background-color: #8c99a4;
}… И, наконец, дополнительные ссылки будут скрыты (для рабочего стола):
nav a#pull {
display: none;
}На данный момент, мы только стилизуем навигацию и ничего не будет работать при изменении окна браузера. Итак, давайте перейдем к следующему шагу.
Media Queries
CSS3 Media Queries используется для того, чтобы определить, как стили будут смещаться в определенных точках остановки или на разных размерах экрана. Так как наша навигация изначально была 600px фиксированной ширины, то в начале мы укажем стили, когда она будет просматриваться в 600px или меньшим размером экрана, так что, практически говоря, это наша первая точка остановки.
В этом размере экрана, каждый из двух пунктов меню будет отображаться рядом друг с другом, поэтому ul ширина здесь будет 100% окна браузера, в то время как меню ссылок будет 50% ширины.
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}… И потом, мы также определяем как навигация будет отображатся, когда экран меньше 480px (так что это наша вторая точка остановки).
В этом размере экрана, дополнительная ссылка, которую мы добавили, станет видимой, мы также добавим иконку ☬ ( Unicode 262D) и сместим ее на правую сторону используя :after псевдо-элемент, в то время как основные ссылки меню будут скрыты, чтобы сохранить вертикальное пространство на экране.
@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"\262D";
width: 30px;
height: 30px;
font-size:30px;
display: inline-block;
position: absolute;
right: 20px;
top: 0px;
}
}
Наконец, когда экран становится меньше 320px, меню будет отображаться вертикально, сверху вниз.
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}Вы можете попробовать изменить размер окна браузера. Теперь оно должно быть в состоянии адаптироваться под размер экрана.
Показ меню
На данный момент, меню будет по-прежнему скрыто и будет видно только, когда это необходимо, нажав на него или нажав на кнопку “Меню”. Сделать это мы сможем при помощью JQuery slideToggle ().
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});Однако, при изменении размеров окна браузера сразу после того, как вы только его просмотрели и спрятали в маленький экран, меню будет оставаться скрытыми, так как display:none стиль порожденный JQuery будет еще привязан к элементу.
Итак, нам нужно, удалить этот стиль при изменение размера окна, а именно:
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});Вот и весь код, который нам нужен для создания респонсив меню. Удачи в ваших разработках!
Высоких конверсий!
