How To Activate The Menu On The Display Section Using Jquery

In this topic,

We are going to see how to activate the menu on the display section using jQuery and how to redirect the menu on the section.

Step-1: include the jQuery link in the <head>..</head>tag on index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step-2: Create Html Code in the index.html file.

<body>
  <header>		
      <div class="collapse" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav"><a href="#slider" class="sedo" style="font-size:18px">Home</a></li>
           <li class="nav"><a href="#about" class="sedo" style="font-size:18px">About Us</a></li>
           <li class="nav"><a href="#gallery" class="sedo" style="font-size:18px">Gallery</a></li>
           <li class="nav"><a href="#menu" class="sedo" style="font-size:18px">Menu</a></li>
           <li class="nav"><a href="#reservation" class="sedo" style="font-size:18px">Reservation</a></li>
           <li class="nav"><a href="#contact" class="sedo" style="font-size:18px">Contact Us</a></li>
        </ul>
     </div>
  </header>
  <div class="all-sections">
    <div class="slider test">
      <div class="section1" id="slider">
        <h2>Home</h2>
      </div>
    </div>
    <div class="about-us test">
      <div class="section2" id="about">
        <h2>About Us</h2>
      </div>
    </div>
    <div class="gallery">
      <div class="section3" id="gallery">
        <h2>Gallery</h2>
      </div>
    </div>
    <div class="menu">
      <div class="section4" id="menu">
        <h2>Menu</h2>
      </div>
    </div>
    <div class="reservation">
      <div class="section5" id="reservation">
        <h2>Reservation</h2>
      </div>
    </div>
    <div class="contact">
      <div class="section6" id="contact">
        <h2>Contact Us</h2>
      </div>
    </div>
  </div>
</body>

Step-3: Add CSS in<style>….</style> tag on index.html file.

body{
  margin: 0;
}
.navbar-nav{
  text-align: center;
  background-color: #54595F;
  margin: 0;
  padding:15px;
}
ul li.nav{
  display: inline-block;
}
ul li.nav a{
  color: #fff;
  text-decoration: none;
  padding:0 25px;
}
.section1,.section3,.section5 {
  background-color: #ccc;
  height:80%;
}
.section2,.section4,.section6{
  background-color: #efefef;
  height:80%;
}
.all-sections h2{
  font-size: 35px;
  margin: 0;
}
.sticky{
  position: fixed;
  margin: 0;
  width: 100%;
}
.navbar ul li .elementor-icon-list-text{
  color: #000 !important;
}
.navbar-nav .nav a.active-menu{
  background : #a98e8e;
  color : #fff;
  padding: 15px;
}

Step-4: Add jQuery code in <script>…</script> tag on index.html.

In this code, I get the top Position and add the active class to the menu when the Position of the top and the Position of the section are equal.

$(window).scroll(function() {
  var scrollPos = $(document).scrollTop();
    $('.navbar-nav .nav a').each(function () {
        var testmenu = $($(this).attr("href"));
        if (testmenu.position().top - 60 <= scrollPos) {
            $('.navbar-nav .nav a').removeClass("active-menu");
            $(this).addClass("active-menu");
        }
        else{
            $(this).removeClass("active-menu");
        }
    });
});

Review the below video.

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories