Як зробити меню, що випадає?

Як зробити меню, що випадає?

У даному уроці ми розберемо, як створити меню, що випадає зовсім без використання JavaScript. Просте, але функціональне рішення на основі загальнодоступних властивостей CSS можна використовувати де завгодно. Меню, що випадає служить як огляду ієрархії розділів, які містяться в пункті меню, що об’єднує їх. Зазвичай в меню перераховуються всі підрозділи певної секції, якщо навести вказівник миші на неї. Меню, що випадає дуже зручно, коли показує всі утримання всіх секції, що містяться на сайті, і дає можливість перейти на будь-яку сторінку з будь-якого місця сайту.

Більшість випадаючих меню засноване на використанні громіздкою розмітки і Javascript. Наш варіант буде використовувати просту структуру HTML коду і 19 рядків CSS, з невеликим вкрапленням CSS3 для додання зовнішнього лиску. Немає жодних ID, класів і елементів. Простий ясний код. Всі пункти, які потребують випадаючих підпунктах, містять інший елемент.

Зверніть увагу, що елемент випадаючих підпунктів не має класу. Ми використовуємо каскадні стилі, зберігаючи розмітку як можна більш чистою. в відмінне, просте у використанні і самодостатнє меню, що випадає. Перший розділ коду вельми простий — ми встановлюємо звичайне горизонтальне меню. Але, зверніть увагу, що селектори виділяють всі елементи списку і посилання у випадних пунктах теж.

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

Але так як більшість програм для читання з екрану ігнорують все, що має властивість display: none;, то використання такого методу дуже небажано. Замість цього ми використовуємо абсолютне позиціонування за межами екрану, коли він не використовується.

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

Зверніть увагу на властивість. Так як всі кольори встановлюються для елементів, встановлення відступу в 1px для елемента a, і, отже, кольорову область від кордону пункту списку.

Таким чином, створюється ілюзія, що пункти списку розділені. Цікаво, що IE не може розпізнавати шаблон при наведенні курсору миші і закриває список, що випадає. Для вирішення цієї невеликої проблеми додається прозоре зображення gif 1 х 1 px. для запобігання переносу рядків на інший рядок.

Остання частина коду виводить випадають підпункти, коли курсор миші виявляється над відповідним пунктом меню. Так як псевдо клас не працює в IE6, меню, що випадає не працює в даному браузері. Проблему можна обійти безліччю способів. визначає, що станеться з посиланням верхнього рівня, коли спадкоємець буде мати стан hover. ), То одночасно пункт списку верхнього рівня () теж матиме стан hover, так як виділений контент всередині нього.

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

-webkit-transition:-webkit-transform 0. 075s linear;, яке анімує за допомогою загасання / появи протягом 0. 075 секунди. В останній частині визначаються стилі для виділення певного пункту в випадаючому списку при наведенні курсору миші. Визначення background: rgba (51, 51, 51, 0. 75); встановлює помірно сірий фон для пункту з прозорістю 0. 75.

Ті браузери, що не розпізнають таке визначення кольору (наприклад, IE) будуть використовувати визначення кольору в старому стилі в попередньому рядку. Готово!

Проста структура HTML розмітки і кілька рядків CSS створюють чудове меню, що випадає без використання всемогутнього JavaScript. Напевно знайдеться чимало проектів, в яких таке рішення знайде своє місце.

Як зробити меню, що випадає?

Сподобалася стаття? Поділися нею з друзями!