Как создать выдвигающуюся навигацию в мобильном стиле

Дата публикации: 2014-06-11

Выдвигающаяся навигация в мобильном стиле

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

Чтобы добиться этого, мы применим пару разных методов, один из которых -flexbox, в настоящее время ставший настоящим модным словечком и «святым Граалем» методов веб-разметки. Мы воспользуемся им для того, чтобы меню подходило к высоте окна. Кроме того, мы так же применим jQuery для функциональности меню, заставим его выскальзывать при событии щелчка, а также обеспечим альтернативный вариант для тех, у кого отключен в браузера JavaScript (это определится с помощью Modernizr’а).

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

Начнем с разметки

Сначала рассмотрим применяемый в нашем демо-примере файл index.html – я покажу вам все, что в нем находится, а за тем можно будет детально рассмотреть его составляющие и важные части:

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

Узнать подробнее

До 10 проектов в портфолио для старта карьеры

Подходит для новичков без опыта в программировании

Практика на вебинарах с разработчиками из крупных компаний

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Full-height Off Screen Menu</title>
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400italic,400,700'rel='stylesheet' type='text/css'>
<link rel="stylesheet"href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<scriptsrc="js/modernizr.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header class="cf">
<h1>Full Height Off Screen Menu</h1>
<ahref="#" id="navicon" class="closed">&#9776;</a>
<ul id="fallback-nav">
<li><ahref="#" class="current">Home</a></li>
<li><ahref="#">About</a></li>
<li><ahref="#">Work</a></li>
<li><ahref="#">Blog</a></li>
<li><ahref="#">Contact</a></li>
</ul>
</header>
<nav id="main-nav">
<ahref="#" class="current"><div>Home</div></a>
<ahref="#"><div>About</div></a>
<ahref="#"><div>Work</div></a>
<ahref="#"><div>Blog</div></a>
<ahref="#"><div>Contact</div></a>
</nav>
<div id="main-content">
<article>
<h2><ahref="#">Article Title</a></h2>
<span class="date">Published 25th February 2014</span>
<p>Loremipsum dolor sit amet, consecteturadipiscingelit. Integer necodio. Praesentlibero. Sedcursus ante dapibus diam. Sed nisi. Nullaquissem at nibhelementumimperdiet. Duissagittisipsum. Praesentmauris. Fuscenectellussedaugue semper porta. Maurismassa. Vestibulumlaciniaarcuegetnulla. Class aptenttacitisociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Curabitursodales ligula in libero. Seddignissimlacinianunc. <ahref="#">Read more &rarr;</a></p>
</article>
<article>
<h2><ahref="#">Etc.</a></h2>
<span class="date">Published 25th February 2014</span>
<p>... <ahref="#">Read more &rarr;</a></p>
</article>
<p><ahref="#" class="older">&lt; Older Posts</a></p>
</div>
<div id="fade"></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"src="js/scripts.js"></script>
</body>
</html>

<!doctype html>

<head>

<title>Full-height Off Screen Menu</title>

<scriptsrc="js/modernizr.js"></script>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1>Full Height Off Screen Menu</h1>

<ahref="#" id="navicon" class="closed">☰</a>

<li><ahref="#">About</a></li>

<li><ahref="#">Contact</a></li>

</ul>

</header>

<ahref="#" class="current"><div>Home</div></a>

<ahref="#"><div>About</div></a>

<ahref="#"><div>Work</div></a>

<ahref="#"><div>Blog</div></a>

<ahref="#"><div>Contact</div></a>

</nav>

<h2><ahref="#">Article Title</a></h2>

<span class="date">Published 25th February 2014</span>

<p>Loremipsum dolor sit amet, consecteturadipiscingelit. Integer necodio. Praesentlibero. Sedcursus ante dapibus diam. Sed nisi. Nullaquissem at nibhelementumimperdiet. Duissagittisipsum. Praesentmauris. Fuscenectellussedaugue semper porta. Maurismassa. Vestibulumlaciniaarcuegetnulla. Class aptenttacitisociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Curabitursodales ligula in libero. Seddignissimlacinianunc. <ahref="#">Read more →</a></p>

</article>

<span class="date">Published 25th February 2014</span>

</article>

</div>

</body>

</html>

Теперь детализируем! Единственное, что стоит отметить в тэге head — то, что мы вызываем несколько шрифтов GoogleFonts. Так же ссылаемся на файл css и файл modernizr.js, который можно скачать здесь и которым мы воспользуемся для определения, включен ли в браузере пользователя JavaScript для того, чтобы можно было предусмотреть альтернативный вариант (вот почему у тэга html с самого начала имеется класс no-js для страницы по умолчанию, которая станет появляться при отключенном JavaScript’е, а если он включен, то Modernizr нам поменяет имя класса).

Далее единственной интересной «фишкой» нашей альтернативной навигации является ul с id fallback-nav в header, а также ссылка с id navicon, которая будет основной ссылкой, применяемой для создания нашего эффекта. А далее nav с id main-nav, который станет (как можно догадаться) основной применяемой в эффекте навигацией. Единственным используемым в этом эффекте элементом станет тот самый последний div с ID fade: он станет черным покрытием, затемняющим содержимое при нажатии иконки меню.

Наконец, мы вызываем jQuery из Google и свой собственный файл скрипта, над чем мы через некоторое время и поработаем. Но сначала давайте рассмотрим стили.

Стили CSS

Мы не станем рассматривать все стили CSS (если хотите, можете изучить их или посмотреть источник (viewsource) в демо примере), так как они по большей части используются для общих стилей страницы, что не является целью этой статьи. Так что мы пропустим их, а рассмотрим лишь те несколько отрывков, которые важны для нашего эффекта. И так, во-первых:

html.no-js#fallback-nav{ display: block; }
html.no-js.fade{ display: none; }
html.no-js#navicon{ display: none; }
html.js#fallback-nav{ display: none; }

html.no-js#fallback-nav{ display: block; }

html.no-js.fade{ display: none; }

html.no-js#navicon{ display: none; }

html.js#fallback-nav{ display: none; }

Отбросим кое-что, убедившись, что если в браузере пользователя не включен JavaScript (это то самое имя класса элемента HTML, которое мы ранее видели в Modernizr’е), то мы покажем в верхнем колонтитуле #fallback-nav, а также скроем DIV #fade и иконку навигации. Это – наше альтернативное решение, поэтому назначать стили меню нужно в более традиционной манере. Кроме того, мы скрываем это решение при включенном JavaScript’е, как видно из последней строки кода.

#navicon{
float: right;
font-size:2em;
text-decoration: none;
position: relative;
z-index:9; }

#navicon.open{ color: white; }
#navicon.open:hover{ color: #e6e6e6; }
#fade{
position: fixed;
top:0;
right:0;
bottom:0;
left:0;
background: #000;
opacity:0.5; }

#navicon{

float: right;

font-size:2em;

text-decoration: none;

position: relative;

z-index:9; }

#navicon.open{ color: white; }

#navicon.open:hover{ color: #e6e6e6; }

#fade{

position: fixed;

top:0;

right:0;

bottom:0;

left:0;

background: #000;

opacity:0.5; }

В этом фрагменте мы назначаем стили иконке меню в верхнем колонтитуле, и это довольно просто – всего лишь определяем ей относительное позиционирование и высокий z-index (что нам пригодится впоследствии: когда остальное содержимое будет затемнено, она останется сверху). Также меняем цвет на белый, когда иконка открывается и получает класс open, который мы станем добавлять и убирать с помощью jQuery. Так же видно, что отдельный div с id fade растянут для покрытия всего экрана полностью и наполнен плотным черным цветом с 50%-ной непрозрачностью. Если у пользователя нет JavaScript’а, то этот черный фильтр будет скрыт, а если есть, то мы скроем его с помощью jQuery. Теперь давайте рассмотрим само меню:

#main-nav{
position: fixed;
height:100%;
top:0;
right: -250px;
background: #222;
max-width:250px;
width:100%;
z-index:5;
text-align: center;
display: flex;
flex-direction: column; }

#main-nav a{
flex:1;
color: white;
border-top:1px solid #555;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center; }
#main-nav a:hover, #main-nav a.current{ background: #3c3c3c; }

#main-nav{

position: fixed;

height:100%;

top:0;

right: -250px;

background: #222;

max-width:250px;

width:100%;

z-index:5;

text-align: center;

display: flex;

flex-direction: column; }

#main-nav a{

flex:1;

color: white;

border-top:1px solid #555;

text-decoration: none;

display: flex;

flex-direction: column;

justify-content: center; }

#main-nav a:hover, #main-nav a.current{ background: #3c3c3c; }

Последнее, но не менее важное – это основное меню. Я должен сначала предупредить вас, что это весьма упрощенный код, которому потребуется некоторое количество вендорных префиксов до того, как он станет кроссбраузерным. Чтобы этого добиться, я рекомендую применить такой удивительный инструмент, как Autoprefixer, который добавит все правильные префиксы вместо вас.

