Створення вертикального меню, що випадає css - уроки css
Створення вертикального меню, що випадає CSS
В даному уроці буде детально розглянуто створення вертикального меню з випадають пунктами. Для основи візьмемо меню з предпредидущего уроку.
Для створення меню буде застосований клас .drop_vert_menu;
У коді кілька разів зустрітися запис подібно цієї .drop_vert_menu> li
Стрілка> вказує на дочірній селектор (li)
Для того щоб додати підпункти до пункту меню - потрібно перед закривається тегом «Вставити як би» ще одне меню (тобто теги
Основні параметри в CSS-стилях для меню, що випадає:
top: 2px; - визначає на скільки пікселів вниз буде відступати розкривається підменю;
left: 195px; - розмір відступу від лівого краю;
position: relative; - пункти будуть розташовуватися один за іншим, а не стиснуться в купу;
position: absolute; - означає, що пункти основного меню будуть знаходитися у фіксованому положенні щодо підпунктів;
display: none; - елемент невидимий (його як би немає).
display: block; - означає що підпункти цього меню будуть «гумовими, як блок» - якщо назва підпункту велике, то він розтягнеться в висоту.
Так само в CSS - коді буде присутній параметр:
border-top: 1px solid White; - за допомогою нього можна регулювати розмір і колір відступу між пунктами меню; Тобто ви будете регулювати товщину і колір верхньої рамки. А відступи ще можна регулювати за допомогою атрибута - margin ...; Значення інших параметрів вам повинно бути знайоме з попередніх уроків по CSS, а так же уроків HTML.
Створіть два файли: drop_vert_menu.css і test_menu.html. Передбачається, що ці файли знаходяться в одній директорії.
Безумовно можна зробити щось більш цікаве, ніж це меню. Все що вам потрібно - це знайти приклади меню, які приблизно схожі на ті, що у вас в уяві і вивчити їх, для того що б потім переробити.
Найкращий спосіб вивчення в такому випадку буде - «метод тику». Тобто ви бачите параметр задає колір або розміру -> змінюєте це параметр на інший і дивіться, що відбудеться і т.д. І вже після декількох переробок ви зможете самостійно (без чужих прикладів) зробити те, що вам потрібно.