Як створити висувається навігацію в мобільному стилі

17

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

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

Ось як воно буде виглядати, коли ми все закінчимо. А якщо хочете подивитися код повністю, то можете завантажити його тут.

Почнемо з розмітки

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

Full-height Screen Off Menu

Full Height Screen Off Menu

  • Home
  • About
  • Work
  • Blog
  • Contact
Home
About
Work
Blog
Contact

Article Title

Published 25th February 2014

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. Read more →

Etc.

Published 25th February 2014

… Read more →

< Older Posts

Тепер деталізуємо! Єдине, що варто відзначити в тегу 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; }

Відкинемо дещо, переконавшись, що якщо в браузері користувача не включений 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; }

В цьому фрагменті ми призначаємо стилі іконки меню у верхньому колонтитулі, і це досить просто – всього лише визначаємо їй відносне позиціонування і високий 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; }

Останнє, але не менш важливе – це основне меню. Я повинен спочатку попередити вас, що це дуже спрощений код, якому буде потрібно деяку кількість вендорних префіксів до того, як він стане кроссбраузерным. Щоб домогтися цього, я рекомендую застосувати такий дивовижний інструмент, як 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(‘☰’);
$(‘#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, а так само деякими іншими корисними інструментами. Дайте мені знати в розділі коментарів, що ви зробили б по-іншому, або просто що ви про це думаєте!