Как да създадете падащо меню на HTML и CSS

От тази статия ще научите как да създадете падащо меню с HTML и CSS. Падащото меню се отваря, когато потребителят носи показателя на мишката към него - когато менюто е отворено, потребителят може да щракне едно от опциите на менюто, за да отидете на съответната страница.

Стъпка

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

Notepad ++ Първо отворете менюто "Език" в горната част на прозореца и изберете "HTML".

2. Въведете заглавието на документа. Този код, който определя вида на кода, използван в останалата част от документа:

3. Създайте падащо меню. Въведете следния код, за да зададете размера и цвета на менюто. Вместо "#", въведете желаната цифра (колкото по-голямо е номерът, толкова по-голямо е менюто). Също така в редовете "Цвят на фона" и "Цветовете" можете да замените името на желания цвят или неговия HTML код:

.Dropbtn {Фонов цвят: черен цвят: бял-подложка: # px-шрифт-размер: # px-граница: none-}

4. Посочете дали опциите ще бъдат налични в менюто. Тъй като опциите ще бъдат добавени по-късно, поставете ги в менюто, като въведете следния код:

.Dropdown {позиция: относителна дисплей: inline-block-}

пет. Настройте външния вид на падащото меню. Следният код ще зададе размера на менюто, неговата позиция, когато са засегнати други уеб страници и цвят. В линията "Min-Width", вместо "#", заменете желаната цифра (например 250) и в реда на "Цвят на фона" - името на желания цвят или неговия HTML код:

.Dropdown-content {Покажи: Независимо от това: Absolute-фонов цвят: Lightgrey-min-ширина: # px-z-индекс: 1-}

6. Добавете информация за съдържанието на падащото меню. Следният код Задава цвета на текста и размера на бутона на менюто. Вместо "#" замества номера (в пикселите), за да зададете размера на бутона:

.Падащо съдържание {цвят: черен подложка: #px # px-текст-декорация: none-display: блок-}

7. Посочете как цветовете на менюто ще се променят, когато потребителят ще покаже курсора на мишката. Първият ред "цвят на фона" показва цвета, в който е боядисана избраната опция, и във втория ред "Цвят на фона", в който е боядисана падащото меню. В идеалния случай тези цветове трябва да бъдат по-леки от цветовете на опциите и бутоните, когато курсорът не е скрит върху тях.

.Падащо съдържание на: hover {фонов цвят: бял-}.Падач: HOVER .Падащо съдържание {дисплей: блок-}.Падач: HOVER .DOPBTN {Фонов цвят: хрек

Осем. Затворете секция CSS. За да направите това, въведете следния код:

девет. Посочете името на падащото меню. Въведете следния код, когато "името" замени думата (например "меню"), което ще се покаже в бутона MENU.

 Клас ="Падащо меню"> Клас ="Капка"> Име клас ="Падащо съдържание". T

10. Добавяне на опции за меню. Всяка опция за меню трябва да препраща нещо, например, към страницата на вашия или друг уебсайт. За да добавите опции в менюто, въведете следния код, където https: // Уебсайт.Com Потопете адреса на страницата (котировките не изтриват) и вместо "име" замести опцията Име.

 href ="https: // Уебсайт.Com"> Име href ="https: // Уебсайт.Com"> Име href ="https: // Уебсайт.Com"> Име

единадесет. Попълнете кода. Въведете следните маркери, за да зададете края на падащото меню:

12. Прегледайте кода на падащото меню. Кодът трябва да изглежда така:

 {Цвят на фона: черен цвят: бяло-подложка: 16px-шрифт - размер: 16px-граница: none-}.Dropdown {позиция: относителна дисплей: inline-block-}.Dropdown-съдържание {Дисплей: NONE-позиция: Абсолютен фонов цвят: Lightgrey-min-ширина: 200px-z-индекс: 1-}.Падащо съдържание a {цвят: черен подложка: 12px 16px-текст-декорация: none-display: блок-}.Падащо съдържание на: hover {фонов цвят: бял-}.Падач: HOVER .Падащо съдържание {дисплей: блок-}.Падач: HOVER .Dropbtn {face-color: grey-} class ="Падащо меню"> Клас ="Капка"> Клас на социалните медии ="Падащо съдържание"> href ="https: // Google.Com"> Google Href ="https: // Facebook.Com"> Facebook href ="https: // YouTube.Com"> YouTube

Съвети

Винаги проверявайте кода, преди да го публикувате на уебсайта си.
Описаните тук методи са предназначени да създадат падащо меню, което се отваря, ако носите курсора на мишката. За да създадете падащо меню, което се отваря, ако кликнете върху него, използвайте jаvascript.

Предупреждения

Комплектът HTML-цветове е доста ограничен, ако използвате имената им, например "черно" (черно) или "зелено" (зелено). На на тази страница Има генератор на кодове на HTML-цветове, с които можете да намерите кода на всеки цвят.