ЯК создать спліваюче меню :: Веб програмування

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

Інструкція

Стривайте для качана базову рядок меню. Створіть Спеціальний нумерування список з підміню в текстовому редакторі. Зазвічай для ціх цілей Використовують «Блокнот». Підміню Виступає елементом батьківського списку. Наприклад: Перший елементВіпадающій елементВіпадающій елемент2Віпадающій елемент3Віпадающій елемент4Віпадающій елемент5

Даній список збережіть в окремому html-файлі. Потім створіть файл .css. Введіть всі необхідні Параметри табліці стілів. Робіть це очень уважности, Аджея одна помилка, и спліваюче меню буде відображатіся некоректно або Взагалі не будет працювати.

Відаліть всі маркери и відступі, застосовувані в ненумерованого списку. Задайте ширину меню помощью ЗАСОБІВ CSS: ul -style: none; width: 200px; }

Відзначте відносне положення всех елементів списку помощью атрибуту під назв position: ul li: relative-}

Потім оформите підміню, елементи которого будут з'являтися від батьківського меню справа в момент, коли курсор мишки буде знаходітіся над пунктом: li ul: absolute-left: 199px; top: 0-display: none; }

У атрибута left значення на один піксель менше, чем у ширини самого меню. Це дозволяє правильно розташуваті спліваючі пунктів без создания подвійніх кордонів. Атрибут display вікорістовується, щоб при відкрітті Сторінки Приховати підменю.

Задайте необхідні стилі для ПОСИЛАННЯ с помощью відповідніх параметрів css. Підключіть параметр display: block, щоб ПОСИЛАННЯ Займаюсь всі відведені для них місця. Для того щоб меню з'являлося в момент, коли курсор міші буде надаватіся над ним (hover), введіть такий код: li: hover ul: block-}

За Бажанов задайте додаткові параметрів для відображення елементів списку и ПОСИЛАННЯ. Включіть в файл .html атрибут. Спліваюче меню готове до! Застосування.