Dynamic current link

Get Started
1

I have asked a similar question before. It’s about a menu included in pages using <cfinclude>. The question is about how to define a CSS class to a menu item on the current page. In the queston I asked before the menu was built up from separate items:


<ul>
  <li><a href="index.cfm">Home</a></li>
  <li><a href="services.cfm">Services</a></li>
  ....................
  <li><a href="contact.cfm">Contact</a></li>
</ul>

In a structure like this I could use the getFileFromPath function as Rudy pointed out to me:


<cfset variables.thispage = GetFileFromPath(GetCurrentTemplatePath())>

<cfif CurrentPage IS "index.cfm"><a href="index.cfm" class="current">Homepage</a><cfelse><a href="index.cfm">Homepage</a>
........
<cfif CurrentPage IS "contact.cfm"><a href="contact.cfm" class="current">Contact</a><cfelse><a href="contact.cfm">Contact</a>

Now I have the menu coming from the database:


<ul>
  <cfoutput query="getMenuitems">
    <li><a href="#page_address#" title="#page_name#" class="#page_class#">#page_name#</a></li>
  </cfoutput>
</ul>

I tried different variations of getFileFromPath and what I tried as well was to add an extra row to the table called page_class and defined an id and class in my style sheet like this:


#index, .index{
  color: #FF0000;
}

And applied the id to the body tag of the page


<body id="index">

and the class as a variable to the anchor as you can see above! But so far without the desired result. Does anyone have suggestions or idea how to handle this?

Thank you in advance!

2

I have this solved! The second approach id on body and class on anchor seems to work after all. It was just that I had a color for the anchors inside the menu! After I took that away and declared a general color for all anchors it was working fine!

3

To expand on his original question, I myself am having issues with something similar yet more in depth.

The menu I am using (due to higher level requirements out of my control) has sub-menus as well. The menu is a left-hand vertical menu in which the ‘active’ item will always be visible and highlighted. I am looking for a GOOD way to determine which sub-menu link to have ‘active’ without using 100 cfif statements and duplicating menu items.

I have employed a similar theory to get the current page and display the proper menu, however, like I mentioned I have to essentially do this TWICE or more and it’s not pretty.

First, I need to know what folder we are in to determine which top menu to display (followed by which sub-menu to display).
Second, I need to know what page the user is on within that folder so I know which sub-menu item to show as ‘active’ (in my case, highlighting in red).

I have one way that will work, but later becomes a nightmare for future menu item changes. The following is what will work and I’m hoping to get simplified:


<cfif currentPath CONTAINS '/Home/'>
    Top Menu A
    <cfif currentPath CONTAINS 'page1.cfm'>
        Page1 Menu Item (Highlighted)
        Page2 Menu Item
    <cfelseif currentPath CONTAINS 'page2.cfm'>
        Page1 Menu Item
        Page2 Menu Item (Highlighted)
    <cfelse>
        Page1 Menu Item
        Page2 Menu Item
    </cfif>
    Top Menu B
    <cfif currentPath CONTAINS 'page3.cfm'>
        Page3 Menu Item (Highlighted)
        Page4 Menu Item
    <cfelseif currentPath CONTAINS 'page4.cfm'>
        Page3 Menu Item
        Page4 Menu Item (Highlighted)
    <cfelse>
        Page3 Menu Item
        Page4 Menu Item
    </cfif>
<cfelseif currentPath CONTAINS '/Business/'>
    Top Menu C
    <cfif currentPath CONTAINS 'page5.cfm'>
        Page5 Menu Item (Highlighted)
        Page6 Menu Item
    <cfelseif currentPath CONTAINS 'page6.cfm'>
        Page5 Menu Item
        Page6 Menu Item (Highlighted)
    <cfelse>
        Page5 Menu Item
        Page6 Menu Item
    </cfif>
    Top Menu D
    <cfif currentPath CONTAINS 'page7.cfm'>
        Page7 Menu Item (Highlighted)
        Page8 Menu Item
    <cfelseif currentPath CONTAINS 'page8.cfm'>
        Page7 Menu Item
        Page8 Menu Item (Highlighted)
    <cfelse>
        Page7 Menu Item
        Page8 Menu Item
    </cfif>
</cfif>

As you can see this is a short example and my menu is MUCH longer. Also, if ‘Page2’ would ever change in the future, there would be NUMEROUS places to find it and change it rather than just 1 place (ideally).

Any help on this subject is appreciated. If I should move this to be it’s own thread I will, but, it pertained to his original question so I figured I could amend it here.

Thanks in advance.