Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Създаване на (Off-Canvas) навигация с помощта на Bootstrap

by
Difficulty:IntermediateLength:MediumLanguages:

Bulgarian (Български) translation by Mihail Petrov (you can also view the original English article)

Библиотеката за Bootstrap, е универсален набор от стилове създаден за решаването на множество проблеми, свързани с web дизайна, предоставяща най-често ползваните web компоненти, необходими ни за ежедневна работа. Но въпреки че библиотеката разполага с множество елементи (бутони, навигационни ленти, табове, слайдери и др.), в нея все още липсват някой доста популярни шаблони и в частност този, който ще разгледаме днес (off-canvas navigation) (визуализиране на навигационно меню извън рамките на страницата)

Този подход, за реализиране на хитра навигация, разчита на поставянето на менюто извън видимата област на web страницата, за да може потребителя да се фокусира изцяло върху съдържанието. Шаблона беше известен предимно в мобилните приложения, но не след дълго се превърна и в популярен подход при отзивчивият web дизайн, (в голяма степен благодарение на статията на Luke Wroblewski).

Имайки предвид, популярността на Bootstrap като решение за повечето проблеми свързани с компонентите и визуализацията, е напълно нормално, около него да се създаде общество, което да го захранва с плъгини и готови решения на проблеми които не се решават директно от библиотеката. В рамките на този урок ще разгледаме едно решение за създаване на (off canvas) навигация, наречено Jasny Bootstrap и разработено от Arnold Daniels.

Избора ми на това конкретно разширение е повлиян от следните причини:

  • Както името му подсказва, разширението е създадено специално за целите на библиотеката, което ще рече че следва конвенциите описани от нея, тоест, именуването на методите и имплементирането на компонентите
  • Jasny Bootstrap, идва на готово с плъгин които решава проблема ни с (off canvas ) навигацията, с помощта на серия от гъвкави конфигуруеми класове и HTML5 data атрибути.

Какво е Bower и има ли почва нас.

В рамките на този урок ще ви представя процес, които ще улесни разработката и поддръжката на web страници, с помощта на инструмент наречен Bower. Ако нямате инсталиран Bower (или никога не сте чували за този инструмент), можете да прочетете повече тук:

1. Начало на проекта

Преди да започнем същинската работа по проекта е необходимо да създадем директориите, в които ще съхраняваме файловете на приложението ни

Ще използваме директорията assets за да съхраняваме всички ресурси, необходими за нашата страница, като изображения, стилове и скриптове. Не компилираният код, използващ LESS и JavaScript, ще държим в директорията uncompiled. Остава да дефинираме и някой допълнителни характеристики на нашият проект като име, версия, описание, и външни зависимости с помощта на Bower

В терминала( конзолата ) на вашата машина изпълнете командата, bower init

Пример за използване на командата "bower init"

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

2. Инсталиране на външните скриптове

Преди да инсталираме библиотеките Bootstrap и Jasny Bootstrap, нека първо именуваме директориите където, Bower ще трябва да ги инсталира. За целта създайте един нов файл в главната директория на проект ви, кръстете .bowerrc. Файла трябва да съдържа следната информация, указваща директорията в която ще бъдат свалени библиотеките които искаме да инсталираме

Ще укажем библиотеките, които искаме да свалим заедно с техните версии.

В терминала на вашата система изпълнете командата bower install, която ще инсталира упоменатите библиотеки.

Новосвалените библиотеки се намират в директорията components

3. Организиране на стиловете

За работата ни по проекта е необходимо да създадем няколко файла за стилове, както следва:

  • variables.less — Този файл ще съдържа всички променливи необходими, на Bootstarp. Ще създадем копие на файла за да не повредим оригиналният ако се наложи някаква промяна(копирайте Bootstrap променливи ).
  • variables-jasny.less — подобно на горният файл, този път обаче съдържа променливи необходими за работата наразширението, Jasny Bootstrap ( можете да копирате променливите от тук).
  • app.less — Файла съдържа връзка към стиловете на Bootstrap и Jasny Bootstrap, които са ни необходими за стилизирането на нашият проект ( можете да копирате съдържанието от тук )
  • style.less — това ще бъде файла, който ще съдържа нашите стилове.

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

Следващата ни стъпка е да компилираме стиловете, като а целта ще ползваме инструмента Koala със следната конфигурация

  • Уверете се че опцията Auto Compile е отметната.За да може Koala автоматично да компилира нашите файлове при промяна.
  • Настройте изходните директории на файловете app.less и style.less да бъде assets/css/
  • Отметнете опцията Source Map за да генерирате .map с цел лесно дебъгване на стиловете. Ако за пръв път чувате за Source Map можете да разгледате този урок Source Map 101.

