Како да креирате опаѓачко мени на HTML и CSS

Од овој напис ќе научите како да креирате паѓачко мени со HTML и CSS. Усветленото мени се отвора кога корисникот го носи покажувачот на глувчето - кога менито е отворено, корисникот може да кликне на една од опциите за мени за да отиде на соодветната страница.

Чекори

Еден. Отворен уредувач на текст. Можете да користите редовен уредувач на текст, како што се Notepad или Textedit, или повеќе функционален уредувач на текст, како што е Notepad++.

Notepad ++ Прво отворете го менито "Јазик" на врвот на прозорецот и изберете "HTML".

2. Внесете го заглавието на документот. Овој код кој го дефинира видот на кодот што се користи во остатокот од документот:

3. Направете паѓачко мени. Внесете го следниов код за да ја поставите големината и бојата на менито. Наместо "#", внесете ја саканата цифра (толку е поголем бројот, толку е поголемо менито). Исто така во "позадината-боја" и "боја" редови, можете да го замени името на саканата боја или нејзиниот HTML код:

.Dropbtn {Боја на позадина: црна боја: Бело-Балдинг: # Px-Font-големина: # Px-граница: ништо-}

4. Наведете дека опциите ќе бидат присутни во менито. Бидејќи опциите ќе бидат додадени подоцна, ставете ги во менито со внесување на следниов код:

.Dropdown {Позиција: релативен екран: Inline-Block-}

Пет. Поставете го изгледот на опаѓачкото мени. Следниот код ќе ја постави големината на менито, нејзината позиција кога другите елементи на веб-страници се погодени, и боја. Во линијата "Минерална ширина", наместо "#", ја заменува посакуваната цифра (на пример, 250), а во линијата "боја-боја" - името на саканата боја или неговиот HTML код:

.Dropdown-содржина {Display: Нема-позиција: Апсолутна боја-боја: Lightgrey-мин-ширина: # PX-Z-индекс: 1-}

6. Додајте информации за содржината на опаѓачкото мени. Следниот код ја поставува бојата на текстот и големината на менито. Наместо "#" замени го бројот (во пиксели) за да ја поставите големината на копчето:

.Dropdown-content a {боја: црна-podding: #px # px-text-decoration: none-display: block-}

7. Наведете како ќе се променат боите на менито кога корисникот ќе го прикаже курсорот на глувчето. Првата линија "боја-боја" укажува на бојата во која избраната опција е насликана, а во втората линија "боја-боја" боја во која е насликано копчето за паѓање мени. Идеално, овие бои треба да бидат полесни од боите на опциите и копчињата кога курсорот не е скриен на нив.

.Dropdown-содржина А: лебди {позадина-боја: бела-}.Drush: Леверен .Dropdown-content {Display: Block-}.Drush: Леверен .Dropbtn {позадина-боја: grey-}

осум. Затвори CSS дел. За да го направите ова, внесете го следниов код:

Девет. Наведете го името на опаѓачкото мени. Внесете го следниов код каде "името" го заменува зборот (на пример, "MENU"), кој ќе биде прикажан на копчето MENU.

 Класа ="Паѓање"> Класа ="Dropbtn"> Класа на име ="Dropdown-содржина">

10. Додај опции за мени. Секоја опција за мени треба да се осврне на нешто, на пример, на страницата на вашиот или друг веб-сајт. За да додадете опции во менито, внесете го следниов код каде https: // Веб-страница.Com Поднесете ја адресата на страницата (цитати не избришете), и наместо "име" ја заменува опцијата за името.

 href ="https: // Веб-страница.Com"> Име href ="https: // Веб-страница.Com"> Име href ="https: // Веб-страница.Com"> Име

Единаесет. Завршете го кодот. Внесете ги следните ознаки за да го одредите крајот на опаѓачкото мени:

12. Прелистајте го кодот на опаѓачкото мени. Кодот треба да изгледа вака:

 {Боја на позадина: црна боја: бело-додаток: 16px-font-големина: 16px-граница: ништо-}.Dropdown {Позиција: релативен екран: Inline-Block-}.Dropdown-содржина {Display: Нема-позиција: Апсолутна боја-боја: lightgrey-min-ширина: 200px-Z-индекс: 1-}.Dropdown-Content A {Боја: црна-додаток: 12px 16px-text-декорација: Не е прикажан: Блок-}.Dropdown-содржина А: лебди {позадина-боја: бела-}.Drush: Леверен .Dropdown-content {Display: Block-}.Drush: Леверен .Dropbtn {позадина-боја: gry-} класа ="Паѓање"> Класа ="Dropbtn"> Класа на социјалните медиуми ="Dropdown-содржина"> href ="https: // Google.Com"> Google href ="https: // Фејсбук.Com"> Фејсбук Href ="https: // YouTube.Com"> YouTube

Совети

Секогаш проверувајте го кодот пред да го објавите на вашата веб-страница.
Методите опишани тука се дизајнирани да создадат опаѓачко мени што се отвора ако го носите курсорот на глувчето. За да креирате паѓачко мени што се отвора ако кликнете на него, користете jаvascript.

Предупредувања

Составот на HTML-бои е доста ограничен ако ги користите нивните имиња, на пример, "црно" (црно) или "зелено" (зелено). На на оваа страница Постои генератор на HTML-бои со кој можете да го најдете кодот на која било боја.