Як створити меню, що випадає на HTML і CSS
Меню, що випадає забезпечує чітке ієрархічне представлення всіх основних розділів і підрозділів сторінки. Все що вам потрібно, щоб побачити підрозділи, - це навести курсор миші на основні розділи. Це наше меню, яке було створено тільки за допомогою HTML-коду і CSS. Дотримуйтесь нашого уроку і самостійно створіть ваше власне, трохи відмінне, що випадає. Ми почнемо з HTML-коду, а потім розповімо про CSS-стилі
Кроки
Метод 1 з 2: HTML
1
Створіть структуру HTML для вашого CSS меню. Ми будемо використовувати тег `div` зі значенням class = "nav" для зберігання структури. Як ви можете бачити в лівій частині, HTML - це просто набір маркованих списків (UL) для головного розділу меню.
2
Додайте навігаційні посилання для основних розділів. На даний момент це простий невпорядкований список UL з чотирма елементами.
3
Додайте навігаційні посилання для підміню "About Us", додавши невпорядкований список всередині елемента LI батьківської опції меню.
4
Додайте CSS в ваш HTML. Те, що ми маємо на даний момент, є HTML структурою з акуратним набором зв`язків з підміню, що мають чіткі зв`язку з їх батьківськими елементами. Ми збираємося додати CSS зовні, додавши наступне посилання в розділ `head` даного коду:
Метод 2 з 2: CSS
1
Створіть CSS-файл. Тепер, коли HTML структура готова, ми зробимо її стилізацію за допомогою CSS, щоб запрацювала функціональність випадаючих меню. Використання CSS селекторів дозволить нам вибирати індивідуальні елементи, включені в HTML структуру, без необхідності використання додаткових ідентифікаторів або класів.- Ми сховаємо підміню, додавши до неврегульованим списками (UL) всередині батьківського списку опис display: none;
- Щоб меню знову з`являлися при наведенні курсору на LI, вони повинні бути перетворені назад в блок елементів, символ> гарантує, що метою є саме той дочірній UL всередині LI, на який навели курсор
2
Стилізує основне навігаційне меню за допомогою CSS.- position: relative- дозволить розмістити підміню відповідно до основної навігаційною панеллю
- display: inline-block- відрегулює ширину меню
3
Додайте градієнт і змініть колір шрифту при наведенні курсору. Наступний код, доданий в елементи LI, при наведенні курсору змінить градієнтний фон посилання на більш темний, а текст - на білий.
4
Стилізує підміню. На даний момент підміню успадковують стиль їх батьківських елементів. Нам потрібно переконатися, що вони розташовуються вертикально під основною панеллю меню.
5
Додайте ваше меню, що випадає і вирівняйте його по відношенню до елемента списку. Це також дозволить позбутися від сірого фону.- Опис position: relative- було додано для елементів основного списку
- Опис position: absolute- було додано для вашого списку всередині щодо розташованого пункту.
