Як створити меню, що випадає на html і css

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

кроки

1. Відкрийте текстовий редактор. Можна використовувати звичайний текстовий редактор, наприклад, Блокнот або TextEdit, або більш функціональний текстовий редактор, такий як Notepad++.

У Notepad ++ спочатку відкрийте меню «Мова» у верхній частині вікна і виберіть у ньому «HTML».

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

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

.dropbtn {background-color: black-color: white-padding: # px-font-size: # px-border: none-}

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

.dropdown {position: relative-display: inline-block-}

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

.dropdown-content {display: none-position: absolute-background-color: lightgrey-min-width: # px-z-index: 1}

6. Додайте інформацію про вміст меню, що випадає. Наступний код задає колір тексту і розмір кнопки меню. Замість «#» підставте число (в пікселях), щоб задати розмір кнопки:

.dropdown-content a {color: black-padding: #px # px-text-decoration: none-display: block-}

7. Вкажіть, як будуть змінюватися кольору меню, коли користувач наведе на нього курсор миші. У першому рядку «background-color» вказується колір, в який забарвиться обрана опція, а у другому рядку «background-color» колір, в який забарвиться кнопка меню, що випадає. В ідеалі ці кольори повинні бути світліше, ніж кольори опцій і кнопки, коли курсор не наведений на них.

.dropdown-content a: hover {background-color: white-}.dropdown: hover .dropdown-content {display: block-}.dropdown: hover .dropbtn {background-color: grey-}

8. Закрийте розділ CSS. Для цього введіть наступний код:

9. Вкажіть ім`я меню, що випадає. Введіть наступний код, де «Name» замініть на слово (наприклад, «Меню»), яке відобразиться на кнопці меню.

 class = "dropdown"> class = "dropbtn"> Name class = "dropdown-content">

10. Додайте опції меню. Кожна опція меню повинна посилатися на що-небудь, наприклад, на сторінку вашого або іншого веб-сайту. Щоб додати опції в меню, введіть наступний код, де замість https: // website.com підставте адресу сторінки (лапки не видаляйте), а замість «Name» підставте назву опції.

 href = "https: // website.com "> Name href =" https: // website.com "> Name href =" https: // website.com "> Name

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

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

 {Background-color: black-color: white-padding: 16px-font-size: 16px-border: none-}.dropdown {position: relative-display: inline-block-}.dropdown-content {display: none-position: absolute-background-color: lightgrey-min-width: 200px-z-index: 1}.dropdown-content a {color: black-padding: 12px 16px-text-decoration: none-display: block-}.dropdown-content a: hover {background-color: white-}.dropdown: hover .dropdown-content {display: block-}.dropdown: hover .dropbtn {background-color: grey-} class = "dropdown"> class = "dropbtn"> Social Media class = "dropdown-content"> href = "https: // google.com "> Google href =" https: // facebook.com "> Facebook href =" https: // youtube.com "> YouTube

Поради

Завжди перевіряйте код, перш ніж розміщувати його на своєму веб-сайті.
Описані тут методи призначені для створення меню, що випадає, яке відкривається, якщо навести на нього курсор миші. Щоб створити меню, що випадає, яке відкривається, якщо клацнути по ньому, скористайтеся jаvascript.

попередження

Набір HTML-кольорів досить обмежений, якщо використовувати їх назви, наприклад, «black» (чорний) або «green» (зелений). на цій сторінці є генератор кодів HTML-кольорів, за допомогою якого можна знайти код будь-якого кольору.