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 >
<button onclick="myFunction()" >Dropdown</button>
<div id="myDropdown">
<div>
<hr >
<div >
<button ><span >We</span></button>
<div >
<p style="padding:18px 0;">We are Content Creators.<br>We cultivate desire and change through story telling.</p>
</div>
<hr >
<button ><span >Clients</span></button>
<div >
<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 >
<button ><span ><a href="mailto:[email protected]">Get In Touch</a></span></button>
<div ></div>
</div>
<hr >
</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>
CodePudding user response：
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
}
CodePudding user response：
to answer your request you want to display your drop down menu when you click on your logo
in your myFunction() you have to put this :
function myFunction() {
if(document.getElementById("myDropdown").style.visibility == "visible"){
document.getElementById("myDropdown").style.visibility = "hidden";
} else {
document.getElementById("myDropdown").style.visibility = "visible";
}
}
and in Css you have to place this :
#myDropdown{
visibility: hidden;
}