How to Make Drop Down Menu with Sub Menu
in HTML, CSS and Javascript
What is Drop-Down Menu?
Just, Drop down menu implies that elements on the route bar from the sub-menu emerge while clicking or by doing float on the parent route joins. Submenu assists with lessening space on the route bar that makes it more straightforward for clients to investigate their desired things from the site.
What number of connections ought to be in your primary route and sub-menu?
You can add nav joins on your fundamental route menu and sub-menu as need of your site and it likewise relies upon the width of the route menu bar. Ordinarily you can add 5 to 7 nav joins on the principal route bar and 3 to 5 on the drop-down sub-menu.
Drop Down Navigation Menu with Sub Menu Video Tutorial
Drop Down Navigation Menu with Sub Menu [Source Codes]
To Create Drop Down Navigation Menu with Sub Menu with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title> Responsive Drop Down Navigation Menu</title>
- <link rel="stylesheet" href="style.css">
- <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- </head>
- <body>
- <nav>
- <div class="navbar">
- <div class="nav-links">
- <ul class="links">
- <li><a href="#">HOME</a></li>
- <li>
- <a href="#">HTML & CSS</a>
- <i class='bx bxs-chevron-down htmlcss-arrow arrow '></i>
- <ul class="htmlCss-sub-menu sub-menu">
- <li><a href="#">Learn HTML</a></li>
- <li><a href="#">HTML Video Tutorial</a></li>
- <li><a href="#">HTML Reference</a></li>
- <li><a href="#">Get Certified</a></li>
- <li class="more">
- <span><a href="#">CSS</a>
- <i class='bx bxs-chevron-right arrow more-arrow'></i>
- </span>
- <ul class="more-sub-menu sub-menu">
- <li><a href="#">Learn CSS</a></li>
- <li><a href="#">CSS Video Tutorial</a></li>
- <li><a href="#">CSS Reference</a></li>
- <li><a href="#">Get Certified</a></li>
- </ul>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">JAVASCRIPT</a>
- <i class='bx bxs-chevron-down js-arrow arrow '></i>
- <ul class="js-sub-menu sub-menu">
- <li><a href="#">Learn JAVASCRIPT</a></li>
- <li><a href="#">JAVASCRIPT Video Tutorial</a></li>
- <li><a href="#">JAVASCRIPT Reference</a></li>
- <li><a href="#">Get Certified</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Python</a>
- <i class='bx bxs-chevron-down js-arrow arrow '></i>
- <ul class="js-sub-menu sub-menu">
- <li><a href="#">Learn Python</a></li>
- <li><a href="#">Python Video Tutorial</a></li>
- <li><a href="#">Python Reference</a></li>
- <li><a href="#">Get Certified</a></li>
- </ul>
- </li>
- <li><a href="#">ABOUT US</a></li>
- <li><a href="#">CONTACT US</a></li>
- </ul>
- </div>
- </div>
- </nav>
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- body{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- min-height: 100vh;
- font-family: Arial, sans-serif;
- }
- nav{
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- height: 70px;
- background: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- z-index: 99;
- }
- nav .navbar{
- height: 100%;
- max-width: 1250px;
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin: auto;
- padding: 0 50px;
- }
- nav .navbar .nav-links{
- line-height: 70px;
- height: 100%;
- }
- nav .navbar .links{
- display: flex;
- }
- nav .navbar .links li{
- position: relative;
- display: flex;
- align-items: center;
- justify-content: space-between;
- list-style: none;
- padding: 0 14px;
- }
- nav .navbar .links li a{
- height: 100%;
- text-decoration: none;
- white-space: nowrap;
- color: black;
- font-size: 15px;
- font-weight: 700;
- }
- nav .navbar .links li a:hover{color: #2582EE;}
- .links li:hover .htmlcss-arrow,
- .links li:hover .js-arrow{
- transform: rotate(180deg);
- }
-
- nav .navbar .links li .arrow{
- height: 100%;
- width: 22px;
- line-height: 70px;
- text-align: center;
- display: inline-block;
- color: black;
- transition: all 0.3s ease;
- }
- nav .navbar .links li .sub-menu{
- position: absolute;
- top: 70px;
- left: 0;
- line-height: 40px;
- background: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- border-radius: 0 0 4px 4px;
- display: none;
- z-index: 2;
- }
- nav .navbar .links li:hover .htmlCss-sub-menu,
- nav .navbar .links li:hover .js-sub-menu{
- display: block;
- }
- .navbar .links li .sub-menu li{
- padding: 0 22px;
- border-bottom: 1px solid rgba(255,255,255,0.1);
- }
- .navbar .links li .sub-menu a{
- color: black;
- font-size: 15px;
- font-weight: 600;
- }
- .navbar .links li .sub-menu .more-arrow{
- line-height: 40px;
- }
- .navbar .links li .sub-menu .more-sub-menu{
- position: absolute;
- top: 0;
- left: 100%;
- border-radius: 0 4px 4px 4px;
- z-index: 1;
- display: none;
- }
- .links li .sub-menu .more:hover .more-sub-menu{
- display: block;
- }
-
- .navbar .nav-links .sidebar-logo{
- display: none;
- }
-
Now paste the following codes into your script.js file
-
- let htmlcssArrow = document.querySelector(".htmlcss-arrow");
- htmlcssArrow.onclick = function() {
- navLinks.classList.toggle("show1");
- }
- let moreArrow = document.querySelector(".more-arrow");
- moreArrow.onclick = function() {
- navLinks.classList.toggle("show2");
- }
- let jsArrow = document.querySelector(".js-arrow");
- jsArrow.onclick = function() {
- navLinks.classList.toggle("show3");
- }
-
If you face any difficulties while creating your Drop Down Navigation Menu with Sub Menu or your code is not working as expected, you can download the source code files for this menu by clicking on the download button.