I have created a responsive navigation-bar/menu but I want it to appear with a sliding animation from the top to the bottom when the needed button is presed. The menu does appear on itself but it completely ignores the transitioni have set it to execute. I tried multiple methods – using webkit library, using the change in height method, etc. It appears that none of them work with my code. If anyone can help, please reach to me.
JavaScript
x
6
1
const toggleButton = document.querySelector('.dot_a');2
const navbarLinks = document.querySelector('.nav-list');3
4
toggleButton.addEventListener('click', () => {5
navbarLinks.classList.toggle('active')6
})JavaScript
1
170
170
1
body {2
background-color: black;3
background-size: cover;4
background-repeat: no-repeat;5
background-attachment: fixed;6
font-family: Arial, Helvetica, sans-serif;7
font-weight: bold;8
margin: 0;9
}10
11
.pro_column1 {12
width: 15%;13
}14
15
.pro_column2 {16
width: 85%;17
}18
19
.nav {20
overflow: hidden;21
background-color: white;22
/*opacity: 60%;*/23
margin: 10px;24
border-radius: 10px;25
width: 850px;26
/*background:#3c6382;27
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/28
/*border: solid black 2px;*/29
}30
31
32
33
.nav a {34
color: #747d8c;35
text-align: center;36
padding: 27px 10px;37
text-decoration: none;38
font-size: 17px;39
margin: 0;40
border-radius: 10px;41
transition: 1s;42
}43
44
.nav a:hover {45
background-color: #ddd;46
color: black;47
-webkit-animation: 1s ease-in forwards;48
}49
50
.dot_a {51
padding: 25px 10px;52
font-size: 17px;53
text-align: center;54
margin: 0;55
display: inline-block;56
border-radius: 10px;57
transition: 1s;58
59
-webkit-user-select: none;60
-khtml-user-select: none;61
-moz-user-select: none;62
-ms-user-select: none;63
-o-user-select: none;64
user-select: none;65
}66
67
i {68
/*float: right;*/69
font-size: 20px;70
border: none;71
outline: none;72
color: #747d8c;73
padding: 25px 5px;74
font-family: inherit;75
margin: 0px;76
border-radius: 20px;77
transition: 1s;78
}79
80
.dot {81
height: 15px;82
width: 15px;83
border-radius: 50%;84
display: inline-block;85
margin: 0px;86
}87
88
.column {89
float: left;90
width: 33.33%;91
padding: 10px;92
height: 300px;93
}94
95
.row:after {96
content: "";97
display: table;98
clear: both;99
}100
101
@media screen and (max-width: 870px) {102
.nav a {103
padding-top: 5px;104
padding-bottom: 5px;105
display: block;106
107
108
109
}110
.dot_a {111
padding-top: 3px;112
padding-bottom: 0px;113
}114
.nav {115
width: 90%;116
117
118
}119
.dot {120
margin-top: 15px;121
margin-bottom: 15px;122
}123
124
125
.nav-list{ 126
display: none;127
max-height: 0;128
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;129
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;130
131
132
}133
134
.nav-list.active {135
display: block;136
margin: 0;137
padding: 0; 138
max-height: fit-content;139
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;140
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;141
142
143
}144
145
}146
147
@-webkit-keyframes slide-in-top {148
0% {149
-webkit-transform: translateY(-1000px);150
transform: translateY(-1000px);151
opacity: 0;152
}153
100% {154
-webkit-transform: translateY(0);155
transform: translateY(0);156
opacity: 1;157
}158
}159
@keyframes slide-in-top {160
0% {161
-webkit-transform: translateY(-1000px);162
transform: translateY(-1000px);163
opacity: 0;164
}165
100% {166
-webkit-transform: translateY(0);167
transform: translateY(0);168
opacity: 1;169
}170
}JavaScript
1
30
30
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Начало</title>5
<link rel="shortcut icon" type="image/png" href="favicon.jpg">6
<link rel="stylesheet" href="IndexStyle.css">7
<meta name="viewport" content="width=device-width, initial-scale=1">8
<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>9
</head>10
<body>11
<center>12
<nav class="nav">13
<div class="dot_a">14
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>15
<span class="dot" style="background-color: #ff4757;"></span>16
<span class="dot" style="background-color: #ffa502"></span>17
<span class="dot" style="background-color: #2ed573;"></span>18
</div>19
<span class="nav-list">20
<a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i> НАЧАЛО</a>21
<a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i> HTML&CSS</a>22
<a class="anchors" href="#"><i class="fas fa-tools"></i> ИНСТРУМЕНТИ</a>23
<a class="anchors" href="#"><i class="fas fa-thumbtack"></i> ЗАДАЧИ</a>24
<a class="anchors" href="#"><i class="far fa-address-card "></i> ЗА НАС</a> 25
</span>26
</nav>27
</center>28
<script src="ResponsiveMenu.js" ></script>29
</body>30
</html>Advertisement
Answer
A easy way to do it is with CSS, for this cases i always use Animista. Try adding this to your CSS file and then add the class slide-in-top to your menu container.
JavaScript
1
31
31
1
.slide-in-top {2
-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;3
animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;4
}5
6
7
@-webkit-keyframes slide-in-top {8
0% {9
-webkit-transform: translateY(-1000px);10
transform: translateY(-1000px);11
opacity: 0;12
}13
100% {14
-webkit-transform: translateY(0);15
transform: translateY(0);16
opacity: 1;17
}18
}19
@keyframes slide-in-top {20
0% {21
-webkit-transform: translateY(-1000px);22
transform: translateY(-1000px);23
opacity: 0;24
}25
100% {26
-webkit-transform: translateY(0);27
transform: translateY(0);28
opacity: 1;29
}30
}31