Създаване на мощен CSS падащото меню
Също така, изтеглите изходния код на вашия компютър! Така че, нека да се създаде падащото меню в CSS.
Стъпка 1: Изграждане на лентата за навигация
Нека започнем с основното меню. Правим го с неподредените списъци, и добавите малко CSS.
HTML5 и CSS3 практика от нула до резултата!
Създайте контейнер за менюто
Сега прилага CSS. Контейнерът за менюто е фиксирана ширина и центрира чрез задаване на стойност наляво: авто и дясно: авто марж имот
Сега нека видим как можем да я подобрим, използвайки CSS 3. Трябва да използваме различен синтаксис за WebKit браузъри (като Safari) и за Mozilla браузъри (като Firefox).
синтаксиса е така да се развие в ъглите:
За да се запази последователност при избора на цвят, можете да използвате услугата на фасадата, той ще ви помогне да изберете по-светъл или по-тъмен от цвета на фона на основната.
Първият ред определя цвета на фона на нормално за по-стари браузъри. Във втория и третия ред използва градиент от горе до долу на страницата с помощта на цвят преход от до # 0272a7 # 013953.
Сега можем да добавим още тъмно и изискан граница, се прилага рамка и сянка на нашето меню блок. Синтаксисът е един и същ за всички браузъри: първата стойност - хоризонталното преместване; вторият - вертикално изместване; трето - радиус замъгляване (малка стойност е по-лесно, в нашия пример това е един пиксел). Ние сме установили всички пристрастия на 0, така че стойността на размазването ще бъде единна през границата.
Ето и пълния CSS код #menu контейнера.
Добавяне на стилове на елементи от менюто
Започваме с всички елементи от менюто, се подравняват вляво и отстъп между марж-надясно (уплътнение ще бъдат необходими, за да се възстанови състоянието на елемента от менюто):
За предизвикан държавата, и да пада до подводницата, аз избрах сиво.
Основният цвят е светло сиво (# F4F4F4) и се прилага градиент от горе до долу (# F4F4F4) до (#EEEEEE). Заоблени ъгли, които използваме само върха като падащия суб е малко под точката от менюто.
Отдясно и отляво подложка ще бъде малко по-малко, тъй като в индуцирана състояние на елемента от менюто има граничен в 1 пиксел. Нека видим старата подплатата, менюто ще бъде изместен от две пиксела вдясно, защото в индуцирана състоянието на елемента от менюто присъства граница. За да избегнете това, ние ще премахнем отдясно и отляво граница, и тя ще бъде равна 9px вместо 10px.
Сега добавете заоблени ъгли само от по-горе, тъй като паднал под менюто ще бъде непосредствено под основната точка.
Тук е последната точка CSS меню в индуцирана състояние:
Тук е последната CSS за връзки:
За връзки с индуцирана състоянието, в което фоновия цвят е сив, ние ще използваме по-тъмен цвят (# 161616) за връзките и белият цвят на сянката.
И накрая, ние трябва индикатор, че това падащо меню съдържа суб. Като такива индикатора ще използва фоновото изображение на стрелката вдясно на текстови линкове. то Otpozitsioniruem надясно, нанесете вата-надясно, и да даде малко пространство отгоре. Топ добавям в индуцирана държавата ще 7rh вместо 8 пиксела, така че ние имаме граница в 1px предизвикана около менюто.
Тук е последната код за връзките на менюто и контейнера. Само на точка от менюто "дом" не съществува недостиг на подводницата.
Тук е последната код за връзките на менюто и контейнера. Само на точка от менюто "дом" не съществува недостиг на подводницата.
Резултатът изглежда така:
Стъпка 2: Уверете се под падащия
класически Менюто падащото обикновено се състои от вложени списъци, и изглежда по следния начин:
Основна структура
За нашия "мега" вместо меню вложени списъци, ние ще използваме DIV - се очаква да се проведе като няколко вложени списъци.
Това е основната структура на падащото подводницата. Идеята се базира на факта, че ние може да включва част от съдържанието в подменютата падащото като точки, снимки, други списъци, контактни форми и т.н.
Контейнери падащото под
Ширината на съда зависи от съдържанието му. Избирам името на маркера в зависимост от броя на колоните, които се съдържат в контейнера.
За да скриете подводницата падащото ще използваме абсолютно позициониране и отрицателни лявото поле.
Цветът на фона на контейнера падащото суб е същата като тази на избрания елемент от менюто. Съвременните браузъри показват градиент от # EEEE (същите като елемент от менюто), за да #BBBBBB.
Отново ще използваме заоблени ъгли, с изключение на горния ляв ъгъл.
Ние се убедите в това. Вижте как изглежда, ако оставите заоблен горния ляв ъгъл:
И това е начина, по който изглежда:
HTML5 и CSS3 практика от нула до резултата!
Както можете да видите на под внимателно спазва основната му елемент от менюто.
Нашата цел - идеалното падащия контейнер, както и за това имаме нужда от различна ширина за всеки от тях.
И за да покаже падащото контейнер на мишката навъртам, ние просто използвайте следния код:
С помощта на падащото контейнер
Нашите класове са готови да ги включите в менюто. Ние използваме всеки един от тях, като се започне от петата, и всеки за менюто си:
Какво трябва да се случи, да се използва по-горе код.
Стъпка 3: Създаване падащия контейнера за колона
Сега имаме готови опаковки, а ние ще се създаде колони от увеличаване на размера, като се използват принципите на система 960 скакалец.
Използването на колони
Ето например под падащия, съдържащ няколко колони. В този пример, ние имаме различни комбинации от всички видове колони.
Тя изглежда така:
СТЪПКА 4: Подравняване вдясно
Сега нека видим как можем да синхронизираме меню и нейните подточки в правилната част на лентата за навигация, а не само на елементите от менюто, но контейнерите падащите също трябва да се промени.
За да направите това, ние се добави нов клас към списъка с майка .menu_right на предмети. По този начин, ние трябва да преинсталирате полето отдясно и плава в дясно.
Следваща поглед към контейнера падащото. В предишния CSS кода, който се използва за всички закръгляване, с изключение на горния ляв ъгъл. Сега трябва да се приведе в съответствие контейнера в дясно. Съответно, ние пренапише стойността на граничен радиус с нов клас .align_right и определя закръгляване горната дясна Ула до 0.
Искаме да се появи нашето меню в дясно, за това ние използваме нашия нов клас и нулира стойностите на ляво и дясно на нашите букви са в десния край.
Сега сте готови да използвате от менюто.
Тя трябва да изглежда така.
Step5: Добави съдържанието и стиловете в позициите падащите
Ние имаме напълно завършена структура. Сега можем да добавим нещо, което искате съдържание: текст, списъци, снимки ...
основните стилове
Нека започнем с базовите стилове за точки и позиции.
Ние можем да се прилага хубав син цвят за връзките на падащото меню.
Стилове за списъци
Ние украсяват нашите списъци. Ние искаме да се предефинират стилове като цвета на фона или граничните списъци, които се използват в основното меню (навигационна лента).
Стилове за изображения
И направи точки с изображения на ляво
текстови блокове
Ние избирам част от съдържанието, като тъмна кутия със заоблени ъгли и лека сянка.
Ние изчисти стиловете за списъци
И накрая, ние се използва различен начин за добавяне на стил към списъка, като се използват отново CSS 3.
Стъпка 6: Съвместими браузъри и IE 6
За пълния IE използвайте следния код:
Използвал съм няколко PNG файлове в тази статия, а всеки знае, че IE 6 не поддържа прозрачност. За да коригирате това има много решения.
Преобразувайте ги GIF или PNG-8 формат
използвате скрипт
Задаване фонов цвят, различен от сив, например TweakPNG
От тези решения, можете да изберете този, който по-добре отговаря на твоите нужди.
Сега нека да разгледаме пълен пример.
Крайният кода
заключение
Преведено и редактирана от: Виктор Хорн и Андрю Bernatsky. webformyself екип.
HTML5 и CSS3 практика от нула до резултата!
Най-IT новини и уеб разработки на нашия канал Телеграма
