Зміст

• Кроки
• Порада
• Увага

Ця wikiHow вчить вас створювати випадаючі меню на вашому веб-сайті за допомогою HTML та CSS-коду. Випадаюче меню з’явиться, коли відвідувач наведе вказівник миші на вказану кнопку; Далі вони можуть натиснути один із елементів, щоб перейти на веб-сайт цього варіанту.

Кроки

1. 

   Відкрийте текстовий редактор HTML. Ви можете використовувати простий текстовий редактор (Блокнот, TextEdit) або більш просунутий (Блокнот ++).
   • Якщо ви вирішили перейти до Notepad ++, вам потрібно вибрати HTML з "H" частини меню Мова (Мова) у верхній частині вікна перед продовженням.

2. 

   
   
   Введіть заголовок документа. Ось код, який визначає тип коду, який буде використовуватися для решти документа:

3. 

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

4. 

   
   
   Вкажіть, що потрібно замінити посилання, у спадному меню. Оскільки ви потім додасте посилання в меню, ви можете замінити їх у спадному меню, ввівши наступний код:

5. 

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

6. 

   
   
   Додайте деталі до вмісту випадаючого меню. Наступний код визначатиме колір тексту всередині та розмір кнопки спадного меню. Не забудьте замінити "#" на кількість пікселів, яка визначає розмір кнопки меню:

7. 

   Редагує, як змінюється вказівник миші при наведенні курсору миші у спадному меню. Коли ви наводите вказівник миші на кнопку меню, потрібно змінити деякі кольори. Рядок "background-color" відображатиме колір, змінений під час вибору чогось у спадному меню, тоді як другий "background-color" - це колір, на який кнопка меню зміниться. В ідеалі обидва ці кольори повинні бути світлішими, ніж коли вони не були обрані:

8. 

   Закрийте розділ CSS. Введіть такий код, щоб вказати, що ви закінчили CSS-частину документа:

9. 

   Створіть назву для кнопки меню. Введіть наступний код, але не забудьте замінити "Ім'я" на ім'я кнопки спадного меню (наприклад: Меню):

10. 

    Додайте посилання в меню. Кожен пункт у спадному меню буде посилатися на щось, будь то сторінка поточного веб-сайту або зовнішній веб-сайт. Додайте свій вибір у спадне меню, ввівши наступний код, який потрібно замінити https://www.website.com з адресою посилання (збережіть дужки) і замініть "Ім'я" на ім'я посилання.

11. 

    Закрити документ. Введіть такі теги, щоб закрити документ і вкажіть кінець розкривного меню:

12. 

    Код огляду визначає спадне меню. Фрагмент буде виглядати приблизно так: Оголошення

Порада

• Завжди переглядайте код перед розміщенням на веб-сайті.
• Наведені вище інструкції стосуються випадаючих меню, які працюватимуть, коли ви наведете вказівник миші на кнопку меню. Якщо ви хочете створити спадне меню, яке клацає лише при натисканні, тоді вам потрібно використовувати JavaScript.

Увага

• Забарвлення HTML досить обмежене, коли ми використовуємо теги типу "чорний" або "зелений". Ви можете перевірити генератор коду HTML, який дозволяє користувачам створювати та використовувати власні кольори тут.