Стилно меню с CSS3
С появата на CSS3 уеб дизайнерите и разработчиците имат цял нов свят от възможности. С анимации, сенки, заоблени ъгли и други, елементите могат лесно да бъдат стилизирани..
Преди да започнем
Преди да се потопим в кода за нашето меню, бих искал да прегледам някои от инструментите, които ще използваме в този урок, които можете също да изтеглите и използвате, докато следвате. Всички те са включени в. ZIP файл в края на статията, който включва и крайния код.
Добре, изтеглихте ли всичко необходимо? Ще започнем с HTML, след това с основен CSS и накрая ще подправим всичко с CSS3.
HTML
Тъй като сме прогресивни с CSS3 в нашата система от менюта, реших да задам най-простия HTML5 за нас. В този урок няма да изградим пълен уебсайт, а само меню.
Да започнем с кода за менюто. Менюто е прост неподреден списък с вложени списъци за подменюта. Неподреденият списък е обвит в HTML5 тагове.
Както можете да видите, имаме пет менюта, четири от които имат поделементи. Следващата стъпка е да направите някои основни CSS стилове и едва след това да приложите CSS3 и диапазони към менюто, за да получите иконите.
CSS
За да създадем добра основа за работа, ще добавим дънков модел от Subtle Patterns и ще центрираме менюто въз основа на мрежа 960.gs. Ще създадем и класа Clearfix, който се използва в нашата система от менюта.
Сега ще се върнем към работата по дизайна на менюто. Първо проектираме навигацията от най-високо ниво, за да създадем основните рамки.
Нека преминем през този код. Менюто ще обхваща цялата ширина на класа .wrap, която е 940px. За да добавите малко място в първияелемент от менюто, ще добавим 10 пиксела подложка от лявата и дясната страна и ще зададем относителна позиция на лентата за навигация.
Тази точка ще бъде много важна по-късно. Елементите от менюто от най-високо ниво са поставени отляво и също имат относително позициониране. След това стилизираме връзките, които са настроени да показват: block;. Това е малко по-различно от CSS системата от менюта, която има: inline;.
Падащи менюта
Падащите менюта съдържат неподреден списък, така че нека ги променим след това. Отново ще работим с основен CSS.
Какво? Къде отиде менюто ни? Не забравяйте, че все още сме в процес на създаване на менюто. Всичко ще си дойде на мястото, обещавам. .menu ul задава позицията на абсолютна (не забравяйте, че този неподреден списък евътре в най-горното ниво на списъка с елементи, който е позициониран относително (относително), така че .menu ul е позициониран относително (относително) спрямо най-горното ниво на списъка с елементи).
След това казваме на падащите елементи от списъка да плават наляво, придавайки на падащите елементи чист вид. На етикета поставяме интервал: nowrap; което ще предотврати увиването на дълги връзки в два реда. Това действие ще помогне за поддържането на чист стил и ще поддържа потребителския интерфейс лесен за използване.
Преминавайки към състоянията на задържане, задържането на курсора на мишката над елементите от списъка от най-горното ниво (.menu li) ще задържи курсора и ще насочи нашияпод неподреден списък, след което ще премести списъка от извън екрана 5 пиксела вляво от списъка с елементи. Отново позиционирането е спрямо най-високото нивоелементи от списъка, така че е изместен на 5 пиксела от списъка. Ако премахнете всички относителни позиции на li от най-високо ниво, всички ваши елементи ще изскочат под връзката Начало.
Сега трябва да се уверим, че когато задържим курсора на мишката над нашето падащо меню, най-горното ниво li поддържа стила, но падащото меню не. Тук влизат в действие вашите .menu li:hover и .menu li:hover ul. Този модел дефинира фиксирана функция при задържане на мишката.
CSS3
Сега стигаме до най-интересното. Спецификацията CSS3 въведе много вълнуващи инструменти за уеб дизайнери и разработчици, които използват модерни уеб браузъри. Разбира се, не всички браузъри поддържат всички функции на CSS3 (вижте css3files.com за повече информация кое работи и кое не), но много от функциите се влошават елегантно и не нарушават дизайна.
Нека добавим малко CCS3 към лентата за навигация, към неподредения списък от най-високо ниво и към елементите на списъка.
Първо в кода по-горе е лентата за навигация. Ще добавим линеен градиент от бяло към светло сиво (използвайки както стандартни описания на градиенти, така и стари стилове на WebKit, за да запазим съвместимостта с по-стари браузъри. Закръгляме лентата за навигация с радиус на границата от 6 пиксела.
Използвах шрифт, наречен Iconic, който е вграден с CSS3 @font-face и след това извиках етикетите за диапазон на елементите от менюто. След като изтеглите файловете, можете да получите CSS кода от архива, а също така можете да копирате файловете за шрифтовете. Ако промените относителния път, не забравяйте да промените src на @font-face.
Тъй като навигацията от най-високо ниво е актуализирана, преминаваме към окончателния стил на падащото меню, което ще има някои новиCSS3 свойства като засенчване и преход. И така, първо, .menu ul:
Двете големи свойства, които трябва да вземем предвид, са описанието на непрозрачността и прехода. Непрозрачността е зададена на 0 и преходът ще накара падащото меню да премине от непрозрачност 0 към прозрачност 1 в рамките на 1 секунда. Сега нека напишем функционалността за "при преминаване на мишката":
Функционалността на мишката е доста сложна. Нека го разбием ред по ред.
Горният ред прави фона чисто бял и след това задава непрозрачността на 70%, така че да може да се вижда някакъв дизайн на фона.
Закръглих долните два ъгъла, оставяйки горните ъгли квадратни, за да създам илюзията, че падащото меню излиза от лентата за навигация.
Третият ред е мястото, където започва магията. Поради оформлението на контролния панел и списъка с елементи, използването на Z-индекс е почти невъзможно за наслояване, за да се получи правилният ефект. За да създадем впечатлението, че падащото меню е под лентата за навигация, зададохме светлина, подобна на вмъкването на сянка на прозореца, която пада в падащото меню. И накрая, задайте непрозрачност на 1, която координира прехода, който сме задали по-рано.
Останалата част от CSS3 е доста проста и най-вече повтаряща се от това, което вече разгледахме: