Hello everyone
I would like to make a menubar that has some "special" things in it. Below you can find the code I already have.
1. If the screen isn't big enough to show all the tabs, they should go into one "menu" icon and drop when the icon is being clicked. This appears to work, although I have one small problem. In "small screen mode", I prefer the dropdownmenu's being shown only when I click on them, so not when I go over it with my mouse. Is this possible to make it different than in "big screen mode"?
2. I would like to make a sub-dropdown menu. I have tried numerous things, but none seemed to work properly.
Could you guys help me with these problems? Thanks a lot!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 750px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 750px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home">Home</a></li>
<div class="dropdown">
<button class="dropbtn">Projecten
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Prójekt Ubuntu</a>
<a href="#">Voeg jouw project toe!</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Blogs
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Jolien en Kjell</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Transparantie
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Ons team</a>
<a href="#">Boekhouding</a>
<a href="#">Missie en visie</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Partners
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Bronze partners</a>
<a href="#">Silver partners</a>
<a href="#">Golden partners</a>
<a href="#">Platinum partners</a>
<a href="#">Word partner!</a>
</div>
</div>
<a href="#">Fotoalbum</a>
<a href="#">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
