Съдържание

• Стъпки
• Съвети
• Внимание

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

Стъпки

1. 

   Отворете HTML текстов редактор. Можете да използвате обикновен текстов редактор (Notepad, TextEdit) или по-усъвършенстван (Notepad ++).
   • Ако решите да отидете на Notepad ++, трябва да изберете HTML от "H" частта от менюто Език (Език) в горната част на прозореца, преди да продължите.

2. 

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

3. 

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

4. 

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

5. 

   Създава външния вид на падащото меню. Следващият код определя размера и цвета на падащото меню, включително позицията, когато се комбинира с други елементи на уеб страницата. Не забравяйте да замените "#" в раздела "min-width" с номера, който искате (напр. 250) и да промените заглавката "background-color" (цвят на фона) на определен цвят или HTML код:

6. 

   
   
   Добавете подробности към съдържанието на падащото меню. Следващият код ще посочи цвета на текста вътре и размера на бутона от падащото меню. Не забравяйте да замените "#" с броя на пикселите, който определя размера на бутона на менюто:

7. 

   Редактира как се променя показалеца на мишката при задържане на курсора в падащото меню. Когато задържите курсора на мишката върху бутона на менюто, някои цветове трябва да бъдат променени. Редът „цвят на фона“ ще отразява цвета, променен, когато изберете нещо от падащото меню, докато вторият ред „цвят на фона“ е цветът, в който бутонът на менюто ще се промени. В идеалния случай и двата цвята трябва да са по-светли, отколкото когато не бяха избрани:

8. 

   Затворете раздела CSS. Въведете следния код, за да посочите, че сте приключили с CSS частта на документа:

9. 

   Създайте име за бутона от менюто. Въведете следния код, но не забравяйте да замените "Име" с името на бутона от падащото меню (пример: Меню):

10. 

    Добавете връзки към менюто. Всеки елемент от падащото меню ще води към нещо, било то страница на текущия уебсайт или външен уебсайт. Добавете своя избор към падащото меню, като въведете следния код, който трябва да замените https://www.website.com с адреса на връзката (запазете скобите) и заменете "Име" с името на връзката.

11. 

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

12. 

    Кодът за преглед определя падащото меню. Фрагментът ще изглежда по следния начин: Реклами

Съвети

• Винаги преглеждайте кода, преди да публикувате на уебсайта.
• Инструкциите по-горе са за падащи менюта, които ще работят, когато задържите курсора на мишката върху бутона на менюто. Ако искате да създадете падащо меню, което щраква само когато щракнете, тогава трябва да използвате JavaScript.

Внимание

• Оцветяването в HTML е доста ограничено, когато използваме маркери като "черен" или "зелен". Можете да проверите HTML генератора на цветен код, който позволява на потребителите да създават и използват персонализирани цветове тук.