В този урок ще направим навигационна лента, която остава в сила, докато превъртате през съдържанието на страницата. И, разбира се, няколко трикове използват за подобряване на външния вид и функционалността.
Емисии са много популярни елемент на уеб дизайна. Те са доста често могат да се намерят във версията с триъгълни края. Внимателно разкъсваща лента парадигма плосък дизайн на отделни блокове. В този урок ще покажем алтернативен метод за формирането на облика на лентата, което им дава по-елегантен външен вид, за разлика от конвенционалните триъгълни края.
В този урок ще използваме HTML5 навигационен елемент като контейнер за хоризонталната списъка с връзки. Също така опишете как да го направи по-приятен за окото с помощта на CSS.
Етап 1. Контейнер за навигация
Няма съмнение, че вече сте запознати с широка гама от нови елементи, въведени от HTML5. В този пример, ние използваме две от тях.
Ние ще използваме ясна дефиниция на ширината на панела за навигация. Тя ще бъде по-широки 28px съдържание на контейнери, както и позицията на своите прогнози са снабдени с отрицателния лявото поле. Предлагат се и леко заоблени краища на горната повърхност, с поле - * - радиус и малко тире произволно определена.
След това добавете неподреден списък с връзки в лентата за навигация и да го насочва към имота на дисплея: инлайн блок. за да бъдат приведени в съответствие. Ние нямаме нужда от списък с етикети, така че да бъде добавено свойство списък стил: няма.
По това време, панелът ще изглежда по следния начин:
Етап 2. заоблени краища на лентата
Сега, ако CSS дадена възможност да се има много псевдо-елементи (напр. След :: след), бихме могли да направим заоблени краища на лентата за навигация е семантично правилен начин. Но ние трябва да използвате две падащото меню на семантиката на елемент Разделение в края на НСА. Ние определяме класовете за тях и навигация наляво навигация надясно. Те са с ширина и височина 14px 14px, разположен абсолютно 14px от дъното на НСА.
Частни имоти граничен радиус може да отнеме две стойности за всеки ъгъл. Може да се използва за определяне на ширината на интерес, което е достатъчно удобен метод - тя позволява да се адаптира автоматично към промените в радиуса на кривата на размерите на правоъгълника.
Малък "сянка", който завърши създаването на външния вид панели, създаден с помощта на псевдо-елементи. след това. Тяхната височина и ширина, както и радиуса на кривата рамка определя като процент.
Сега навигационния панел ще изглежда така:
Стъпка 3. Script
JQuery точки и включват в кода на страницата.
Първото нещо, което да направите е да се регистрирате точка с () метод .waypoint за елемента. Разбира се, нищо не се случва - трябва да се дефинира функция, за да се справят на събитието. Най-простият метод за определяне на функцията параметри -Трансфер .waypoint (функция).
Можете да опитате плъгин в действие: Добавете следния код към сценария и да гледате съобщение, че ще се появи, докато превъртате през лентата за навигация.
Сега, за да получите желания ефект, трябва да се усложни процеса. На първо място, ние заключаваме, нашата навигационния панел в контейнера, който е точка и служи като удобно разположение (виж кода по-долу).
В CSS, създаване на следното правило.
И променят сценария, както следва:
Вие сте доста право да си зададем въпроса: "Какво става тук". Може би сте се досетили, че ние вратовръзка точка до контейнер навигационно-контейнера. но този път ние използваме други средства. Вместо метод директен трансфер манипулатор .waypoint () ние го капсулират в обект. А голяма разлика в работата на не. Един обект, който се минава, може да съдържа няколко допълнителни опции, които го правят доста удобен за използване в бъдеще.
Функция манипулатор, че ние определено, отнема два параметъра. Първият - стандартен обект JQuery събитие. че ние не се интересуваме. Второ - Точки специфични плъг-ин, е низ от "надолу" или "нагоре". в зависимост от посоката на превъртане, в който е достигнал точка.
Cool? Все пак, ако бавно превъртете надолу след точката, която току-що създаде, ще забележите "скок" на съдържанието, причинени от премахването на навигационната лента на движение на документите. Освен опетнения външен вид, това поведение може да доведе до неясни грешки, когато извеждате съдържанието на страницата. За щастие, тази грешка е лесно да се определи - добавете следния код за функцията на манипулатор и скок няма.
Стъпка 4. Вертикално отместване
Първото нещо, което да се разгледа - допълнително пространство над фиксирания елемент. С помощта на променлива компенсира улеснява решение: да се премине отместването да добавите 15px: 15px да .waypoint на метод опции () и промяна на върха: 0px на върха: 15px .sticky в класните правила.
Малък наклон на лентата за навигация може да се подобри дизайна. Добавете го лесно с помощта на допълнителен елемент в навигацията на DIV елемент и CSS кода за него:
Стъпка 5. функцията на отместване
Един от най-забележителните черти включете - динамично определяне точката на отклонение:
В този пример, водачът ще се изпълнява, когато потребителят е превъртат страницата, за да 50px под долния границата на елемент (да знаете височината на елемента не е необходимо).
Забележка: тези премествания, генерирани (които също са определени като процент) се изчисляват всеки път, когато един прозорец е преоразмерено. добавяне на нови точки или опции точки модификация. Ако извършвате операции, които влияят върху точките за позициониране (като промяна на DOM на страницата или шаблон) трябва да се обадите $ .waypoints ( "опресняване"), за да я превърне в позициите.
В контекста на този урок, ние използваме тази функционалност за гладка подхлъзване от горната навигационна лента:
Тук стандартни операции JQuery: добавяне или премахване на лепкав клас да навигационен елемент. промяна на вертикалното позициониране с (метод .css). и след това изпълнява .animate (). .stop () метод се използва за предотвратяване на възможни грешки, като почистване на всички JQuery събития.
Стъпка 6. Избор и гладко скролиране
Тя може да бъде много полезен за разпределение на точките, което съответства на текущата позиция на страницата. Използването на Точки щепсел проблем е лесно решим. Трябва да добавите следните редове към сценария:
Кодът, който използваме е съвсем очевидно, в манипулатор:
5 урока последната колона "JQuery"
Днес бихме искали да ви разкажа за TypeIt библиотека - безплатно JQuery плъгин. Можете да го използвате, за да се симулира пишете. Ако всичко е настроен правилно, то е много реалистичен ефект може да се постигне.
JQuery плъгин за създаване на график.
JQuery плъгин за създаване на диаграма на Гант.
Един пример за това как да се приложи изтегления файл чрез PHP и JQuery Аякс.
До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!
Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!
Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.
Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!
Свързани статии