Загрузить PDF
Загрузить PDF
Из этой статьи вы узнаете, как создать выпадающее меню с помощью HTML и CSS. Выпадающее меню открывается, когда пользователь наводит на него указатель мыши; когда меню открыто, пользователь может щелкнуть по одной из опций меню, чтобы перейти на соответствующую страницу.
Шаги
-
Откройте текстовый редактор. Можно использовать обычный текстовый редактор, например, Блокнот или TextEdit, или более функциональный текстовый редактор, такой как Notepad++.
- В Notepad++ сначала откройте меню «Язык» вверху окна и выберите в нем «HTML».
-
Введите заголовок документа. Это код, который определяет тип кода, используемый в остальной части документа:
<!DOCTYPE html> < html > < head > < style >
-
Создайте выпадающее меню. Введите следующий код, чтобы задать размер и цвет меню. Вместо «#» введите нужную цифру (чем больше цифра, тем больше меню). Также в строках «background-color» и «color» можно подставить название нужного цвета или его HTML-код: [1] X Источник информации
. dropbtn { background-color : black ; color : white ; padding : #px ; font-size : #px ; border : none ; }
-
Укажите, что в меню будут присутствовать опции. Так как опции будут добавлены позже, поместите их в меню, введя следующий код:
. dropdown { position : relative ; display : inline-block ; }
-
Настройте внешний вид выпадающего меню. Следующий код задаст размер меню, его положение, когда затрагиваются другие элементы веб-страницы, и цвет. В строке «min-width» вместо «#» подставьте нужную цифру (например, 250), а в строке «background-color» — название нужного цвета или его HTML-код:
. dropdown-content { display : none ; position : absolute ; background-color : lightgrey ; min-width : #px ; z-index : 1 ; }
-
Добавьте информацию о содержимом выпадающего меню. Следующий код задает цвет текста и размер кнопки меню. Вместо «#» подставьте число (в пикселях), чтобы задать размер кнопки:
. dropdown-content a { color : black ; padding : #px #px ; text-decoration : none ; display : block ; }
-
Укажите, как будут меняться цвета меню, когда пользователь наведет на него курсор мыши. В первой строке «background-color» указывается цвет, в который окрасится выбранная опция, а во второй строке «background-color» цвет, в который окрасится кнопка выпадающего меню. В идеале эти цвета должны быть светлее, чем цвета опций и кнопки, когда курсор не наведен на них.
. dropdown-content a : hover { background-color : white ;} . dropdown : hover . dropdown-content { display : block ;} . dropdown : hover . dropbtn { background-color : grey ;}
-
Закройте раздел CSS. Для этого введите следующий код:
</ style > </ head >
-
Укажите имя выпадающего меню. Введите следующий код, где «Name» замените на слово (например, «Меню»), которое отобразится на кнопке меню.
< div class = "dropdown" > < button class = "dropbtn" > Name </ button > < div class = "dropdown-content" >
-
Добавьте опции меню. Каждая опция меню должна ссылаться на что-либо, например, на страницу вашего или другого веб-сайта. Чтобы добавить опции в меню, введите следующий код, где вместо https://www.website.com подставьте адрес страницы (кавычки не удаляйте), а вместо «Name» подставьте название опции.
< a href = "https://www.website.com" > Name </ a > < a href = "https://www.website.com" > Name </ a > < a href = "https://www.website.com" > Name </ a >
-
Завершите код. Введите следующие теги, чтобы указать конец кода выпадающего меню:
</ div > </ div > </ body > </ html >
-
Просмотрите код выпадающего меню. Код должен выглядеть примерно так: [2] X Источник информации
<!DOCTYPE html> < html > < head > < style > . dropbtn { background-color : black ; color : white ; padding : 16 px ; font-size : 16 px ; border : none ; } . dropdown { position : relative ; display : inline-block ; } . dropdown-content { display : none ; position : absolute ; background-color : lightgrey ; min-width : 200 px ; z-index : 1 ; } . dropdown-content a { color : black ; padding : 12 px 16 px ; text-decoration : none ; display : block ; } . dropdown-content a : hover { background-color : white ;} . dropdown : hover . dropdown-content { display : block ;} . dropdown : hover . dropbtn { background-color : grey ;} </ style > </ head > < div class = "dropdown" > < button class = "dropbtn" > Social Media </ button > < div class = "dropdown-content" > < a href = "https://www.google.com" > Google </ a > < a href = "https://www.facebook.com" > Facebook </ a > < a href = "https://www.youtube.com" > YouTube </ a > </ div > </ div > </ body > </ html >
Реклама
Советы
- Всегда проверяйте код, прежде чем размещать его на своем веб-сайте.
- Описанные здесь методы предназначены для создания выпадающего меню, которое открывается, если навести на него курсор мыши. Чтобы создать выпадающее меню, которое открывается, если щелкнуть по нему, воспользуйтесь JavaScript. [3] X Источник информации
Реклама
Предупреждения
- Набор HTML-цветов довольно ограничен, если использовать их названия, например, «black» (черный) или «green» (зеленый). На этой странице есть генератор кодов HTML-цветов, с помощью которого можно найти код любого цвета.
Реклама
Источники
Реклама