Im working on a menu and almost there. I have built the collapsible menu, and now trying to contain it in a dropdown menu that is displayed when the logo (which is styled as a dropdown button) is clicked. Currently the menu appears straight away on page load.
How can I hide the menu on page load, and make it only appear when the logo/dropwdown button is clicked? What code do I need to add to achieve this please?
See page live with below code here: https://boys-cry.com/test/
Thanks!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 18px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 0px 0px 5px 5px;
margin: 0px 0px 0px 15px;
}
.accordion:hover {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 18px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 0px 0px 5px 5px;
margin: 0px 0px 0px 15px;
}
.accordion:focus {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 18px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 0px 0px 5px 5px;
margin: 0px 0px 0px 15px;
}
.panel {
color: black;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #00000000;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 0px 0px 0px 10px;
margin: 0px 0px 0px 11px;
}
.link {
background-color: #00000000;
color: black;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 18px;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 6px 0px 6px 5px;
}
.link:hover {
background-color: #00000000;
color: black;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 18px;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 6px 0px 6px 5px;
}
hr.solid {
border-left: none;
border-right: none;
border-top: 1px solid #000000;
border-bottom: none;
max-width: 200px;
margin-left: 15px;
padding-top: 5px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
background-repeat: no-repeat;
background-size: 100px 100px;
}
.dropbtn:hover {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
background-repeat: no-repeat;
background-size: 100px 100px;
}
.dropbtn:focus {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
background-repeat: no-repeat;
background-size: 100px 100px;
outline: none;
}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown">
<div>
<hr class="solid">
<div class="accordion-div">
<button class="accordion"><span class="faq__question-heading">We</span></button>
<div class="panel">
<p style="padding:18px 0;">We are Content Creators.<br>We cultivate desire and change through story telling.</p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading">Clients</span></button>
<div class="panel">
<p style="padding:18px 0;">Red Bull . Nike . Vogue . Adidas . Rolex . Andrew Cotton . Dynamo . Coca Cola . Nowness . Bose . Selfridges . Levis . Fedex . Liverpool FC . England Rugby . Rimowa . GQ . Vanity Fair</p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading"><a class="link" href="mailto:[email protected]">Get In Touch</a></span></button>
<div class="panel"></div>
</div>
<hr class="solid">
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
let active = document.querySelectorAll(".accordion-div .accordion.active");
for(let j = 0; j < active.length; j++){
active[j].classList.remove("active");
active[j].nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("active");
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
I checked the site and you just need to add the following css
If the logo doesn't have the css show class it hides the menu, if it has the show class it shows the menu
CSS
#myDropdown > div {
display: none
}
#myDropdown.show > div {
display: block
}