Лесно и ефектно падащото меню CSS3 и JQuery
Много често можете да намерите в шаблоните падащи елементи за навигация. Разработчиците използват този тип да се покаже скритата менюто на допълнителни скрити връзки, тематично свързани с основната точка. Можете да намерите примери за прелитане вид свързване или менюта в стила на акордеон, които прилагат този принцип на навигация.
Първо се изгради основен HTML5 шаблон. Вие се нуждаете от най-новата версия на JQuery. получаваме от API Google. Също така добавете файл стиловете styles.css. който ще бъде представен по-долу:
Сега ще разгледаме структурата, която се основава на неподреден списък в горната част на страницата. Целият списък се поставя в елемента HTML5
Структурата на кода е съвсем проста. Всеки елемент от списъка включва ефект за избор, когато курсора на мишката е в него. Всички вътрешни UL са елементи на оригиналния елемент от списъка, така че фокусът не се губи, ако се премине към предметите падащото меню.
стилове навигация
А стилове съдържа стойности нулират свойства код по подразбиране. Много разработчици включват файл от Ерик Meye. но в нашия случай е твърде тромава. В допълнение, кодът се съхранява на друг сървър, който сам по себе си е лошо решение в този случай.
В кода има един интересен имот -webkit-шрифт изглаждане. Тя е предназначена да се изгладят шрифтовете, когато кодът се изпълнява в браузъра работи Mac OS X или IOS.
Ние сега се обръщат към нашето меню.
Добавянето #ddmenu селектор за избор на ул всички вътрешни елементи във всеки елемент от списъка, тъй като за тях е важно да се определи разстоянието чрез абсолютно позициониране. Също така добавете линеен преход за всички връзки, който се появява, когато мишката върху тях.
А сега да разгледаме създаването на горната показалеца член. Тя се формира с помощта на имуществото на въртене и универсални рамки с тъмен фон за сянка. С позиционирането компенсира един от елементите на нашата структура е разположена над друга, и генерира визуално представяне на показалеца върху падащото меню.
Втората част от кода се ангажира цялото магическо действие. Добавяме манипулатор събитие за обработка на курсора на мишката върху елемента от списъка. Водачът ще спрете текущата активна анимация и ще покаже нов параграф с помощта на .slideDown (). Ние поставяме кратко забавяне, за да отговаря само на действителния избор на позиция.
До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!
Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!
Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.
Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!