I have been attempting to put together a drop down menu which slides down rather than “just appears” upon the click event. I tried to apply a transition to the drop down menu with no success. Help would be appreciated. I would like come to a solution with both css and javascript.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<!-- <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> -->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/36947df53d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="logo">
<p id="logo">Logo</p>
<button id="btn"><i class="fa-solid fa-bars"></i></button>
</div>
<nav class="nav">
<ul class ="dropmenu" id="dropdown">
<li><a href="contact.html" class="link">Link 1</a></li>
<li><a href="#" class="link">Link 2</a></li>
<li><a href="#" class="link" id="last">Link 3</a></li>
</ul>
</nav>
<div class = input>
<!-- <input type="checkbox" id="myCheckbox"> -->
</div>
<script src="script.js"></script>
</body>
</html>
CSS
Applied a transition to the #dropdown but with no success
body {
height: 100vh;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.logo {
display: block;
text-align: left;
background: #f8f9f9;
height: 10vh;
}
.logo #logo {
display: inline;
line-height: 10vh;
font-size: 1.6em;
margin-left: 0.5em;
color: #438ED9;
}
button#btn {
display: inline;
float: right;
margin-right: 2em;
margin-top: 0;
margin-bottom: 0;
border: none;
background-color: #f8f9f9;
padding: 0;
}
nav {
display: block;
background-color: #438ED9;
width: 100vw;
/**/
}
nav ul#dropdown {
display: none;
list-style-type: none;
margin: 0;
padding-left: 0;
box-shadow: none;
overflow-y: hidden;
max-height: 21vh; /* approximate max height */
transition-property: all;
transition-duration: .5s
}
nav ul li {
text-align: center;
}
.link {
display: block;
color: white;
font-size: 1.5em;
background-color: #438ED9;
text-decoration: none;
width: 100vw;
height: 7vh;
line-height: 7vh;
border-bottom: 2px solid black;
text-align: center;
}
#last {
border-bottom: none;
}
.link:hover {
background-color: blue;
}
.link:active {
background-color: blue;
}
.visible {
display: block !important;
}
.fa-bars:before, .fa-navicon:before {
content: "f0c9";
font-size: 20px;
line-height: 10vh;
}
.fa-solid .fa-bars:hover {
color: red;
}
.fa-solid:active, .fa-bars:active {
color: grey;
}
@media only screen and (min-width: 480px) {
.fa-bars:before, .fa-navicon:before {
font-size: 30px;
}
/* #dropdown {
display: block;
} */
}
@media only screen and (min-width: 600px) {
.fa-bars:before, .fa-navicon:before {
font-size: 30px;
}
nav ul {
display: block;
text-align: center;
float: right;
margin-right: 30px;
}
nav ul li {
display: inline;
text-align: center;
padding: 0 10px;
}
#btn i {
display: none;
}
nav {
height: 7vh;
}
.link {
display: inline;
color: white;
font-size: 1.2em;
border-bottom: none;
}
.link:hover {
background-color: #438ED9;
}
.link:active {
background-color: #438ED9;
}
}
JS
document.querySelector("body").addEventListener("click", function(event){
let dropd = document.querySelector('#dropdown');
if (!event.target.parentNode.matches('#btn')) {
dropd.classList.remove("visible");
} else {
dropd.classList.toggle("visible");
}
});