Jump to content
KC031

Subdropdown + changing menu

Recommended Posts

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>

 

Edited by KC031

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×