Эластичное горизонтальное меню на CSS3 и jQuery

Разместил: Apocalypse
Опубликовано: 31 мая 2016

Достаточно уникальное горизонтальное меню, которое можно сворачивать с интересным эффектом Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.menu {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
height: 70px;
width: 70px;
padding: 15px 20px;
border-radius: 5px;
background: #ffffff;
box-shadow: 0 4px 64px rgba(0, 0, 0, 0.15);
transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);
z-index: 2;
}
.menu.expanded {
height: 80px;
width: 600px;
}
.menu span {
white-space: nowrap;
visibility: visible;
opacity: 1;
transition: .3s;
transform: rotateY(0deg);
}
.menu span:nth-of-type(1) {
transition-delay: .4s;
}
.menu span:nth-of-type(2) {
transition-delay: .5s;
}
.menu span:nth-of-type(3) {
transition-delay: .6s;
}
.menu span:nth-of-type(4) {
transition-delay: .7s;
}
.menu span.hidden {
width: 0;
visibility: hidden;
opacity: 0;
transform: rotateY(90deg);
}
.menu span.hidden:nth-of-type(1) {
transition-delay: .3s;
}
.menu span.hidden:nth-of-type(2) {
transition-delay: .2s;
}
.menu span.hidden:nth-of-type(3) {
transition-delay: .1s;
}
.menu span.hidden:nth-of-type(4) {
transition-delay: 0s;
}
.menu a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
color: #333333;
padding: 5px;
transition: .3s;
}
.menu a:hover {
color: #D84315;
}
.container {
order: 1;
width: 20px;
height: 24px;
padding: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.container:hover .toggle:before {
top: -9px;
}
.container:hover .toggle:after {
bottom: -7px;
}
.container .toggle {
position: relative;
width: 100%;
height: 2px;
background: #aaaaaa;
}
.container .toggle:before {
position: relative;
display: flex;
top: -7px;
height: 2px;
width: 100%;
background: #aaaaaa;
content: "";
transition: top .25s ease, bottom .25s ease, transform .5s ease;
}
.container .toggle:after {
position: relative;
display: flex;
bottom: -5px;
height: 2px;
width: 100%;
background: #aaaaaa;
content: "";
transition: top .25s ease, bottom .25s ease, transform .25s ease;
}
.container .toggle.close {
height: 0;
}
.container .toggle.close:before {
transform: rotate(45deg);
top: 0;
}
.container .toggle.close:after {
transform: rotate(-45deg);
bottom: 2px;
}
@keyframes respiration {
0% {
min-height: 100vh;
border: 0vh solid #ffffff;
}
75% {
min-height: 95vh;
border: 2.5vh solid #ffffff;
}
100% {
min-height: 100vh;
border: 0vh solid #ffffff;
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

.menu {

position: relative;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

box-sizing: border-box;

height: 70px;

width: 70px;

padding: 15px 20px;

border-radius: 5px;

background: #ffffff;

box-shadow: 0 4px 64px rgba(0, 0, 0, 0.15);

transition: 1.3s cubic-bezier(0.53, 0, 0.15, 1.3);

z-index: 2;

}

.menu.expanded {

height: 80px;

width: 600px;

}

.menu span {

white-space: nowrap;

visibility: visible;

opacity: 1;

transition: .3s;

transform: rotateY(0deg);

}

.menu span:nth-of-type(1) {

transition-delay: .4s;

}

.menu span:nth-of-type(2) {

transition-delay: .5s;

}

.menu span:nth-of-type(3) {

transition-delay: .6s;

}

.menu span:nth-of-type(4) {

transition-delay: .7s;

}

.menu span.hidden {

width: 0;

visibility: hidden;

opacity: 0;

transform: rotateY(90deg);

}

.menu span.hidden:nth-of-type(1) {

transition-delay: .3s;

}

.menu span.hidden:nth-of-type(2) {

transition-delay: .2s;

}

.menu span.hidden:nth-of-type(3) {

transition-delay: .1s;

}

.menu span.hidden:nth-of-type(4) {

transition-delay: 0s;

}

.menu a {

text-decoration: none;

text-transform: uppercase;

font-weight: bold;

color: #333333;

padding: 5px;

transition: .3s;

}

.menu a:hover {

color: #D84315;

}

.container {

order: 1;

width: 20px;

height: 24px;

padding: 5px;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

cursor: pointer;

}

.container:hover .toggle:before {

top: -9px;

}

.container:hover .toggle:after {

bottom: -7px;

}

.container .toggle {

position: relative;

width: 100%;

height: 2px;

background: #aaaaaa;

}

.container .toggle:before {

position: relative;

display: flex;

top: -7px;

height: 2px;

width: 100%;

background: #aaaaaa;

content: "";

transition: top .25s ease, bottom .25s ease, transform .5s ease;

}

.container .toggle:after {

position: relative;

display: flex;

bottom: -5px;

height: 2px;

width: 100%;

background: #aaaaaa;

content: "";

transition: top .25s ease, bottom .25s ease, transform .25s ease;

}

.container .toggle.close {

height: 0;

}

.container .toggle.close:before {

transform: rotate(45deg);

top: 0;

}

.container .toggle.close:after {

transform: rotate(-45deg);

bottom: 2px;

}

@keyframes respiration {

0% {

min-height: 100vh;

border: 0vh solid #ffffff;

}

75% {

min-height: 95vh;

border: 2.5vh solid #ffffff;

}

100% {

min-height: 100vh;

border: 0vh solid #ffffff;

}

2#: HTML код меню:

<div class="menu expanded">
<div class="container close">
<div class="toggle close"></div>
</div>
<span class=""><a href="#">Home </a></span>
<span class=""><a href="#">About</a></span>
<span class=""><a href="#">Info</a></span>
<span class=""><a href="#">Contact</a></span>
</div>

<script>
$('.container').on('click', function() {
$('.menu').toggleClass('expanded');  
$('span').toggleClass('hidden');  
$('.container, .toggle').toggleClass('close');  
});
</script>

</div>

<span class=""><a href="#">About</a></span>

<span class=""><a href="#">Contact</a></span>

</div>

$('.container').on('click', function() {

$('.menu').toggleClass('expanded');

$('span').toggleClass('hidden');

$('.container, .toggle').toggleClass('close');

});

</script>

Автор публикации

не в сети 5 месяцев

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1096Регистрация: 27-08-2018

Метки: CSS3 jQuery Menu Горизонтальное Меню Эластичное

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Всевидящее око

Новый комментарий от пользователя Эдуард: «Забыл добавить. Снег появляется то в футере (когда ставил перед закрывающим тегом body), то наоборот почему-то в самом верху (причем сам блог сдвигался вниз), когда ставил его после открывающего тега, как было указано в статье.» в материале Приятный Новогодний снежок на HTML5 Canvas

2024-12-29 16:26:03

VVL99

Всех с новым годом!

2025-01-02 17:46:18

Всевидящее око

Новый комментарий от пользователя Acıbadem su kaçak tespiti: «Acıbadem su kaçak tespiti Kadıköy su kaçağı tespiti: Kadıköy’deki su sızıntılarında noktasal tespit için yanınızdayız. https://www.grand-indonesia.com/author/kacak/» в материале Фон из анимированных самолётов на CSS3

2025-01-02 18:25:49

Всевидящее око

Новый комментарий от пользователя elavil for anxiety reviews: «elavil for anxiety reviews

elavil for anxiety reviews» в материале Крутой анимированный индикатор загрузки в виде снежка на CSS3

2025-01-03 19:51:39

Всевидящее око

Новый комментарий от пользователя how long can you take elavil: «how long can you take elavil

how long can you take elavil» в материале След за курсором из частиц на HTML5 Canvas

2025-01-05 15:00:13

stalker1313

Привет. Может кто-нибудь знает почему не получается зайти на сайт playstation через vpn и как это исправить? Без vpn захожу на сайт, но не могу зарегать акк.
Ошибка:
Страница недоступна
Сайт playstation.com не отправил данных.
ERR_EMPTY_RESPONSE

2025-01-08 18:00:15

Al-Sher

@stalker1313, Привет. Возможно впн блочит их сайт. Попробовал со своим личным впном - сайт открывается

2025-01-08 19:56:24

stalker1313

@Al-Sher, бесплатный, хороший vpn посоветуете?

2025-01-08 22:01:35

stalker1313

Можно как-то сохранить все статьи с сайта wp в отдельные вордовские документы?

2025-01-09 19:50:03

Al-Sher

@stalker1313, Увы, я уже давно пользуюсь только личным впн на своей впске)

2025-01-10 20:41:42

......

Для публикации сообщений в чате необходимо авторизоваться