// Start Current Link (ACTIVE MENU LINK)
jQuery(document).ready(function () {
jQuery(".navigation > li").click(function () {
jQuery(".navigation > li").removeClass("current");
jQuery(this).addClass("current");
});
var loc = window.location.href;
jQuery(".navigation > li").removeClass("current");
jQuery(".navigation > li > a").each(function () {
if (loc.indexOf(jQuery(this).attr("href")) != -1) {
jQuery(this).closest("li").addClass("current");
}
});
// The Below Code for fix current active dropdown when choose sub link from the dropdown menu
jQuery(".navigation > .dropdown").click(function () {
jQuery(".navigation > .dropdown").removeClass("current");
jQuery(this).addClass("current");
});
var loc = window.location.href;
jQuery(".navigation > .dropdown > ul > li").removeClass("current");
jQuery(".navigation > .dropdown > ul > li > a").each(function () {
if (loc.indexOf(jQuery(this).attr("href")) != -1) {
jQuery(this).closest(".dropdown").addClass("current");
}
});
});ul {
list-style: none;
}
a {
text-decoration: none;
}
.main-menu .navigation {
display: flex;
align-items: center;
position: relative;
}
.main-menu .navigation > li {
padding: 39.5px 0;
margin: 0 15px;
z-index: 2;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.main-menu .navigation > li.current > a {
color: #da2c46;
}
.main-menu .navigation > li.current > a::before {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.main-menu .navigation > li:first-child {
margin-left: 0;
}
.main-menu .navigation > li:last-child {
margin-right: 0;
}
.main-menu .navigation > li > a {
color: #222222;
/* color: #ffffff; */
position: relative;
display: flex;
font-weight: 600;
opacity: 1;
z-index: 1;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.main-menu .navigation > li > a::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: #da2c46;
bottom: -3px;
left: 0;
-webkit-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.main-menu .navigation > li > a::after {
content: "";
position: absolute;
}
.main-menu .navigation > li > a:hover {
color: #da2c46;
}
.main-menu .navigation > li > a:hover::before {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.main-menu .navigation > li > ul {
position: absolute;
left: inherit;
top: 100%;
width: 250px;
z-index: 100;
display: none;
opacity: 0;
visibility: hidden;
background-color: #ffffff;
-webkit-transform: translateY(30px);
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
-webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05),
-2px 0px 5px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05),
-2px 0px 5px 1px rgba(0, 0, 0, 0.05);
-ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05),
-2px 0px 5px 1px rgba(0, 0, 0, 0.05);
-o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05),
-2px 0px 5px 1px rgba(0, 0, 0, 0.05);
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05),
-2px 0px 5px 1px rgba(0, 0, 0, 0.05);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.main-menu .navigation > li > ul > li {
position: relative;
width: 100%;
padding: 11px 30px;
border-bottom: 1px solid #eeeeee;
}
.main-menu .navigation > li > ul > li > a {
position: relative;
display: block;
padding: 6px 0px;
line-height: 24px;
text-transform: capitalize;
color: #222222;
text-align: left;
transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
}
.main-menu .navigation > li > ul > li > a:hover {
color: #da2c46;
}
.main-menu .navigation > li.dropdown:hover > ul {
display: block;
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.main-menu .navigation > li.dropdown .dropdown-btn {
position: absolute;
right: -32px;
top: 66px;
width: 34px;
height: 30px;
text-align: center;
font-size: 18px;
line-height: 26px;
color: #3b3b3b;
cursor: pointer;
display: none;
z-index: 5;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="main-menu navbar-expand-md me-auto navbar-light">
<div class="collapse navbar-collapse show" id="navbarSupportedContent">
<ul class="navigation">
<li><a href="/">Home</a></li>
<li><a href="/about-us.html">About</a></li>
<li class="dropdown"><a href="/services.html">Services</a>
<ul>
<li><a href="/finance-consulting.html">Finance
Consulting</a>
</li>
<li><a href="/tax-management.html">Tax Management</a></li>
<li><a href="/economic-planning.html">Economic Planning</a></li>
<li><a href="/strategy-thinking.html">Strategy Thinking</a></li>
<li><a href="/market-analysis.html">Market Analysis</a></li>
<li><a href="/content-optimize.html">Content Optimize</a></li>
</ul>
</li>
<li><a href="/pricing.html">pricing</a></li>
<li class="dropdown"><a href="/blog.html">Blog</a>
<ul>
<li><a href="/blog-details.html">Blog details</a></li>
<li><a href="/404.html">Error 404 Page</a></li>
<li><a href="/privacy-policy.html">Privacy Policy</a></li>
</ul>
</li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>Hello
I got this javascript code by searching (its function is to add and remove active class to ‘li’ class for the open page) and it executed as is.
Now, I am working on an html site and the link was “localhost/index.html”
And the code was working good on this format
and because I want to remove the “index.html” link so that it shows the main without adding index.html, I switched home link from “index.html” to “/” and added “/” before each page link as shown in the html structure, and the result was that the class “current” stayed on the home link and also added to the open page, meaning when you open about us page for example you will find the css effects of the class “current” is enabled on it and on the home page link
I tried to modify the javascript code so that the job works on the new link, which is local only, without adding /index.html, but I don’t know
I hope you will help me and tell me how to write the code so that it achieves the functions required of it
With thanks