Теперь можно рассмотреть, что влечет за собой такой код: во-первых, он фиксирует позиционирование меню вверху страницы и отрицательные 250px справа. Это означает, что оно находится там, но скрыто (так как его max-width составляет 250px). Высота составляет 100%, поэтому меню заполняет окно полностью сверху до низу. Кроме того, меню требуется z-indexот 0 до 9 (над черным фильтром). Далее, вот в чем заключается все волшебство – у него имеется свойство display: flex;, а так же еще одно связанное свойство flex-direction (которое мы здесь установили на column вместо значения по умолчанию row, это означает, что дочерние элементы flex— ссылки меню — заполнят всю высоту своего родительского элемента равными частями).

Все эти стили нацелены на содержащий меню элемент #main-nav, далее при определении стилей ссылок мы назначаем им значение flex1. Именно оно заставляет ссылки поровну заполнять всю высоту. Затем им определяется значение display flex, это означает, что любые элементы внутри ссылок также подвергнутся его влиянию. Убеждаемся, что flex-direction все еще имеет значение column, а затем добавляем свойство justify-content: center;. Это значит, сам текст внутри ссылок то же центрируется по вертикали (вот отчего внутри тэгов a в #main-nav есть div’ы, что является не очень семантическим, но быстрым и легким способом отцентрировать элементы по вертикали.)

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

Добавление функциональности с помощью jQuery

Скрипт этого эффекта очень маленький и простой, и сначала я помещу его здесь полностью, а затем объясню, что происходит:

$(document).ready(function() {
    $('#fade').hide();
    $('#navicon').click(function() {
if($('#navicon').hasClass('closed')) {
            $('body').animate({left: "-250px"}, 400).css({"overflow":"hidden"});
            $('#main-nav').animate({right: "0"}, 400);
            $(this).removeClass('closed').addClass('open').html('x');
            $('#fade').fadeIn(); }
elseif($('#navicon').hasClass('open')) {
            $('body').animate({left: "0"}, 400).css({"overflow":"scroll"});
            $('#main-nav').animate({right: "-250px"}, 400);
            $(this).removeClass('open').addClass('closed').html('&#9776;');
$('#fade').fadeOut(); }
    });
});

$(document).ready(function() {

$('#fade').hide();

$('#navicon').click(function() {

if($('#navicon').hasClass('closed')) {

$('body').animate({left: "-250px"}, 400).css({"overflow":"hidden"});

$('#main-nav').animate({right: "0"}, 400);

$(this).removeClass('closed').addClass('open').html('x');

$('#fade').fadeIn(); }

elseif($('#navicon').hasClass('open')) {

$('body').animate({left: "0"}, 400).css({"overflow":"scroll"});

$('#main-nav').animate({right: "-250px"}, 400);

$(this).removeClass('open').addClass('closed').html('☰');

$('#fade').fadeOut(); }

});

Итак, сначала скрываем черный фильтр. Затем все, что мы делаем, будет находиться внутри функции, прикрепленной к событию щелчка, в свою очередь привязанного к ссылке иконки меню. При щелчке у нас происходят два разных случая, или ситуации; первая – когда меню уже скрыто (как при состоянии по умолчанию),или когда меню показывается. Так, у иконки меню имеется добавленное нами имя класса closed, а также мы назначили стили для open. Наше первое if-выражение предназначено для состояния, когда ссылка закрыта(closed) (следовательно, по умолчанию). Если это подходящий случай, то весь элемент body анимируется на 250px влево и останавливается прокрутка страницы. Div #main-nav также анимируется на свое место, мы меняем его правое значение с -250px до 0. Затем удаляем класс closed из ссылки и добавляем open, а также меняем html со специального символа из трех линий на x. Наконец, усиливаем черный фильтр для затемнения остального содержимого. Вот и все! Так у нас получается состояние открытого меню.

Теперь выражение elseif нацелено на класс open ссылки меню. Меняем в обратную сторону все, что сделали до этого, сдвигая body обратно в позицию, а также снова смещая меню за экран. Удаляем класс open из иконки меню, добавляем closed, меняем содержимое обратно на иконку и убираем затемнение div’а #fade. Если все пойдет по плану, то вот как должна смотреться функциональность:

Заключение

У нас все получилось! Это – один из способов создать классный эффект в стиле современного веб-дизайна, который все чаще и чаще заметно, особенно в дизайне сайтов для мобильных устройств. Этот эффект – не требующее плагинов красивое и простое решение, которое можно полностью модернизировать под любой проект. Кроме того, это шанс воспользоваться flexbox, а так же некоторыми другими полезными инструментами. Дайте мне знать в разделе комментариев, что вы сделали бы по-другому, или просто что вы об этом думаете!

Автор: Harry Atkins

Источник: //www.webdesignerdepot.com/