За допомогою грамотного коду HTML і нескладних правил CSS можна створити непогане спливаюче меню, яке можна буде легко змінювати і доповнювати. При використанні засобів мови розмітки та каскадних таблиць стилів можна забезпечити коректну роботу меню у всіх браузерах.
Інструкція
1. Для початку побудуйте базову структуру вашого меню. Відкрийте текстовий редактор і створіть нумерований список з підменю, яке виступає як елемент батьківського списку. Наприклад:
- Перший елемент
- Спадний елемент
- Спадний елемент2
2. Збережіть створений список у окремому файлі html. Потім створіть файл з розширенням .css і введіть всі параметри таблиці стилів.
3. Видаліть всі відступи та маркери, які застосовуються в непоміркованому списку, і вкажіть ширину меню за допомогою CSS:ul { list-style: none;width: 200px; }
4. Вкажіть відносне положення всіх елементів списку за допомогою атрибута position:ul li { position: relative; }
5. Далі необхідно оформити підменю, кожен з елементів якого буде з 'являтися праворуч від батьківського меню в той момент, коли на пункті знаходитиметься покажчик миші:li ul { position: absolute;left: 199px;top: 0;display: none;} Атрибут left має значення на один піксель менше, ніж ширина самого меню. Це дозволяє грамотно розташувати спливаючі пункти без створення подвійних меж. Атрибут display використовується для приховування підменю під час відкриття сторінки.
6. Вкажіть потрібні стилі для посилань за допомогою відповідних параметрів css. Увімкніть параметр display: block для того, щоб кожне посилання займало все відведене для нього місце.
7. Щоб відкрити меню, коли вказівник знаходиться над ним (hover), потрібно ввести код:li:hover ul { display: block; }
8. Вкажіть додаткові параметри відображення посилань та елементів списку.
9. Спливаюче меню готове. Тепер залишилося включити в файл .html атрибут:Спливаюче меню