Създаване на навигационната лента на сайта, в лава лампа стил

Стъпка 1 Създайте маркирането за нашия навигационно меню

Имайте предвид, че ние сме присвоен идентификационен номер «избран» началната страница. За повечето сайтове това е доста стандартен подход; тя позволява да следите на текущата страница в списъка (прибл. Trans. в Lava Lamp меню), съответно, описвайки я като специфичен елемент.

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

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

Затова решихме да се изгради приставка, да вървим напред - създаване на нов файл за този скрипт и да направи връзка към него в нашия маркиране. Ние я наричаме jquery.spasticNav.js.

Стъпка 2 започва да се направи плъгин

Сега JQuery ще бъдат предадени на приставката ни и там ще бъдат обозначени с $ символа.

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

Определете размера на припокриване за нашия малък сгъстяване (т.е. курсора) като курсора надвишава височината на менюто за навигация.

Задайте нулиране, което ще доведе до курсора обратно към текущата позиция на страницата (при условие, че потребителят не кликне върху линка)

Задайте цвят на курсора. Тази настройка може да се извърши и и с помощта на CSS, но използването на опция Плъгинът е по-удобно.

Персонализиране на ефекта от облекчаване.

Сега ние наричаме я и поставете зададете функция. $ .fn - това е просто псевдоним на jquery.prototype.

Знаейки, че промени в поведението могат да бъдат щепсел, трябва да сме сигурни, че приемете настройките като параметър.

Стъпка 3 опции за конфигурация

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

Над задаваме променливите опции, за да се определят някои свойства и техните стойности по подразбиране, а след това разширяване на стойностите, които потребителят предава, когато го нарича щепсел. Така премина наш избор, сменете настройките по подразбиране. Например, когато аз наричам този плъгин, се преминава:

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

Етап 4 функционалност осъзнават

Сега ние сме готови да преминете през всеки елемент от настройките преминали към този плъгин, и за изпълнение на функциите на Lava Lamp. Не забравяйте, че ние не можем да приемем, че потребителят няма да мине този плъгин един елемент. Той може, ако той иска да премине позоваване на клас, който се отнася до няколко елемента, от които се нуждаем, за да получите функционалност ви трябва. Като такива, ние наричаме this.each, за да се придвижва всеки елемент от затворен сет.

навигация. "Кеш" Това, увити в обекта JQuery.

currentPageItem. Той съдържа елемент от списък, чийто атрибут за идентификатор е настроен на "избрани". Минаваме втори параметър за определяне на контекста на къде да започнете търсенето. По този начин, ние не се нуждаем, за да получите цялата DOM, за да намерите този елемент.

петно. Поради липсата на по-добра дума, тази променлива ще се отнася до осветлението, което ще следва мишката, когато го прекарате в менюто.

Сега, когато са заявили / инициализират променливите, нека създадем, така да се каже, самият курсор.

ширина. Вземете currentPageItem ширина, включително всякакви граници, както и подложка.

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

наляво. Задава курсора наляво имота е идентичен с лявата позиция currentPageItem. (Трябва да се установи позицията ни в контекста на СГО за тази стойност ще изработи по-действие).

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

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

backgroundColor. Тя определя цвета на фона.

И накрая, ние добавяме нов елемент към този списък или #nav.

На следващо място, ние трябва да се поддържа връзка с #blob. По този начин, ние не трябва да се търси в DOM всеки път, когато искате да получите достъп до него. Ние вече сме декларирали променлива петно ​​в горната част на тази функция. Сега нека да го инициализира.

Стъпка 5 Събитие Hover

Сега трябва да "слуша", когато потребителят притежава над (витае) един от елементите в списъка (с изключение на курсора, разбира се) в нашето меню за навигация. Когато това стане, ние ще задайте свойствата ширина и левия край на курсора, равна на елемент от списъка, който току-що бе проведено на мишката.

За да обобщим написано по-горе ...

Получаваме всички елементи в списъка - не #blob - във вътрешността на навигационното меню, а когато на мишката върху тях, за да задържи, стартирайте функцията.

Анимиране на курсора и да зададете свойствата на левия край и ширината, равен на елемент от списъка, на която провежда на мишката.

Минете константата на обект като втори параметър анимацията чрез определяне на продължителността и ефекта от намаляване равни на тези, които сме идентифицирали в нашите опции за конфигуриране. Параметър опашка (ред) е настроен на невярна (фалшиво), за да се предотврати повторение на анимацията.

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

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

Етап 6 под Поява

Нека първо издание заделянето "навигация". Отворете style.css файла и добави:

След това поставете всеки елемент от списъка.

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

Преминавайки, ние трябва да издаде тагове хипервръзки в нашето меню за навигация.

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

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

Последната стъпка - да се прилага стила на много курсора!

И тук ние отново определя границите за красивите цветове и добавяне на цвят на фона (включително наклони / граница / нюанс на CSS3 за Firefox и Safari / Chrome). Тук пак виждате един и същ имот Z-индекса. Без него, курсорът ще се появи на върха на целия текст в навигационното меню (т.е. да я затворите). За да се противопоставят на тази, трябва да сме сигурни, че неговата Z-индекс имот е по-малко от същия имот на елемента от списък! Необходимо е също така да се установи абсолютна позиция, за да може да се коригира стойностите на ляво и отгоре в кода на нашия плъгин.

заключение

Преведено и редактирана от: Виктор Хорн и Андрю Bernatsky. webformyself екип.

Съвременните технологии за уеб програмиране

AngularJS, WebPACK, NodeJS, ReactJS, пишеща машина, Gulp, Git, Github.
Научете всичко за най-новите технологии в уеб програмиране

Най-IT новини и уеб разработки на нашия канал Телеграма