Створюємо виїжджають приховані меню за допомогою css3
Сьогодні мова піде про розробку виїжджають ковзають меню за допомогою CSS3-переходів. Меню спочатку будуть приховані від очей, і перехід буде відбуватися тільки після натискання відповідної кнопки.
Давайте для початку з'ясуємо різницю між двома типами меню:
* Slide- меню буде виїжджати з межі екрану поверх контенту сторінки, коли кнопка буде натиснута.
* Push-меню буде виїжджати з межі екрану, і зміщувати при цьому контент сторінки.
Перед тим як продовжити, дозвольте зазначити кілька важливих аспектів:
* В цьому посібнику побудовано на CSS-переходах для більш плавної роботи. На застарілих браузерах, проте, контент буде «перестрибувати» на необхідну позицію.
* Ми використовуємо classie.js для швидкого і простого видалення і додавання класів.
* Ми використовуємо j # 097; vascript-функції querySelector і querySelectorAll, які підтримуються в IE8 і вище.
Нарешті, давайте поглянемо на 8 варіацій меню, розробкою яких ми займемося:
* Меню slide left, яке виїжджає з лівій частині екрана поверх контенту
* Меню slide right, яке виїжджає з правій частині екрана поверх контенту
* Меню slide top, яка виїжджає з верхньої частини екрану поверх контенту
* Меню slide bottom, яка виїжджає з нижньої частини екрану поверх контенту
* Меню push left, яке виїжджає з лівої частини екрану і зміщує контент вправо
* Меню push right, яке виїжджає з правій частині екрана і зміщує контент вліво
* Меню push top, яка виїжджає з верхньої частини екрану і зміщує контент вниз
* Меню push bottom, яка виїжджає з нижньої частини екрану і зміщує контент вгору
Коли меню буде відкрито, ми відобразимо «маску» поверх основної оболонки. Це буде напівпрозоре накладення, яке приховує основний контент. Коли користувач клацає по цьому накладення, меню знову ховається з уваги. У кожному меню також буде представлена кнопка закриття, яка буде зручна в тому випадку, якщо на пристроях з маленькими пристроями меню займає весь екран. Давайте перш за все поглянемо на основну розмітку і CSS-код.
У нас параметр body overflow-x виставлений на hidden, так як нам не потрібні скролінг, коли оболонка буде зміщена вліво або вправо. Коли вона зміщується вертикально, це не має особливого значення. Тут більш важливо розташувати наші навігаційні меню ЗА МЕЖАМИ оболонки, так як очевидно те, що коли до елементу буде застосовуватися трансформація, він буде тимчасово перебувати на відносному позиціонуванні. Так як наше навігаційне меню повинно бути фіксовано по відношенню до зовнішніх частинах вікна браузера, нам вона не потрібна всередині елемента з відносним позиціонуванням. Усередині кожного меню є список пунктів меню і кнопка закривання.
Розробники так і не прийшли до консенсусу щодо роботи absolute positioning / left / top проти transforms / translating. Paul Irish більш детально поглиблюється в цю тему, і прочитати про це ви можете тут. Ми в даному випадку використовуємо позиціонування, так як надаємо також запасний варіант для застарілих браузерів без переходів, без використання умовних таблиць стилів. Також, після того, як ми протестували обидва варіанти, відмінності виявилися практично непомітними для людського ока. Давайте зараз поглянемо на версію нашого меню.
Slide Menu Left
Це меню виїжджає з лівого боку поверх контенту. І ось CSS-код для нього:
Slide Menu Right
Це меню виїжджає з правого боку поверх контенту. І ось CSS-код для нього:
Це меню виїжджає з верхньої сторони поверх контенту. І ось CSS-код для нього:
Slide Menu Bottom
Це меню виїжджає з нижньої сторони поверх контенту. І ось CSS-код для нього:
Це меню виїжджає з лівого боку, і зміщує контент вправо. Велика частина коду походить на код для меню, що виїжджає зліва, за винятком того факту, що тут також переміщається і оболонка. Давайте розглянемо CSS-код:
Push Menu Right
Це меню виїжджає з правого боку, і зміщує контент вліво. Велика частина коду походить на код для меню, що виїжджає праворуч, за винятком того факту, що тут також переміщається і оболонка. Давайте розглянемо CSS-код:
Це меню виїжджає з верхньої сторони, і зміщує контент вниз. Велика частина коду походить на код для меню, що виїжджає зверху, за винятком того факту, що тут також переміщається і оболонка. Давайте розглянемо CSS-код:
Push Menu Bottom
Це меню виїжджає з нижньої сторони, і зміщує контент вгору. Велика частина коду походить на код для меню, що виїжджає з нижньої частини, за винятком того факту, що тут також переміщається і оболонка. Давайте розглянемо CSS-код:
Тепер давайте поглянемо на j # 097; vascript-код, який перемикає наші класи при натисканні на різні кнопки меню. З його допомогою ми також відображаємо нашу маску поверх іншого контенту, і реалізуємо функціонал кнопки закриття, коли користувач клацає по масці або кнопці. Пам'ятайте, що ми використовуємо classie.js для того, щоб додавати або виключати класи. Наш j # 097; vascript-код, звичайно ж, охоплює всі 8 меню. Можливо, вам захочеться мінімізувати ваш j # 097; vascript-код, і видалити з нього непотрібні фрагменти. Давайте поглянемо на j # 097; vascript-код:
І на цьому все! Тепер наші прекрасні ефекти для меню готові до застосування в ваших проектах! Ми також впровадили сюди media queries, так що ви можете без сумнівів завантажувати ці коди або ознайомитися з функціоналом в представленому демо.
Отримати вихідний код | Подивитися демо