Навигационно меню с помощта на Flexbox

Малко гъвкавост и кутия

Всички знаем от дълго време, че след като нашият любим браузър, Internet Explorer 9, излезе от друг болезнен кръг на поддръжка, Flexbox най-накрая ще намери своята ниша.

Практика и кратка информация:

Теория:

Референции:

Поддръжка на браузър

Да, IE10 поддържа стария синтаксис, но това не е проблем за Autoprefixer.

навигационно

Споразумения

За да сме на една и съща вълна, ще ви припомня споразуменията и инструментите, които използвам:

О, как ми се иска просто да копирам кода от проекта, но не - използвам препроцесора Jade HTML, чийто синтаксис се основава на идентификация и може да не е ясен за читателя. Освен това highlight.js няма поддръжка за своя синтаксис. Ще трябва да копирате вече компилираната версия.

И така, първата стъпка е да дефинирате най-простите стилове, които всеки влачи от проект на проект. За да спестя място, ги написах в компактен „режим“.

Сега е време да обърна внимание на класа площ, който съм посочил и отбелязал в маркирането по-горе. Въпросът е, че не посочвам всеки път размера на контейнера - имам този клас за това. Неговите свойства са както следва:

Това завършва с подготовката на основата. Сега нека дефинираме визуалните стилове за компонента на менюто за навигация, който разработваме. Селекторът на главния компонент ще изглежда така:

1. Разбира се, всички променливи се инициализират по-рано, просто не го споменавам в статията, защото няма смисъл.

2. Сенките се генерират от библиотеката за материални сенки, която може да бъде инсталирана чрез мениджъра на пакети Bower: bower i --save-dev material-shadows.

Нека се отклоним от суровите кодови линии и да видим каквоправи свойството justify-content. Това изображение показва какво беше:

Сега вижте какво стана:

Не е лошо, нали? Ако не използвахме Flexbox, ще трябва да добавим свойство float поне към селектора на марката, превключвателя, списъка и елемента. И не просто добавяйте свойства, но се уверете, че те се показват нормално при различни условия.

Стилизиране на основните елементи

Нека започнем с основния (визуален) стил на основните елементи на нашия компонент.

Списък с елементи от менюто

Първо трябва да дефинирате основните стилове за елементите от менюто:

Този лист код трябва да бъде обяснен малко, преди да преминем към други елементи на нашия компонент.

Първо казваме на селектора на списъка да стане гъвкав контейнер с главна ос, която е хоризонтална и една линия, а елементите са центрирани върху напречната ос.

Трето, за всеки случай посочваме размера на шрифта за елемента от менюто, тъй като понякога нещо може да се обърка.

Превключвател на състоянието

За удобство нека скрием списъка с елементи от менюто, като променим стойността на свойството му dispaly на none.

Сега можете да направите този бутон. Ние рутинно предефинираме всички стилове на бутони, за да ги лишим от стандартния вид за всички браузъри:

Да поработим върху иконата на хамбургер.

Аз съм мързелив човек и всеки път, когато се направи нещо тривиално и рутинно, веднага ми хрумва идеята да го сложа в модул, за да се отърва от копирането на стилове от проект в проект. В нашия случай модулът може да е файл с по-малко, съдържащ някакъв вид примеси. Така се ражда малката библиотека с икони на хамбургер, която просто генерира икона на хамбургер и ви позволява да я анимирате.

Интелигентният читател се е досетил какво оставапросто свържете тази библиотека към проекта и извикайте няколко миксина. Ето как ще го направим:

Страхотно, сега можете да премахнете този бутон от погледа и да работите върху логото. Засега просто променете стойността на свойството display на превключващия селектор на none. Ще се върнем към това.

Тази част от статията е проста. Просто трябва да разберете, че логото може да бъде картина или, в бюджетната версия, текст.

Веднага ще направя резервация, че опцията с картината няма да бъде взета предвид, тъй като там просто трябва да посочите изображението във фоновото изображение и да коригирате стойността на свойството марж според неговия размер.

Сега ще подобрим леко текста си и предлагам да поработим със снимки, ако е необходимо:

Това е мястото, където основният стил свършва.

Регулиране на поведението на елементите

Нека да преминем към нормализиране на дисплея на нашия компонент на навигационното меню. По логични причини трябва да бъдат изпълнени следните условия:

  • Логото винаги трябва да се показва.
  • Бутонът за превключване на списъка с елементи от менюто трябва да се вижда само на устройства с малък екран.
  • Списъкът с елементи от менюто трябва да бъде скрит на малки устройства и винаги да се показва на големи.

Тук е полезен принципътмобилните на първо място (Mobile First).

Въз основа на списъка по-горе, ние не докосваме логото. Показва се, показва се и винаги ще се показва.

Следващ по ред е бутонът за превключване на състоянието на менюто. Първоначално трябва да се показва, а от някаква стойност на ширината на екрана да се скрие. Това е принципът на мобилното първо място. Речено, сторено:

Но сега първоначално скриваме списъка с елементи от менюто и го показваме само когато ширината на екрана е повече от необходимото.

Остава още малко.

Превъртане на списък

С малко размисъл можете да излезете със следния сценарий в код:

Първо, трябва да деактивирате пренасянето на редове:

След това трябва да създадете медиен израз, стиловете в който ще бъдат валидни само до определената точка:

Още малко за този медиен израз:

  • Свойството position: fixed ни позволява абсолютно да позиционираме менюто си, така че да не „избутваме“ полетата под него.
  • Свойството overflow-y: hidden скрива всичко отвън, а свойството overflow-x: auto позволява на браузъра да показва плъзгача за превъртане, ако желаете.
  • Тъй като имаме абсолютно позициониране, трябва да посочим цвета на фона на този блок.

1. Ако не се притеснявате от факта, че долните блокове могат да се движат надолу, тогава всички маркирани свойства могат да бъдат премахнати.

Демонстрация

Така че, ако все още сте превъртали или дори сте чели до този момент, ето gif, който демонстрира ефективността на това, което кодирахме тук:

Разбира се, работещ пример може да се види и щракне върху CodePen.

Надявам се да ви е харесало.

Това е страхотно! Наистина, Flexbox е нещо, което преди това липсваше за просто и логично управление на блокове за оформление. Искате ли да промените ориентацията на блока спрямо оста Y или X? - само един имот и сте готови. Искате ли да разпределите блоковете възможно най-равномерно по наличната ширина? - отново едно свойство и готово.

Да, Flexbox е добър, но има едно много важно обстоятелство в полза на временното изоставяне - поддръжката на браузъра. Или по-скоро поддръжка за един браузър, който клиентите все още харесват. Ако вашите клиенти не живеят в света на „миналото“, тогава Flexbox може би е добра помощ за кодера.

Нов приложения, написани на NW.js, можете да го използвате до насита.

Делим се на плащане за хостинг или кафе. Колкото повече пия кафе, толкова повече пиша статии.