Як створити спливаюче меню


 

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


Інструкція

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