Home/ Questions/Q 5992351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T23:31:09+00:00

I have a static menu in a common header file. Whenever I visit any

  • 0

I have a static menu in a common header file. Whenever I visit any of the pages by clicking on the links in the menu, I need an image over that clicked link as an indicator of the activated link.

below is the HTML of menu I am using

<ul id="in-menu">
    <li><a href="unleashing-your-heart" >home</a></li>
    <li><a href="fromdaniella" >from Daniella</a></li>
    <li><a href="material-list" >material list</a></li>
    <li><a href="program" >program</a></li>
    <li><a href="testimonials-2" >testimonials</a></li>
    <li><a href="#">login</a></li>
</ul>

How to use jQuery or javascript to make the desired functionality work?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t need javascript/jQuery for this

    What you can do is to give each of your pages a unique ID or Class on the <body> element or main container div somewhere near the top of the the HTML structure anyway.. then give each of the links in your menu a unique ID or class too (if using classes they can be the same as the first one)

    e.g.

    <body class="nm-unl">
   <ul id="in-menu">
     <li class="nm-unl"><a href="unleashing-your-heart" >home</a></li>
     <li class="nm-dan"><a href="fromdaniella" >from Daniella</a></li>
     <li class="nm-mat"><a href="material-list" >material list</a></li>
     <li class="nm-pro"><a href="program" >program</a></li>
     <li class="nm-tes"><a href="testimonials-2" >testimonials</a></li>
     <li class="nm-log"><a href="#">login</a></li>
   </ul>
</body>

    So on your Home page the body class might be nm-unl and your login page would have body class nm-log etc.. the menu itself never changes so it can still be in a common file

    Then in the CSS each link can be specifically targeted.. so say your plain link does not have an image, but the :hover and your “current” pages do

    #in-menu a {background: none;}

#in-menu a:hover {background: url(image.png) no-repeat top center;}

    Then you would group the new/specific selectors into the hover rule selectors, those rules are then more specific than the ordinary #in-menu a {} rule, and also they will only ever apply to your “current page link” i.e. when the two classes are the same on a page

    .nm-log #in-menu .nm-log a,
.nm-tes #in-menu .nm-tes a,
.nm-pro #in-menu .nm-pro a,
.nm-mat #in-menu .nm-mat a,
.nm-dan #in-menu .nm-dan a,
.nm-unl #in-menu .nm-unl a,
#in-menu a:hover {background: url(image.png) no-repeat top center;}

    You still need the #in-menu ID in the selector as well as the two classes because otherwise the selector will not have enough weight to override the default rule

    A jQuery solution would work in a similar way, the logic would be the same. You would still need a unique page indicator i.e. a body class or ID then you would check the body ID/Class and add a current class to the relevant, matching link.

    • 0