How to make a responsive navigation menu?
Language
HTML, CSS, Jquery
Responsive
Yes
Capable For Blogger
No
Create an index.html
file and add HTML default markup.
Bonus tip: If you are using VS code editor use emmet to write HTML markup. As you see in the below video.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Let’s first add links in our head tag because it will help to make our responsive navigation menu.
index.html
file)<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>how to make responsive navigation menu</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <!--Font Awesome v5--> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <!--Custom Font Family--> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,500&display=swap" rel="stylesheet"> <!--Jquery CDN--> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> </head>
Now we have completed our head tag section.
Body Tag (Paste this code in body tag)
<body> <nav> <!--Text Logo--> <!-- <li class="brand-logo"><a href="" class="text-logo">Your Logo</a></li> --> <!--Image Logo--> <li class="brand-logo"><a href=""><img src="images/brand-logo.png"></a></li> <div id="responsive-icon"> <i class="fas fa-bars"></i> </div> <ul class="nav-links"> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">About us</a></li> <li><a href="">Contact us</a></li> </ul> </nav> <script type="text/javascript" src="js/script.js"></script> </body>
style.css
and put give below code in a CSS file. Here we have added responsive code also.*{ margin: 0px; padding: 0px; box-sizing: border-box; } nav { background-color: #000; } nav li,a { text-decoration: none; list-style: none; font-family: 'Roboto', sans-serif; } nav .brand-logo { cursor: pointer; list-style: none; padding: 10px 0px 10px 10px; float: left; } nav .brand-logo .text-logo{ font-size: 30px; color: #fff; padding-left: 15px; } nav .brand-logo a img { width: 200px; } nav #responsive-icon { text-align: right; padding: 20px 20px 0px 0px; cursor: pointer; display: none; width: 50%; } nav #responsive-icon .fa-bars { color: #fff; font-size: 30px; font-weight: 400; } nav .nav-links { list-style: none; font-size: 18px; text-align: right; } nav .nav-links li { display: inline-block; padding: 20px 20px 0px; } nav .nav-links li a { color: #fff; } nav .nav-links li a:hover{ color: darkorange; transition: .30s all linear; } nav::after { content: ""; display: block; clear: both; } nav .nav-links li::before{ content: ""; display: block; clear: both; } @media screen and (max-width: 768px){ nav .brand-logo{ float: none; display: inline-block; width: 48%; } nav .nav-links { float: none; padding-bottom: 20px; display: none; } nav .nav-links li { display: block; text-align: center; } nav #responsive-icon { display: inline-block; } } @media screen and (max-width: 425px){ nav .brand-logo{ padding-left: 0px; } nav .brand-logo a img { width: 170px; } }
![]() |
CSS Output |
Jquery Code
Now create one more file named script.js
and put give below code.
$(document).ready(function(){ $("#responsive-icon").click(function(){ $(".nav-links").slideToggle() }); });
Congratulations you have successfully created a responsive navigation menu using HTML CSS and jquery.
If you have any doubt or any query comment down below.
Download the responsive navigation menu code source by clicking the below download button
Thanks Happy Learning :-)
Keep visiting
Leave A Relpy