Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Эффект кнопки для вызова списка меню
Дата добавления: 03.03.2017 - 16:04
Категория: Кнопки / иконки
Добавил: Buger
Количество просмотров: 263
Количество комментариев: 0
Размер файла: 11.4Kb
Рейтинг материала: 5.0 / 1
БЕСПЛАТНО
рейтинг
5.0
/
голосов
1
Поделись с друзьями:
Данная реализация кнопки заменит стандартную кнопку для вызова списка меню. Обычно такие кнопки часто встречаются в мобильных версиях, но ее можно встретить и PC версиях. Думаю что ее можно применить где угодно, но мы будем разговаривать не о том, где ее применить, а о том как такую кнопку сделать, причем с интересным и крутым эффектом при нажатии на нее. Ну а где ее применять - решать только вам, главное иметь фантазию :) Демонстрацию сможете увидеть, скачав данный файл.
И так начнем.
Первым что нам нужно сделать, это подключить стили:
Теперь надо указать HTML код разметки элементов данной кнопки
Если у вас нет библиотеки jQuery, то подключаем. Но такое бывает редко, сейчас jquery используется практически везде, так как без данной библиотеки не будет работать ни один скрипт и функции. Подключать будем из CDN
Ну и в завершении, подключим скрипт для кнопки
Источник: https://art-ucoz.ru/
И так начнем.
Первым что нам нужно сделать, это подключить стили:
Код
<style class="cp-pen-styles">
body,
html {
width: 100%;
height: 100%;
background-color: #17181F;
}
.container {
width: 80px;
height: 80px;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.stick {
width: 80px;
height: 8px;
border-radius: 4px;
margin-bottom: 15px;
background-color: #2DFDB9;
display: inline-block;
}
.stick:last-child {
margin-bottom: 0px;
}
.stick-1.open {
-webkit-animation: stick-1-open .6s ease-out forwards;
animation: stick-1-open .6s ease-out forwards;
}
.stick-2.open {
-webkit-animation: stick-2-open .6s linear forwards;
animation: stick-2-open .6s linear forwards;
}
.stick-3.open {
-webkit-animation: stick-3-open .6s linear forwards;
animation: stick-3-open .6s linear forwards;
}
@-webkit-keyframes stick-1-open {
0% {
width: 80px;
}
40% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(40px, 0px);
transform: translate(40px, 0px);
}
75%,
80% {
width: 8px;
-webkit-transform: translate(40px, -50px);
transform: translate(40px, -50px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
100% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(35px, 46px);
transform: translate(35px, 46px);
}
}
@keyframes stick-1-open {
0% {
width: 80px;
}
40% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(40px, 0px);
transform: translate(40px, 0px);
}
75%,
80% {
width: 8px;
-webkit-transform: translate(40px, -50px);
transform: translate(40px, -50px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
100% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(35px, 46px);
transform: translate(35px, 46px);
}
}
@-webkit-keyframes stick-2-open {
80% {
background-color: #2DFDB9;
-webkit-transform: translate(0px, 0px) rotate(0deg);
transform: translate(0px, 0px) rotate(0deg);
}
100% {
background-color: #ff1456;
-webkit-transform: translate(8px, 0px) rotate(40deg);
transform: translate(8px, 0px) rotate(40deg);
}
}
@keyframes stick-2-open {
80% {
background-color: #2DFDB9;
-webkit-transform: translate(0px, 0px) rotate(0deg);
transform: translate(0px, 0px) rotate(0deg);
}
100% {
background-color: #ff1456;
-webkit-transform: translate(8px, 0px) rotate(40deg);
transform: translate(8px, 0px) rotate(40deg);
}
}
@-webkit-keyframes stick-3-open {
80% {
background-color: #2DFDB9;
-webkit-transform: translate(0px, 0px) rotate(0deg);
transform: translate(0px, 0px) rotate(0deg);
}
100% {
background-color: #ff1456;
-webkit-transform: translate(8px, -23px) rotate(-40deg);
transform: translate(8px, -23px) rotate(-40deg);
}
}
@keyframes stick-3-open {
80% {
background-color: #2DFDB9;
-webkit-transform: translate(0px, 0px) rotate(0deg);
transform: translate(0px, 0px) rotate(0deg);
}
100% {
background-color: #ff1456;
-webkit-transform: translate(8px, -23px) rotate(-40deg);
transform: translate(8px, -23px) rotate(-40deg);
}
}
.stick-1.close {
width: 8px;
-webkit-transform: translate(27px, 26px);
transform: translate(27px, 26px);
-webkit-animation: stick-1-close .6s ease-out forwards;
animation: stick-1-close .6s ease-out forwards;
}
.stick-2.close {
-webkit-transform: translate(0px, 0px) rotate(40deg);
transform: translate(0px, 0px) rotate(40deg);
-webkit-animation: stick-2-close .6s ease-out forwards;
animation: stick-2-close .6s ease-out forwards;
}
.stick-3.close {
-webkit-transform: translate(0px, -23px) rotate(-40deg);
transform: translate(0px, -23px) rotate(-40deg);
-webkit-animation: stick-3-close .6s ease-out forwards;
animation: stick-3-close .6s ease-out forwards;
}
@-webkit-keyframes stick-1-close {
0%,
70% {
width: 0px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes stick-1-close {
0%,
70% {
width: 0px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-webkit-keyframes stick-2-close {
0% {
background-color: #ff1456;
width: 80px;
}
20% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(0, 0px) rotate(40deg);
transform: translate(0, 0px) rotate(40deg);
}
40% {
background-color: #2DFDB9;
width: 0px;
}
65% {
-webkit-transform: translate(0, -70px);
transform: translate(0, -70px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
80% {
width: 0px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
@keyframes stick-2-close {
0% {
background-color: #ff1456;
width: 80px;
}
20% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(0, 0px) rotate(40deg);
transform: translate(0, 0px) rotate(40deg);
}
40% {
background-color: #2DFDB9;
width: 0px;
}
65% {
-webkit-transform: translate(0, -70px);
transform: translate(0, -70px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
80% {
width: 0px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
@-webkit-keyframes stick-3-close {
0% {
background-color: #ff1456;
width: 80px;
}
20% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(0, -23px) rotate(-40deg);
transform: translate(0, -23px) rotate(-40deg);
}
40% {
background-color: #2DFDB9;
}
65% {
-webkit-transform: translate(0, -93px);
transform: translate(0, -93px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
90% {
width: 8px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
@keyframes stick-3-close {
0% {
background-color: #ff1456;
width: 80px;
}
20% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(0, -23px) rotate(-40deg);
transform: translate(0, -23px) rotate(-40deg);
}
40% {
background-color: #2DFDB9;
}
65% {
-webkit-transform: translate(0, -93px);
transform: translate(0, -93px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
90% {
width: 8px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
</style>
body,
html {
width: 100%;
height: 100%;
background-color: #17181F;
}
.container {
width: 80px;
height: 80px;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.stick {
width: 80px;
height: 8px;
border-radius: 4px;
margin-bottom: 15px;
background-color: #2DFDB9;
display: inline-block;
}
.stick:last-child {
margin-bottom: 0px;
}
.stick-1.open {
-webkit-animation: stick-1-open .6s ease-out forwards;
animation: stick-1-open .6s ease-out forwards;
}
.stick-2.open {
-webkit-animation: stick-2-open .6s linear forwards;
animation: stick-2-open .6s linear forwards;
}
.stick-3.open {
-webkit-animation: stick-3-open .6s linear forwards;
animation: stick-3-open .6s linear forwards;
}
@-webkit-keyframes stick-1-open {
0% {
width: 80px;
}
40% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(40px, 0px);
transform: translate(40px, 0px);
}
75%,
80% {
width: 8px;
-webkit-transform: translate(40px, -50px);
transform: translate(40px, -50px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
100% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(35px, 46px);
transform: translate(35px, 46px);
}
}
@keyframes stick-1-open {
0% {
width: 80px;
}
40% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(40px, 0px);
transform: translate(40px, 0px);
}
75%,
80% {
width: 8px;
-webkit-transform: translate(40px, -50px);
transform: translate(40px, -50px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
100% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(35px, 46px);
transform: translate(35px, 46px);
}
}
@-webkit-keyframes stick-2-open {
80% {
background-color: #2DFDB9;
-webkit-transform: translate(0px, 0px) rotate(0deg);
transform: translate(0px, 0px) rotate(0deg);
}
100% {
background-color: #ff1456;
-webkit-transform: translate(8px, 0px) rotate(40deg);
transform: translate(8px, 0px) rotate(40deg);
}
}
@keyframes stick-2-open {
80% {
background-color: #2DFDB9;
-webkit-transform: translate(0px, 0px) rotate(0deg);
transform: translate(0px, 0px) rotate(0deg);
}
100% {
background-color: #ff1456;
-webkit-transform: translate(8px, 0px) rotate(40deg);
transform: translate(8px, 0px) rotate(40deg);
}
}
@-webkit-keyframes stick-3-open {
80% {
background-color: #2DFDB9;
-webkit-transform: translate(0px, 0px) rotate(0deg);
transform: translate(0px, 0px) rotate(0deg);
}
100% {
background-color: #ff1456;
-webkit-transform: translate(8px, -23px) rotate(-40deg);
transform: translate(8px, -23px) rotate(-40deg);
}
}
@keyframes stick-3-open {
80% {
background-color: #2DFDB9;
-webkit-transform: translate(0px, 0px) rotate(0deg);
transform: translate(0px, 0px) rotate(0deg);
}
100% {
background-color: #ff1456;
-webkit-transform: translate(8px, -23px) rotate(-40deg);
transform: translate(8px, -23px) rotate(-40deg);
}
}
.stick-1.close {
width: 8px;
-webkit-transform: translate(27px, 26px);
transform: translate(27px, 26px);
-webkit-animation: stick-1-close .6s ease-out forwards;
animation: stick-1-close .6s ease-out forwards;
}
.stick-2.close {
-webkit-transform: translate(0px, 0px) rotate(40deg);
transform: translate(0px, 0px) rotate(40deg);
-webkit-animation: stick-2-close .6s ease-out forwards;
animation: stick-2-close .6s ease-out forwards;
}
.stick-3.close {
-webkit-transform: translate(0px, -23px) rotate(-40deg);
transform: translate(0px, -23px) rotate(-40deg);
-webkit-animation: stick-3-close .6s ease-out forwards;
animation: stick-3-close .6s ease-out forwards;
}
@-webkit-keyframes stick-1-close {
0%,
70% {
width: 0px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes stick-1-close {
0%,
70% {
width: 0px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-webkit-keyframes stick-2-close {
0% {
background-color: #ff1456;
width: 80px;
}
20% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(0, 0px) rotate(40deg);
transform: translate(0, 0px) rotate(40deg);
}
40% {
background-color: #2DFDB9;
width: 0px;
}
65% {
-webkit-transform: translate(0, -70px);
transform: translate(0, -70px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
80% {
width: 0px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
@keyframes stick-2-close {
0% {
background-color: #ff1456;
width: 80px;
}
20% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(0, 0px) rotate(40deg);
transform: translate(0, 0px) rotate(40deg);
}
40% {
background-color: #2DFDB9;
width: 0px;
}
65% {
-webkit-transform: translate(0, -70px);
transform: translate(0, -70px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
80% {
width: 0px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
@-webkit-keyframes stick-3-close {
0% {
background-color: #ff1456;
width: 80px;
}
20% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(0, -23px) rotate(-40deg);
transform: translate(0, -23px) rotate(-40deg);
}
40% {
background-color: #2DFDB9;
}
65% {
-webkit-transform: translate(0, -93px);
transform: translate(0, -93px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
90% {
width: 8px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
@keyframes stick-3-close {
0% {
background-color: #ff1456;
width: 80px;
}
20% {
background-color: #ff1456;
width: 8px;
-webkit-transform: translate(0, -23px) rotate(-40deg);
transform: translate(0, -23px) rotate(-40deg);
}
40% {
background-color: #2DFDB9;
}
65% {
-webkit-transform: translate(0, -93px);
transform: translate(0, -93px);
-webkit-animation-timing-function: cubic-bezier(0, 1, 1, 1);
animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
90% {
width: 8px;
}
100% {
width: 80px;
-webkit-transform: translate(0, 0px);
transform: translate(0, 0px);
}
}
</style>
Теперь надо указать HTML код разметки элементов данной кнопки
Код
<div class="container">
<div class="stick stick-1"></div>
<div class="stick stick-2"></div>
<div class="stick stick-3"></div>
</div>
<div class="stick stick-1"></div>
<div class="stick stick-2"></div>
<div class="stick stick-3"></div>
</div>
Если у вас нет библиотеки jQuery, то подключаем. Но такое бывает редко, сейчас jquery используется практически везде, так как без данной библиотеки не будет работать ни один скрипт и функции. Подключать будем из CDN
Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
Ну и в завершении, подключим скрипт для кнопки
Код
<script>
$(document).ready(function () {
$(".container").click(function () {
$(".stick").toggleClass(function () {
return $(this).is('.open, .close') ? 'open close' : 'open';
});
});
});
</script>
$(document).ready(function () {
$(".container").click(function () {
$(".stick").toggleClass(function () {
return $(this).is('.open, .close') ? 'open close' : 'open';
});
});
});
</script>
Источник: https://art-ucoz.ru/