Navigation Menu Bar with Smooth Scrolling Effect using HTML, CSS & JavaScript

0

Navigation Menu Bar with Smooth Scrolling Effect using HTML, CSS & JavaScript

Hello developers, today in this blog, you'll learn to create a Navigation Menu Bar with Smooth Scrolling Effect using HTML, CSS & JavaScript.

The navigation bar is a user interface element within a webpage that contains links to other sections of the webpage. This means that no matter what page you are viewing, you can use the navigation bar to visit other sections of the website.

In this blog(Navigation Menu Bar with Smooth Scrolling Effect), there is a webpage with a navigation bar. The navigation bar consists of a logo on the left side and the navigation menus on the right side. There are five menus with five sections. Each section contains the heading with a background image. On clicking each navigation menu, it will direct the user to a particular section of the webpage. A smooth scrolling effect has been used in this webpage. On clicking on each navigation menu, it will smoothly scroll you to the particular section of the page.

The navigation bar is made to be fixed. The bar remains fixed at the top of the page, even on scrolling. JavaScript code has been used to show the active and the hover menu highlighted in the navigation menu bar.

The source code of this Navigation Menu Bar with Smooth Scrolling Effect is given below, if you want the source code of this program, you can copy it. You can use this Navigation Menu Bar with Smooth Scrolling Effect on your project.

Navigation Menu Bar with Smooth Scrolling Effect [Source Code]

To make this website, you would like 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.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://kit.fontawesome.com/c39c442009.js" crossorigin="anonymous"></script> <title>Navigation Menu Bar with Smooth Scrolling Effect || Learningrobo</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <nav> <input type="checkbox" id="check"> <label for="check" class="checkbtn"> <i class="fas fa-bars"></i> </label> <a href="#home" class="logo">Logo</a> <ul id="navigation"> <li><a href="#home" class="btn active">Home</a> </li> <li><a href="#about" class="btn">About</a></li> <li><a href="#menu" class="btn">Menu</a></li> <li><a href="#order" class="btn">Order</a></li> <li><a href="#contact" class="btn">Contact</a></li> </ul> </nav> </header> <main> <section id="home"> <h1>Home</h1> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </section> <section id="about"> <h1>About</h1> </section> <section id="menu"> <h1>Menu</h1> </section> <section id="order"> <h1>Order</h1> </section> <section id="contact"> <h1>Contact</h1> </section> </main> <script type="text/javascript" src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive, create a CSS file with the name style.css, and remember that you have to make a file with a .css extension. 


* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

header {
    width: 100%;
    background-color: #000;
    position: fixed;
    color: #fff;
    padding: 0 20px;
}

header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav a.logo {
    color: #fff;
    font-size: 35px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 60px;
    cursor: pointer;
    font-family: cursive;
}

nav ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .5s;
}

nav ul li {
    line-height: 60px;
    margin: 0 5px;
}

nav ul a {
    color: #fff;
    font-size: 18px;
    padding: 5px 13px;
    text-transform: uppercase;
    border-radius: 4px;
    transition: .4s;
}

.active,nav ul a:hover {
    background: #fbd2d7;
    padding: 10px;
    color: #000;
}

main {
    width: 100%;
    height: 100vh;
    scroll-behavior: smooth;
    overflow-y: scroll;
}

section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 80px;
    font-size: 40px;
}

section#home {
    background: url("https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683__340.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #12192c;
}

section#about {
    background: url("https://cdn.pixabay.com/photo/2016/02/13/12/26/aurora-1197753__340.jpg");
    color: #fff;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

section#menu {
    background: url("https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014712__340.jpg");
    color: #fff;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

section#contact {
    background: url("https://cdn.pixabay.com/photo/2021/04/26/01/39/trees-6207925__340.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
}

section#order {
    background: url("https://cdn.pixabay.com/photo/2019/06/07/13/11/landscape-4258253__340.jpg");
    color: #fff;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.checkbtn {
    cursor: pointer;
    display: none;
}

#check {
    display: none;
}

.credit a {
    text-decoration: none;
    color: crimson;
    font-weight: 800;
}

.credit {
    text-align: center;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
    color: #FFF;
    font-size: 15px;
    padding-top: 500px;
    position: fixed;
}
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. 


var header = document.getElementById("navigation");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
We hope you will like this Navigation Menu Bar with a Smooth Scrolling Effect using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem creating this Navigation Menu Bar with Smooth Scrolling Effect 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