? ЯК зробити спливаюче меню :: ПЗ

За допомогою грамотного коду HTML і нескладних правил CSS можна створити непогане спливаюче меню, яке можна буде легко змінювати і доповнювати. При використанні засобів мови розмітки і каскадних таблиць стилів можна забезпечити коректну роботу меню у всіх браузерах.

Інструкція

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

Перший елемент
- Випадаючий елемент
- Випадаючий елемент2

Збережіть створений список в окремому html-файлі. Далі створіть файл з розширенням .css і введіть всі параметри таблиці стилів.

Видаліть всі відступи і маркери, які застосовуються в Ненумеровані списку, і задайте ширину меню за допомогою засобів CSS: ul {list-style: none-
width: 200px-}

Задайте відносне положення всіх елементів списку за допомогою атрибута position: ul li {position: relative-}

Далі необхідно оформити підменю, кожен з елементів якого буде з'являтися праворуч від батьківського меню в той момент, коли на пункті буде знаходитися покажчик миші: li ul {position: absolute-
left: 199px-
top: 0-
display: none-} Атрибут left має значення на один піксель меншу, ніж ширина самого меню. Це дозволяє грамотно розташувати спливаючі пункти без створення подвійних кордонів. Атрибут display використовується для того, щоб приховати підменю при відкритті сторінки.

Задайте потрібні стилі для посилань за допомогою відповідних параметрів css. Увімкніть параметр display: block для того, щоб кожна посилання займала весь відведений для неї місце.

Щоб меню з'являлося в той момент, коли курсор виявиться над ним (hover), потрібно ввести код: li: hover ul {display: block-}

Задайте за бажанням додаткові параметри відображення посилань і елементів списку.

Спливаюче меню готово. Тепер залишилося включити в файл .html атрибут: Спливаюче меню