Create Responsive Topnav With Dropdown

Its features:

  • It is completely responsive.

  • When you compress it, a menu icon appears.

  • Clicking on the menu icon displays the menu vertically.

  • Touching the button will display a dropdown.

  • You can add a link to the name of each menu.

  • It is a hoverable responsive navbar.

Try to create like yourself by following the codes below :

Step 1) Add to 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">
Step 2) Add to html : <h2>Create Responsive Topnav With Dropdown</h2> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#abcd">Link 1</a> <a href="#abcd">Link 2</a> <a href="#abcd">Link 3</a> <a href="#abcd">Link 4</a> <a href="#abcd">Link 5</a> <a href="#abcd">Link 6</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#abcd">Link 1</a> <a href="#abcd">Link 2</a> <a href="#abcd">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#abcd">Link 1</a> <a href="#abcd">Link 2</a> <a href="#abcd">Link 3</a> <a href="#abcd">Link 4</a> <a href="#abcd">Link 5</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#abcd">Link 1</a> <a href="#abcd">Link 2</a> <a href="#abcd">Link 3</a> <a href="#abcd">Link 4</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#abcd">Link 1</a> <a href="#abcd">Link 2</a> <a href="#abcd">Link 3</a> <a href="#abcd">Link 4</a> <a href="#abcd">Link 5</a> <a href="#abcd">Link 6</a> </div> </div> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div>
Step 3) Add to css : .topnav { overflow: hidden; background-image: linear-gradient(#bbb, #ddd, #bbb); } .topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .active { background-color: #aaa; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: black; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #ccc; 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; border-bottom:2px solid white; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #000; color:white; } .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; } Step 4) Add to javascript : <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script>

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.