Clock

Khmer Web

Gateway to web application
Responsive Menu with Dropdown
Edit

The responsive menu below is inspired by the one from w3schools.com.

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    
  	<title>Responsive Menu with Dropdown</title>
    <style>
        .topnav {
  		  overflow: hidden;
  		  background-color: black;
		}

		.topnav a {
  		  float: left;
  		  display: block;
  		  color: #f2f2f2;
  		  text-align: center;
  		  padding: 14px 16px;
  		  text-decoration: none;
  		  font-size: 17px;
	 	}

		.active {
  		  background-color: teal;
  		  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: 600px) {
  		 	.topnav a:not(:first-child), .dropdown .dropbtn {
    	  	  display: none;
            }
        
  			.topnav a.icon {
    	  	  float: right;
    	  	  display: block;
  			}
		}

		@media screen and (max-width: 600px) {
  		  .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" class="active">Home</a>
  	  <a href="#news">News</a>
  	  <a href="#contact">Contact</a>
  	  <div class="dropdown">
    	<button class="dropbtn">Dropdown<i class="fa fa-caret-down"></i></button>
    	<div class="dropdown-content">
      	  <a href="#">Link 1</a>
      	  <a href="#">Link 2</a>
      	  <a href="#">Link 3</a>
      	</div>
  	  </div>
  	  <a href="#about">About</a>
  	  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
	</div>

	<script>
		function myFunction() {
  		  var x = document.getElementById("myTopnav");
  		  if (x.className === "topnav") {
    	  x.className += " responsive";
  		  } else {
    		x.className = "topnav";
  		  }
		}
	</script>

  </body>
</html>