След като конфигурациите са завършени компилирайте LESS кода към CSS

Забележка: За целите на този урок използваме Koala, но ако имате предпочитание към друг инструмент за компилиране на LESS файлове, можете да използвате него. 

4. Разработка на Web страницата

Нека да създадем входната точка на нашия проект index.html. Освен основната HTML5 структура, документа ще съдържа и тага meta viewport , няколко мета тагове за описание на съдържанието и разбира се връзките към стиловото съдържание.

Създаване на навигация тип Off-canvas

Нека да пристъпим към създаване на структурата на нашата навигация.

За да постигнем желаният резултат, използваме класове navmenu, navmenu-inverse, и navmenu-fixed-right. Искам да обърна внимание, че navmenu e един от компонентите на Jasny Bootstrap, който се грижи за позиционирането на елементите като вертикална навигация, докато класа offcanvas, позиционира елементите извън видимостта на страницата. Последното парченце е класа navmenu-site, който ни дава възможност да променим стила на навигацията по наше усмотрение

За да поставим елементите вътре в навигацията можем да използваме обикновен неподреден списък <ul>, като добавим класовете nav navmenu-nav, към него

Разбира се можете да добавите и класическите компоненти които идват с Bootstrap, като например падащ списък (dropdowns) и бутони за навигацията . Размера на целият код, за описание на навигацията, е доста голям, поради тази причина, ако имате желание да свалите целия код можете да го намерите на този адрес ..

Съдържанието на Web страницата ни

На изображението съм показал как да разположите съдържанието на вашата страница

Разположението на компонентите на страницата.
 

Както виждате, страницата ни се състои от лого, бутон за разкриване на навигацията ни, (toggle button with Hamburger icon), и няколко мъдри фрази + огромен бутон (call-to-action button)

Кода на съдържанието също както този на навигацията е доста дълъг затова ще предоставя линк за изтеглянето му от тук

5. Стиловете

Голяма част от стиловете, които ще напишем, са предимно декоративни, свързани с аранжирането на цветовете позициите и размерите на Bootstrap компонентите. Затова вместо подробно да разглеждаме тези очевидни техники, предпочитам да посоча някой основни характеристики на стиловете, които ще имат най-голямо значение за работата ни.

Първо на първо, преди още да сме започнали да пишем дори и един ред код, включете променливите и миксините(Mixins) от файла app.less в style.less с цел преизползването им.

След това ще създадем една LESS променлива @path-img, в която ще пазим пътя до нашите изображения.

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

Вертикално центриране

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

В нашият случай ще центрираме съдържанието с помощта на CSS свойството display : table. Обърнете внимание, че опаковаме цялото съдържание на страницата в два <div> елемента, на който сме сложили класовете site-wrapper и code>site-wrapper-inner

За да подравним съдържанието вертикално, задаваме свойството display : table на класа site-wrapper. След това ще накараме съдържанието да се разпъне в рамките на цялата видима повърхност като зададем, стойностите на свойствата width и height, съответно на 100%. За да накараме съдържанието да се подравни вертикално трябва свойството display на вътрешният контейнер да има стойност table-cell, след което можем да ползваме свойството vertical-align, за да постигнем желаният от нас ефект.

Подробни детайли за стиловите правила могат да бъдат намерени на този адрес .

6. Да оживим страницата ни

След добавянето на стиловете резултата, трябва да бъде подобен на изображението.

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

Необходими са ни четири JavaScript библиотеки, които са съответно jQuery, transition.js, dropdown.js и offcanvas.js. За да ги компилираме заедно, ще създадем нов файл в директория source/js който ще наречем условно app.js.

Добавете JavaScript библиотеките използвайки директивата @koala-prepend по този начин.

Настройте директорията, в която ще бъдат създадени компилираните файлове, натиснете бутона Compile. Не забравяйте да свържете компилираните файлове с вашата страница.

Вече можете да се насладите на ефекта, които се стремяхме да постигнем.

Преходи

Ако искате да добавите ефект на преход, между отделните състояния на падащото меню, поставете следният код, в края на страницата

Заключение

В настоящият урок, научихме как да създадем навигация тип off-canvas, с помощта на Bootstrap и разширението му, Jasny Bootstrap.

Запознахме се и с инструмента Bower които ни дава възможност да управляваме библиотеките в нашият проект. В даден момент, някой от библиотеките, които ползвате може да бъде актуализирана, ако това се случи използвайте командата bower list за да проверите настъпването на подобно обстоятелство.

Ако искате да актуализирате налична библиотека използвайте командата bower update или bower install

Допълнителни материали

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.