The Menu Bar or Navigation Bar (Navbar) is important for any website. Many websites have a Responsive Navigation Menu Bar (Navbar). The navigation menu is getting to be a horizontal bar where the brand and a few hyperlinks exist. The navigation bar aims to directly redirect into the actual page by clicking on the hyperlinks as they have. The navigation bar perfectly fits all screen devices.
There is a horizontal bar on the top, where you will see a logo on the left side and a couple of hyperlinks on the right side. Hover has been used for the text color. Once we hover over the hyperlinks color changes into White.
When this navbar's webpage is viewed on mobile all hyperlinks are disappeared except the brand on the left and the bar that appears on the right. Once we clicked that bar all hyperlinks like Service, Blog, About, and contact smoothly slide from the left side as a sidebar.
That is simply it is often said as, on the large screen, this navigation bar is viewed in a horizontal line but on mobile devices, this navbar or navigation bar is viewed in a vertical line.
To make this navigation responsive, we have used
the media query property. We used JavaScript code to perform the animated function.
Responsive Navigation Menu Bar [Source Code]
To make this website, you'd wish to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
CSS provides style to an
HTML page. To make the page attractive and page responsive create a CSS file
with the name style.css and remember that you've needed to make a file with a
.css extension.
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: "Roboto", sans-serif;
}
body {
background-color: #FEFFF1;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
span {
color: white;
}
.header {
border-bottom: 1px solid #e2e8f0;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
border-radius: 0 0 12px 12px;
box-shadow: -1px -8px 54px -21px rgba(59,51,51,0.99);
-webkit-box-shadow: -1px -8px 54px -21px rgba(59,51,51,0.99);
-moz-box-shadow: -1px -8px 54px -21px rgba(59,51,51,0.99);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
z-index:999;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}
.hamburger {
display: none;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #101010;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-item {
margin-left: 5rem;
}
.nav-link {
font-size: 1.6rem;
font-weight: 400;
color: #12192c;
}
.nav-link:hover {
color: #fff;
}
.nav-logo > img{
height:40px;
width:40px;
object-fit:cover;
}
@media only screen and (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 5.5rem;
flex-direction: column;
background-color: #fff;
width: 100%;
border-radius: 10px;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
}
.nav-menu.active {
left: 0;
}
.nav-link{
color:#FBAB7E;
}
.nav-link:hover {
color: #12192c;
}
.nav-item {
margin: 2.5rem 0;
}
.hamburger {
display: block;
cursor: pointer;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
-webkit-transform: translateY(8px) rotate(45deg);
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
-webkit-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
}JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js and remember that you've got need to make a file with a .js extension.
In the Mobile view of this page, you will see icons with the hyperlinks provided.
We hope you would like this Responsive Navigation Menu Bar with Animation using HTML, CSS & JavaScript.
Thank you for reading our blog. If you face any problem in creating this Responsive Navigation Menu Bar with Animation using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team