Содержание

• Шаги
• Совет
• Предупреждение

Из этой статьи вы узнаете, как создавать раскрывающиеся меню на своем веб-сайте с помощью кода HTML и CSS. Выпадающее меню появится, когда посетитель наведет указатель мыши на указанную кнопку; Затем они могут щелкнуть один из элементов, чтобы перейти на веб-сайт этой опции.

Шаги

1. 

   Откройте текстовый редактор HTML. Вы можете использовать простой текстовый редактор (Блокнот, TextEdit) или более продвинутый (Notepad ++).
   • Если вы решили перейти на 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. 

    Код проверки указывает раскрывающееся меню. Фрагмент будет выглядеть примерно так: Ads

Совет

• Всегда просматривайте код перед размещением на сайте.
• Приведенные выше инструкции относятся к раскрывающимся меню, которые будут работать при наведении указателя мыши на кнопку меню. Если вы хотите создать раскрывающееся меню, которое щелкает только при нажатии, тогда вам понадобится JavaScript.

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

• Цвет HTML довольно ограничен, когда мы используем такие теги, как «черный» или «зеленый». Вы можете проверить здесь генератор цветового кода HTML, который позволяет пользователям создавать и использовать собственные цвета.