Topsape reader спадаюче меню

Блог Пісклова Олександра → Робимо просте спадаюче меню 62 # 8599; 0 Приховати пост Приховати блог

Створення спадаючого меню

Запишемо html код меню

оформлення меню

Переходимо до найважливішої частини уроку, оформлення меню або перетворення звичайного списку в спадаюче меню. По-перше, потрібно визначитися, де будемо записувати стилі меню. Їх (стилі) можна винести в окремий файл css або записати їх в тому ж файлі де і список. Особисто я віддаю перевагу перший варіант (окремий файл). Давайте так і зробимо. Підключаємо css файл записом

якщо style.css буде розташовуватися в одній директорії з файлом списку (ми його назвемо menu.html). або

якщо файл знаходиться в іншій теці. Тепер створюємо файл style.css і починаємо записувати стилі. Запишемо загальні стилі, які задають оформлення та розташування меню

У цих стилях в прибираємо відступи і межі, робимо фон меню світло-сірим, задаємо висоту меню (30 px), прибираємо маркери в списках, щодо позиціонуємо пункти меню, ставимо рамку і вирівнюємо текст по центру кнопки.
Йдемо далі і задаємо стилі для випадають пунктів.

У цій частині ми працюємо над випадають кнопками, і задали кожної основної кнопці картинки у вигляді трикутника. Ці трикутники означатимуть, що у даній кнопки є підрозділи. Але як же бути з тією кнопкою, у якої більше немає розділів (кнопка ВАЗ 2106)? Це ми розберемо в наступній частині.
Тепер найцікавіше, пропишемо стилі, за допомогою яких при наведенні на кнопку і буде з'являтися підміню.

І ще доповнення одне доповнення. В меню немає правої рамки, тому ми прописали новий стиль border. Цей стиль потрібно задати для останнього пункту, в нашому випадку це Mazda. Тому з

Ну ось і все, спробуйте реалізувати щось подібне, тільки підлаштовуючи стилі під свій дизайн.