HOW TO CREATE RESPONSIVE NAVIGATION BAR ?
As a web developer, we want to create responsive websites so that they look good on all devices. While creating a responsive website, first we need to create a top navigation bar that fits all devices. So, I am going to discuss how to create a responsive navigation bar that turns into a hamburger menu button on small-sized devices.
Check the link to understand how it works 👉 Responsive navigation bar
You might be wondering how to do it or which properties to use. so, I am going to guide you step by step in completing this job. Though we can do it using the Bootstrap framework, in this article, I am going to show it using HTML, CSS, and a little bit Javascript. Before I start to explain the code, take a look at the code given below.
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=Source+Serif+Pro:wght@600&display=swap" rel="stylesheet"> | |
| <title>Responsive top navbar</title> | |
| </head> | |
| <body> | |
| <nav> | |
| <div class="topnav" id="Topnav"> | |
| <a class="logo" href="#">SmartHost</a> | |
| <a href="javascript:void(0);" class="icon" onclick="openNav()"> | |
| <i class="fa fa-bars"></i> | |
| </a> | |
| <a href="#Sign in" class="link">Sign in</a> | |
| <a href="#contact" class="link">Contact</a> | |
| <a href="#service" class="link">Services</a> | |
| <a href="#about" class="link">About</a> | |
| <a href="#home" class="link">Home</a> | |
| </div> | |
| <div id="mySidepanel" class="sidepanel"> | |
| <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> | |
| <a href="#home">Home</a> | |
| <a href="#about">About</a> | |
| <a href="#service">Services</a> | |
| <a href="#contact">Contact</a> | |
| <a href="#Sign in">Sign in</a> | |
| </div> | |
| </nav> | |
| <script>function openNav() { | |
| document.getElementById("mySidepanel").style.width = "250px"; | |
| } | |
| /* Set the width of the sidebar to 0 (hide it) */ | |
| function closeNav() { | |
| document.getElementById("mySidepanel").style.width = "0"; | |
| }</script> | |
| </body> | |
| </html> |
Let's discuss the body section. I am using <a> tag because you can add links of different sections of your web page so that on clicking the links you can reach the section directly. If you notice carefully, you can find that the orders of the link are different in the code and the web page. I have used the opposite order in the code because I am using float property to align the links in the same line with the logo and this causes the change of the order of the links. I think that till now all these things are clear to you. Now, you just imagine that you are using the website in a smartphone and it is showing a hamburger menu at the right. So, you want the hamburger menu to slide out a section containing the links from the edge of the screen when pressed. It will look good right. Now, to show the section, you must add a section in your code that contains the links. For this reason, I have added the <div> having an id "my side panel" and added the same links there. Now you have to add some lines of Javascript so that the menu works on pressing. I have just added two functions that make the sliding section visible and hidden whatever needed. Before you write the Javascript, be sure to add the functions to the particular element so that the Javascript works.
| body{ | |
| margin:0; | |
| } | |
| .logo{ | |
| color: white; | |
| text-align: center; | |
| padding: 14px 2.5rem; | |
| text-decoration: none; | |
| font-size: 1.8rem; | |
| float:left; | |
| } | |
| .topnav{ | |
| background-color:#256BE3; | |
| padding:8px 15px; | |
| overflow: hidden; | |
| } | |
| .link { | |
| float: right; /* keep the links in same line */ | |
| display: block; | |
| color: white; | |
| text-align: center; | |
| padding: 18px 3rem; | |
| text-decoration: none; | |
| font-size: 1.2rem; | |
| } | |
| .sidepanel { | |
| height: 300px; | |
| width: 0; /* 0 width - change this with JavaScript */ | |
| position: fixed; /* Stay in place */ | |
| z-index: 1; /* Stay on top */ | |
| top:0; | |
| right:0; | |
| background-color: rgba(37,107,227,0.9); | |
| overflow-x: hidden; /* Disable horizontal scroll */ | |
| padding-top: 60px; | |
| transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */ | |
| text-align: center; | |
| } | |
| .sidepanel a{ | |
| padding: 8px 8px 8px 32px; | |
| text-decoration: none;/*hide underline */ | |
| font-size: 25px; | |
| color: white; | |
| display: block; | |
| transition: 0.3s; | |
| } | |
| .closebtn { | |
| position: absolute; | |
| top: 0; | |
| right: 25px; | |
| font-size: 36px; | |
| margin-left: 50px; | |
| } | |
| .icon{ | |
| display:none; | |
| } | |
| @media screen and (max-width: 600px) { /*If the size of the screen is less than 600px, it will show this style */ | |
| .topnav a:not(:first-child) {display: none;} | |
| .topnav a.icon { | |
| float: right; | |
| display: block; | |
| color: white; | |
| text-align: center; | |
| padding: 18px 2.5rem; | |
| text-decoration: none; | |
| font-size: 1.2rem; | |
| } | |
| } |
I want to advise you don't just copy the code, understand all the ideas thoroughly. If you want to get more articles like this to get a solution to your problems,subscribe to this blog and comment on what you want the next article to be.
Happy coding 😀.
No comments:
Post a Comment