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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...