CODEWITHSUNDEEP
navigationhyperlinkmodxhardcoded
Stuart Robson
Stuart Robson

Reputation: 1149

adding a class to the pages (hard coded) navigation link in ModX

I've hard coded the navigation across a site in ModX and it's just dawned on me that I need to add a class to the relevant link for the page the user is on.

So when I'm on our-services.html I need the our-services link to have an addition class.

Is this possible in hindsight?

This is the HTML 

<!-- Navigation -->
<nav>

    <ul class="menu">
    <li>
            <a href="our-services" title="Our Services">Our Services</a>
            <ul class="sub-nav">
                <li><a href="our-services/networking-events">Network &amp; Evens</a></li>
            </ul>
        </li>
        <li>
            <a href="who-we-work-with" title="Our Clients" >Our Clients</a>
        </li>
        <li>
            <a href="testimonials">Testimonials</a>
        </li>
        <li><a href="blog" title="News & Events" >News & Events</a></li>
        <li>
            <a href="overview" title="Our Services">About Us</a>
            <ul class="sub-nav">
                <li><a href="our-network">Our Network</a></li>
                <li><a href="sectors-and-themes">Sectors &amp; Themes</a></li>
                <li><a href="our-team">Our Team</a></li>
             <li><a href="working-for-the-up-group">Working For Us</a></li>
            </ul>
        </li>
        <li class="last"><a href="contact" title="Contact Us" >Contact Us</a></li>
</ul> 

</nav>
<!-- End Navigation -->

Unfortunately the submenus are not actually subpages (legacy site, don't ask). I only need to add a class to the top level link (a class of active).

Upvotes: 0

Views: 602

Answers (2)

Sean Kimball
Sean Kimball

Reputation: 4494

you can also try this solution from here: Change class when page is active

<script>
   $(document).ready(function(){

       var links = $('nav').children();
       $.each(links, function(key, value){
          if(value.href == document.URL){
           $(this).addClass('current_page_item');
          }
       });
   </script>
    <nav>
        <a href="/link1">link-1</a>
        <a href="/link2">link-2</a>
        <a href="/link3">link-3</a>
        <a href="/link4">link-4</a>
        <a href="index.html">link-5</a>
    </nav>

Upvotes: 0

Mark Hamstra
Mark Hamstra

Reputation: 722

A simple though not exactly elegant solution would be something like this inside your hardcoded menu:

[[*id:eq=`link resource id`:then=`class="active"`]]

Using the Wayfinder snippet would probably be easier as it does that by default, but I suppose you had your reasons to hardcode the menu.

Upvotes: 1

Related Questions