Съдържание

• Стъпвам
• Част 1 от 2: Писане на HTML
• Част 2 от 2: Писане на CSS
• Съвети

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

Стъпвам

Част 1 от 2: Писане на HTML

1. Създайте своя раздел за навигация. Обикновено използвате nav> за лентата за навигация в целия уебсайт, заглавката> за по-малки раздели с връзки, които са обвързани със страни, или div>, ако не изглежда, че има друга опция Поставете това в елемент div>, за да можете да регулирате стила както на контейнера, така и на самото меню.
   • div>
   • nav>
   • / nav>
   • / div>
2. Дайте на всеки раздел атрибут на клас. По-късно ще използваме атрибута class, за да модифицираме стила на тези елементи с CSS. Дайте на контейнера и на менюто свой собствен клас атрибут.
   • div>
   • nav>
   • / nav>
   • / div>
3. Добавете списък с елементи от менюто. Неуреденият списък (ul>) съдържа елементите на главното меню (списък елементи li>), ако потребителят премести мишката върху него, той / тя вижда падащите менюта. Добавете класа "clearfix" към вашия списъчен елемент; ще стигнем до това по-късно в електронната таблица на CSS.
   • div>
   • nav>
   •       ul>
   •          li> Начало / li>
   •          li> Служители
   •          li> Контакт
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Добавете връзки. Ако тези елементи от менюто от най-високо ниво също водят към собствените им страници, сега можете да вмъкнете връзките. Връзка към несъществуваща котва (като "#!"), Дори и да не се свързват с нищо, така че курсорът на потребителя ще изглежда различно. В този пример Contact не води до никъде, но другите два елемента от менюто правят:
   • div>
   • nav>
   • ul>
   • li>a href = "/">У дома/ a>/ li>
   • li>a href = "/ Служители">Членове на персонала/ a>
   • / li>
   • li>a href = "#!">Контакт/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Създайте подлисти за падащите елементи. След като стилът е създаден, тези списъци формират падащото меню. Поставете списъка в елемента от списъка, върху който потребителят ще премине. Добавете атрибут на клас и връзка точно както преди.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Начало / a> / li>
   • li> a href = "/ Служители"> Служители / a>
   •          ul>
   •             li> a href = "/ borsato"> Марко Борсато / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Контакт / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Съобщете за проблем / a> / li>
   •             li> a href = "/ support"> Поддръжка на клиенти / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

Част 2 от 2: Писане на CSS

1. Отворете вашата CSS таблица със стилове. Публикувайте връзка към вашата CSS таблица със стилове в главата на вашия HTML документ, ако връзката още не е там. В тази статия няма да разглеждаме основите на CSS, като например задаване на шрифт и цвят на фона.
2. Добавете код за ясна корекция. Не забравяйте да добавите класа „clearfix“ към списъка с менюта? Обикновено елементите от падащото меню имат прозрачен фон, който позволява преместване на други елементи. Една проста адаптация към CSS може да реши този проблем. Ето едно хубаво, бързо решение, въпреки че няма да работи в Internet Explorer 7 и по-стари версии:
   • .clearfix: след {
   • съдържание: "";
   • дисплей: таблица;
   • }
3. Създайте основния дизайн. С този код можете да поставите менюто си в горната част на страницата и да скриете падащите елементи. Това е много просто нарочно, за да можем да се съсредоточим върху съответния код. Можете да го промените по-късно с допълнителен CSS код, като подложка и поле.
   • .nav-wrapper {
   • ширина: 100%;
   • фон: # 008B8B;
   • }
   •  
   • .nav меню {
   • позиция: относителна;
   • дисплей: вграден блок;
   • }
   •  
   • .sub меню {
   • позиция: абсолютна;
   • дисплей: няма;
   • фон: # 555;
   • }
4. Направете падащите елементи да се показват, когато задържите мишката върху тях. Елементите в падащия списък вече са настроени така, че да не се показват. Ето как да направите целия подлист да се появи веднага щом задържите курсора на мишката върху „родителя“:
   • .nav-menu ul li: hover> ul {
   • дисплей: блок;
   • }
   • Забележка - ако допълнителни менюта са скрити в елементите на менюто от падащото меню, добавените тук свойства ще важат за всички менюта. Ако искате стилът да се прилага само за първото ниво на падащите менюта, вместо това използвайте ".nav-menu> ul".
5. Посочете със стрелка, че има падащо меню. Уеб дизайнерите обикновено показват със стрелка надолу, че даден елемент отваря падащо меню. Този код добавя тази стрелка към всеки елемент от менюто ви:
   • .nav меню> ul> li: след {
   • съдържание: " 25BC"; / * избягал unicode за стрелката надолу * /
   • размер на шрифта: .5em;
   • дисплей: блок;
   • позиция: абсолютна;
   •    }
   • Забележка - Регулирайте позицията на стрелката със свойствата отгоре, отдолу, надясно или наляво.
   • Забележка - Ако не всички елементи от менюто ви имат падащи менюта, не променяйте външния вид на цялото меню за навигация на класа. Вместо това добавете друг клас (като падащо меню) към всеки елемент li, където искате стрелка. Обърнете се към този клас в горния код.
6. Регулирайте подплънките, фона и други свойства. Менюто трябва да работи сега, но все още не е много приятно. Със свойствата в CSS можете да персонализирате как изглежда всеки клас или елемент и къде се намират.

Съвети

• Ако искате да добавите падащо меню към формуляр, това е много лесно в HTML5 с елемента select>.
• Връзката a href = "#"> се превърта в горната част на страницата и връзка, сочеща към несъществуваща котва, като href = "#!">, Не се превърта. Ако това ви се струва твърде небрежно, можете да промените начина, по който курсорът изглежда с CSS.
• Когато копирате и поставите примерния код, премахнете всички символи.