Анимированное висувається меню

Близько місяця тому був урок про те як створити висувається меню, але меню, яке ми створимо в цьому уроці буде відрізнятися від минулого. Дане меню швидше з`являється, ніж висувається, але все ж. Ефект гарний: затемнюється основна частина сайту і активною стає меню. У демо присутній 5 варіантів цього меню, так що можете вибрати те, яке вам найбільше сподобалося.

Минулий урок про те як створити висувається меню на CSS3 - Створення висувається меню

Приклад можна побачити тут:

Подивитися прімерСкачать

Ми розглянемо більш докладно як створити меню з Демо 2, коли меню з`являється зліва вгорі.

HTML частина

Меню складається з елемента

, в якому будуть знаходитися всі елементи списку і елемент відповідальний за появу меню:

12345678910

id="Bt-menu" class="Bt-menu"gt;lt;a href="#" class="Bt-menu-trigger"gt; lt;spangt; Менюlt;/spangt; lt;/agt;lt;ulgt;lt;ligt; lt;a href="#" class="Bt-icon icon-zoom"gt; Збільшитиlt;/agt; lt;/ligt;lt;ligt; lt;a href="#" class="Bt-icon icon-refresh"gt; Оновитиlt;/agt; lt;/ligt;lt;ligt; lt;a href="#" class="Bt-icon icon-lock"gt; Заблокуватиlt;/agt; lt;/ligt;lt;ligt; lt;a href="#" class="Bt-icon icon-speaker"gt; Звукlt;/agt; lt;/ligt;lt;ligt; lt;a href="#" class="Bt-icon icon-star"gt; Вибранеlt;/agt; lt;/ligt;lt;/ulgt;lt;/navgt;

CSS частина

Залишилося всього цього додати красивий вид.

*,*: after,*:: before {box-sizing: border-box-}

Ми використовуємо дане властивість для того, щоб вичитати з ширини і висоти блоку значення padding і border. Потім поставимо стиль колір фону та внутрішній відступ для блоку з класом container:

body{background: # 04a466-}.container {padding: 80px-}

властивість padding потрібно, щоб при появі меню, було достатньо місця для відображення основного вмісту сайту. Меню у нас зафіксовано, тому не має значення де воно знаходиться на сторінці. Також ми задаємо затримку за часом з появою і закриття.

123456789101112

.bt-menu {position: fixed-top: 0-left: 0-width: 100%-height: 0-border-width: 0px-border-style: solid-border-color: # 333-background-color: rgba(0,0,0,0)-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s-}

При появі меню задаємо йому прозорий фон, встановлюючи альфа канал в 0.3.

Відео: Меню, що випадає на CSS

.bt-menu.bt-menu-open {height: 100%-border-width: 30px 30px 30px 90px-background-color: rgba(0,0,0,0.3)-transition: border-width 0.3s, background-color 0.3s-}

Пропишемо властивості вмикач нашого меню:

Відео: Простий урок №5 по Adobe Muse - Красиве анімоване меню в Adobe Muse

1234567891011121314151617181920212223

.bt-menu-trigger {position: fixed-top: 15px-left: 20px-display: block-width: 50px-height: 50px-cursor: pointer-}.bt-menu-trigger span {position: absolute-top: 50%-left: 0-display: block-width: 100%-height: 4px-margin-top: -2px-background-color: #fff-font-size: 0px-user-select: none-transition: background-color 0.3s-}

Коли меню з`являється то три смужки перемикача перетворюються в хрестик, які дозволяє закрити меню:

123456789101112131415161718192021222324252627282930

.bt-menu-open .bt-menu-trigger span {background-color: transparent-}.bt-menu-trigger span: before,.bt-menu-trigger span: after {position: absolute-left: 0-width: 100%-height: 100%-background: #fff-content: ``-transition: transform 0.3s-}.bt-menu-trigger span: before {transform: translateY(-250%)-}.bt-menu-trigger span: after {transform: translateY(250%)-}.bt-menu-open .bt-menu-trigger span: before {transform: translateY(0) rotate(45deg)-}.bt-menu-open .bt-menu-trigger span: after {transform: translateY(0) rotate(-45deg)-}

Елементи меню знаходяться в неврегульованих списку, який також має фіксоване положення і знаходиться зліва вгорі:

1234567891011121314151617181920212223242526272829303132333435363738394041424344

.bt-menu ul {position: fixed-top: 75px-left: 0-margin: 0-padding: 0-width: 90px-list-style: none-backface-visibility: hidden-}.bt-menu ul li,.bt-menu ul li a {display: block-width: 100%-text-align: center-}.bt-menu ul li {padding: 16px 0-opacity: 0-visibility: hidden-transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s-}.bt-menu ul li: First-child {transform: translate3d(-100%,200%,0)-}.bt-menu ul li: nth-child(2) {transform: translate3d(-100%,100%,0)-}.bt-menu ul li: nth-child(3) {transform: translate3d(-100%,0,0)-}.bt-menu ul li: nth-child(4) {transform: translate3d(-100%,-100%,0)-}.bt-menu ul li: nth-child(5) {transform: translate3d(-100%,-200%,0)-}

Відео: Створення меню в Adobe Muse + 2 варіанти фіксації (закріплення)

Коли меню з`явилося все елементи стають видно, але спочатку вони повинні бути приховані, що ми і зробили в самому початку уроку (прописавши в класі bt-menu приховати все меню):

.bt-menu .bt-menu-open ul li {visibility: visible-opacity: 1-transition: transform 0.3s, opacity 0.3s-transform: translate3d(0,0,0)-}

висновок

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

Успіхів!

джерело: tympanus.net

Поділися в соц мережах: