Responsive Navigation bar | Header in Html, CSS & Javascript
- MultiWebPress
- August 29, 2021
- No Comments
Hello readers, today in this blog you’ll learn how to create a Navigation bar using pure HTML, CSS & Javascript. This is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a Typing text animation. Now it’s time to create a Responsive Navigation Sliding menu using Hypertext Preprocessor Language (HTML).
Header in websites is often used at the beginning of a page for an introduction. You have seen Menu Bar or Navigation bar on many websites. With Navigation Bar, a user can easily figure out how to find your blogs, pages, contact details, and much more information.
The navigation menu allows someone to land on any pages on your site and find what they need within few clicks.
Responsive design is essentially design to put the design together with a website so that it automatically scales its content and elements to match the screen size on which it is viewed.
As you can see in the preview images, there is a Navigation menu with a logo and sign-in button. You can also be able to see a sliding navigation bar for the mobile version. The responsive navigation bar is easy to navigate to any page very easily. Navbar is very important for any website. There are numerous ways to create a header, one of which is the way we have designed it.
If you’re having difficulty understanding what is written in this blog. You can also watch the full video.
Video tutorial of Responsive Navigation bar.
You may also like:
- Responsive Navigation bar | Header in Html, CSS & Javascript?
- How to create footer in pure Html & CSS?
- CSS Stroke Animation | Animated Text Background With CSS Stroke | Pure Html & CSS
- Typing Text Animation CSS | Typewriter text effect CSS | Pure HTML & CSS
- How to install Bootstrap using CDN Link and Compiled bootstrap CSS manually?
I believe you like this Navigation Menu bar (Navbar). If you like this navbar and want to use it in your project you can freely copy the code and use it.
I want you to take this Navigation Navbar to next level with your creativity. Also, I want you all to comment below if you have any questions in your mind.
Responsive Navigation bar [Source Codes]
To create this header (Responsive Navigation bar). You need to create three files. The two files are index.html, style.css, and the script.js file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file, .css extension to your style file and .js extension to your Javascript file.
Let’s create a Hypertext Markup Language(HTML) file with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension.
HTML CODE
<!DOCTYPE html>
<!-- Coding by Multiwebpress-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css"/>
<title> Responsive Navigation Bar | Multiwebpress </title>
</head>
<body>
<nav>
<div class="logo">
<img decoding="async" src="images/multiwebpress.png" alt="Logo Image">
</div>
<div class="hamburger">
<div class="bars1"></div>
<div class="bars2"></div>
<div class="bars3"></div>
</div>
<ul class="nav-links">
<li><a href="#">HTML & CSS</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">Contact Us</a></li>
<li><button class="login-button" href="#">Sign In</button></li>
</ul>
</nav>
<script src="javascript/script.js"></script>
</body>
</html>
CSS CODE
Create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with a .css extension
*{
margin:0; padding:0;
color:#f2f5f7;
font-family: sans-serif;
letter-spacing: 1px;
font-weight: 300;
}
body{
overflow: hidden;
}
nav{
height: 6rem;
width: 100vw;
display: flex;
position: fixed;
z-index: 10;
background-color: #053742;
box-shadow: 0 3px 20px rgba(0,0,0,0.2);
}
/* Styling Logo*/
.logo{
padding: 3vh 3vw;
text-align: left;
width: 20vw;
}
.logo img{
height: auto;
width: 4rem;
}
/* Styling Navigation Links*/
.nav-links{
width: 80vw;
display: flex;
padding: 0 0.7vw;
justify-content: space-evenly;
align-items: center;
text-transform: uppercase;
list-style: none;
font-weight: 600;
}
.nav-links li a{
margin: 0 0.7vw;
text-decoration: none;
transition: all ease-in-out 350ms;
padding: 10px;
}
.nav-links li a:hover{
color:#000;
background-color: #fff;
padding: 10px;
border-radius: 50px;
}
.nav-links li{
position:relative;
}
.nav-links li a:hover::before{
width: 80%;
}
/*Buttons Styling*/
.login-button{
padding: 0.6rem 0.8rem;
margin-left: 2vw;
font-size:1rem;
cursor:pointer;
background-color: transparent;
border:1.5px solid #f2f5f7;
border-radius: 2em;
}
.login-button:hover{
color:#fff;
background-color: #dd5f24;
border:1.5px solid #dd5f24;
transition: all ease-in-out 350ms;
}
/*Navigation Icon Styling*/
.hamburger div{
width: 30px;
height: 3px;
background: #f2f5f7;
margin: 5px;
transition: all 0.3s ease;
}
.hamburger{
display: none;
}
/*Responsive Adding Media Queries*/
@media screen and (max-width: 800px){
nav{
position: fixed;
z-index: 3;
}
.hamburger{
display:block;
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
transition: all 0.7s ease;
}
.nav-links{
background: #053742;
position: fixed;
opacity: 1;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(50px at 90% -20%);
-webkit-clip-path: circle(50px at 90% -10%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open{
clip-path: circle(1000px at 90% -10%);
-webkit-clip-path: circle(1000px at 90% -10%);
pointer-events: all;
}
.nav-links li{
opacity: 0;
}
.nav-links li:nth-child(1){
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2){
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3){
transition: all 0.5s ease 0.6s;
}
.nav-links li:nth-child(4){
transition: all 0.5s ease 0.7s;
}
.nav-links li:nth-child(5){
transition: all 0.5s ease 0.8s;
}
.nav-links li:nth-child(6){
transition: all 0.5s ease 0.9s;
margin: 0;
}
.nav-links li:nth-child(7){
transition: all 0.5s ease 1s;
margin: 0;
}
li.fade{
opacity: 1;
}
/* Navigation Bar Icon on Click*/
.toggle .bars1{
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .bars2{
transition: all 0s ease;
width: 0;
}
.toggle .bars3{
transform: rotate(45deg) translate(-5px, -6px);
}
}
Javascript Code
Next, create a Javascript(JS) file with the name of script.js and paste the below codes into your JS file. Remember you’ve to create a file with a .js extension
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener('click', ()=>{
//Links
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});
//Animation
hamburger.classList.toggle("toggle");
});
After creating these files & pasting codes, now run the files in your browser. You can run to any browser you have. (Google Chrome, Firefox, Internet Explorer, etc.)
That’s all, now you’ve successfully created a Responsive Navigation bar using HTML, CSS & Javascript.
If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.
Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.
Thanks in Advance!
SHARE
Categories
- Recommended Posts (17)
- HTML & CSS (15)
- WordPress (10)
- CSS Buttons (3)
- Navigation Bar (2)
- Social Media Buttons (2)
- Templates (2)
- Footer (1)