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.
