Вертикальне меню з випадає підменю на css

Вертикальне меню з випадає підменю

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

Розмітка таких меню проста - звичайний багаторівневий список. При створенні такого меню необхідно використовувати абсолютне і відносне позиціонування.

Зазвичай елементам списку li верхнього рівня задають відносне позиціонування, а для меню, що випадає - абсолютне.

Виглядати воно буде наступним чином.

CSS-властивість position задає режим позиціонування елементів. Заводський параметр static. яке означає «звичайне позиціонування».

Значення relative означає «відносне позиціонування». Щодо позиційовані елемент можна переміщати щодо його вихідного положення.

Значення absolute властивості position задає елементу абсолютне позиціонування.

Абсолютно позиційований елементи мають наступні особливості:

  • Випадають з потоку документа. Місце, яке вони займали, стає як би порожнім і його займають сусідні елементи.
  • Ширина за замовчуванням залежить від вмісту (а не розтягується на всю доступну ширину).
  • Залишаються на тому ж місці, де були, якщо не задані значення властивостей top. left. right. bottom.

    Тепер приступимо до справи.

    Для початку створимо шаблон нашого майбутнього меню.

    Тепер приберемо внутрішні і зовнішні відступи і маркери.

    Преукрасить наше меню.

    Тепер займемося спливаючими підпунктами.

    В принципі меню готове але, для привабливості додамо трикутнички показують, що у пункту меню є підпункти.

    Наше меню готове можете використовувати його на своєму сайті.

    Схожі статті