Menu
I found this code on W3Schools for a drop down menu that I like the look of. Having just spent some time adapting the styling for the site I am trying to build (I am very, very far from being an expert) I now realise that I don’t know what to do with the button. I want to make that top item an “a href” link too. I tried to take out the button element and replace it with an “a href” nesting the drop down elements but it throws out the spacing on the menu. I’ve tried playing around with the padding but it makes no difference. I now realise the author didn’t mean the button itself to link to anything. It’s simply the action to trigger the drop down. Is it possible to alter this? I like the effect that the drop down options stay down until the user clicks again and the items below move down. Thanks.
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”
<style>
body {
font-family: “Lato”, sans-serif;
}
/* Fixed sidenav, full height
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content
.main {
margin-left: 200px; /* Same as the width of the sidenav
font-size: 20px; /* Increased text to enable scrolling
padding: 0px 10px;
}
/* Add an active class to the active dropdown button
.active {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon
.fa-caret-down {
float: right;
padding-right: 8px;
}
/* Some media queries for responsiveness
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class=”sidenav”>
<a href=”#about”>About</a>
<a href=”#services”>Services</a>
<a href=”#clients”>Clients</a>
<a href=”#contact”>Contact</a>
<button class=”dropdown-btn”>Dropdown
<i class=”fa fa-caret-down”></i>
</button>
<div class=”dropdown-container”>
<a href=”#”>Link 1</a>
<a href=”#”>Link 2</a>
<a href=”#”>Link 3</a>
</div>
<a href=”#contact”>Search</a>
</div>
<div class=”main”>
<h2>Sidebar Dropdown</h2>
<p>Click on the dropdown button to open the dropdown menu inside the side navigation.</p>
<p>This sidebar is of full height (100%) and always shown.</p>
<p>Some random text..</p>
</div>
<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content – This allows the user to have multiple dropdowns without any conflict
var dropdown = document.getElementsByClassName(“dropdown-btn”);
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener(“click”, function() {
this.classList.toggle(“active”);
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === “block”) {
dropdownContent.style.display = “none”;
} else {
dropdownContent.style.display = “block”;
}
});
}
</script>
</body>
</html>