Меню, що випадає на css
Принцип роботи
Для початку, щоб ви зрозуміли принцип роботи випадають елементів, розберемо простий приклад. Візьмемо простий html-код для роботи:
і застосуємо до цього коду такі стилі:
У css ми приховали потрібну частину тексту, змінивши його відображення на display: none ;. При наведенні курсора (: hover) на батьківський елемент .example_shown у дочірнього елемента .example_hidden змінюється тип відображення на видимий. За таким принципом і будуються випадають меню.
Створення меню, що випадає
Тепер займемося реалізацією самого меню. Для його організації скористаємося тегами списків ul і li
Як видно з коду, основний список з id = "menu» у нас буде відповідати за видимі розділи меню. У розділи ми вкладаємо ще один список ul, що містить в собі випадають посилання при наведенні на заголовок розділу меню. Тепер застосуємо до цього набору елементів наступні стилі:
В даних стилях я хочу акцентувати увагу на чотирьох речах:
- Зверніть увагу на цей символ #menu> li в стилях. Він позначає, що стилі будуть застосовуватися не до всіх елементів li, розташованим всередині ul # menu, а тільки до тих, хто є безпосереднім нащадком тега ul # menu.
- У розділів меню позиціонування змінено на position: relative. Справа в тому, що звичайний тег з position: absolute веде відлік координат позиціонування від лівого верхнього кута вікна браузера. Але якщо такий тег вкласти всередину тега з position: relative, відлік буде вестися від кута цього тега.
Таким чином, ми зможемо прив'язати випадають списків не до якоїсь координаті щодо вікна, а до координати щодо розділу основного меню. Власне top: 20px і задає зміщення по вертикалі від верхньої межі головного розділу. - Параметр top у #menu> li> ul повинен дорівнювати сумі параметрів #menu> li таких як height + padding-top + padding-bottom. В даному випадку останні два параметри не зазначені, їх значення успадковується з самого першого стилю і дорівнює нулю. Значення height = 20. Значить відступ у нашого списку буде дорівнює 20 + 0 + 0 = 20px
- Коли ми переведемо курсор на пункти випав списку (#menu> li> ul> li), кожен елемент li цього списку буде потрапляти під подія наведення курсору hover. При цьому він є вкладеним в список ul, який в свою чергу вкладений в #menu> li. Подія hover при цьому буде передаватися від #menu> li> ul> li всім батьківським елементам, в тому числі і #menu> li. Через це перелік не буде схлопуватися назад незважаючи на те, що ми не тримаємо курсор безпосередньо над #menu> li.
висновок
Випадають списки - досить зручний спосіб розмістити велику меню на маленькому просторі. Але у цього способу є колосальний мінус: він не буде працювати на мобільних пристроях. Чому? Тому що у них в принципі немає поняття наведення курсору. У них є кліки, перетягування. Але наведення курсору немає. Так що не забудьте про ці користувачів і зробіть для них окрему реалізацію меню.