Responsive Navigation Menu Bar using HTML, CSS & JavaScript

0

Responsive Navigation Menu Bar using HTML, CSS & JavaScript

Hello developers, today in this blog you'll learn how to create a Responsive Navigation Menu Bar using HTML, CSS & JavaScript.

The Menu Bar or Navigation Bar (Navbar) is significant for any website. Many websites have a responsive navbar. The Navigation menu is going to be the top bar where the brand and a couple of hyperlinks exist. The navigation bar aims to directly redirect into the actual page by clicking on the hyperlinks as they have. The navigation bar should perfectly fit in all screen devices.

When you see this page on a mobile, you'll see a top bar on the highest right side. While clicking the top bar, an animated page exists which shows you all the navigation bars like Home, Solutions, Products, Services, Contact us, and can also see the Login button and Join button.

There is a full top bar on the highest side, where you'll see a logo on the left side and a few hyperlinks and buttons on the right side. Hover has been used for the text color and buttons. If you hover the hyperlink, the color of the hyperlink changes into violet and once you hover in the buttons the background color of the black button changes to white and therefore the white button changes to black.

When this navbar's web page is viewed on mobile, all hyperlinks are disappeared except the brand and bar that appears on the top. Once if you click that bar all hyperlinks smoothly slide from top-right to left-bottom as a sidebar. To form this navigation responsive, we have used the media query property.

We used JavaScript code to perform the function of a bar which is placed at the top-right of the web page.

Responsive Navigation Menu Bar [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file, and a JavaScript file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.

<!DOCTYPE html> <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="style.css"/> <title>Responsive Animated Navbar || Learningrobo</title> </head> <body> <nav> <div class="logo"> <img src="https://cdn.pixabay.com/photo/2014/04/02/10/47/red-304573__340.png" alt="Logo Image"> </div> <div class="hamburger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">Solutions</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><button class="login-button" href="#">Login</button></li> <li><button class="join-button" href="#">Join</button></li> </ul> </nav> <h1 class="text">www.Learningrobo.com</h1> <script src="script.js"></script> </body> </html>

CSS provides style to an HTML page. To form the page attractive and page responsive create a CSS file with the name style.css and remember that you've got to make a file with a .css extension.

*{ margin: 0; padding: 0; color: #f2f5f7; font-family: sans-serif; letter-spacing: 1px; font-weight: 300; } body{ overflow-x: hidden; background: #9D50BB; } nav{ height: 5rem; width: 100vw; background-color: #12192c; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); display: flex; position: fixed; z-index: 10; } /*Styling logo*/ .logo{ padding:1vh 1vw; text-align: center; } .logo img { height: 4rem; width: 4rem; } /*Styling Links*/ .nav-links{ display: flex; list-style: none; width: 88vw; padding: 0 0.7vw; justify-content: space-evenly; align-items: center; text-transform: uppercase; } .nav-links li a{ text-decoration: none; margin: 0 0.7vw; } .nav-links li a:hover { color: #9D50BB; } .nav-links li { position: relative; } /*Styling Buttons*/ .login-button{ background-color: transparent; border: 1.5px solid #f2f5f7; border-radius:15px; padding: 0.8rem 0.8rem; font-size: 1rem; cursor: pointer; width:100px } .login-button:hover { color: #131418; background-color: #f2f5f7; border:1.5px solid #f2f5f7; transition: all ease-in-out 350ms; } .join-button{ color: #131418; background-color: #f2f5f7; border: 1.5px solid #f2f5f7; border-radius: 15px; padding: 0.8rem 0.8rem; font-size: 1rem; cursor: pointer; width:100px } .join-button:hover { color: #f2f5f7; background-color: transparent; border:1.5px solid #f2f5f7; transition: all ease-in-out 350ms; } /*Styling Hamburger Icon*/ .hamburger div{ width: 30px; height:3px; background: #f2f5f7; margin: 5px; transition: all 0.3s ease; } .hamburger{ display: none; } /*Stying for small screens*/ @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{ position: fixed; background: #12192c; 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; } } /*Animating Hamburger Icon on Click*/ .toggle .line1{ transform: rotate(-45deg) translate(-5px,6px); } .toggle .line2{ transition: all 0.7s ease; width:0; } .toggle .line3{ transform: rotate(45deg) translate(-5px,-6px); } .text{ position: relative; top:350px; text-align: center; font-size:40px ; color:#12192c }

JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js and remember that you've got to make 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', ()=>{ //Animate Links navLinks.classList.toggle("open"); links.forEach(link => { link.classList.toggle("fade"); }); //Hamburger Animation hamburger.classList.toggle("toggle"); });

In the Mobile view of this page, you'll see icons with the hyperlinks provided.

We hope you would like this Responsive Navigation Menu Bar using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this Responsive Navigation Menu Bar using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

 


Tags:

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome