"Current page" designation with UL | MODX Community Forums

256 Posts

joshlfisher Reply #1, 18 years, 10 months ago

I have a hard coded UL like this:

<ul align="center">
			<li><a href="http://throughmylensphotography.com">Store</a></li>
			<li><a href="[~1~]">Portfolio Home</a></li>
			<li><a href="[~44~]">Login</a></li>
			<li><a href="[~10~]">Galleries</a></li>
			<li><a href="[~38~]">Events</a></li>	
                        <li><a href="[~31~]">Local Sources</a></li>
                        <li><a href="[~35~]">About</a></li>
</ul>

I need some way of having a ’current page’ designation, so that when I am on the portfolio home page, the portfolio home link has some ID, or class that specifies that it is current, so I can alter the BG color of the current link. I don’t want to use wayfinder, or dropmenu, I really need to use this UL. How can I do this?

PM me to find out how you can get a FREE ipad 2!

MODX Staff
12,272 Posts

Ryan Thrash Reply #2, 18 years, 10 months ago

Put an ID on the body of each page and a class on each LI or A. When the body matches the appropriate class, style it as needed.

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

24,544 Posts

BobRay Reply #3, 18 years, 10 months ago

On a non-MODx site that allows PHP code on any page, you can just put

<?php $thisPage="pagename"; ?>

on each page and put the whole menu as a loop in an include file with an if statement that checks the page name and puts a particular div around the current menu item.

In MODx, the only way I can think of (short of hard-coding a menu on each page) is to create a snippet that outputs the menu and does a test something like this for each item:

if (isHere($docId)) {
$output .= '<span class = "current">'.'your menu item here'.'</span>';
}

You’d need to set the $docId for each iteration and create your own isHere() function.

Personally, I’d try *really* hard to make Wayfinder work for you since it does all this automatically and, with my way, you’ll have to re-write your snippet every time you add or delete a page on your site.

Maybe someone else can think of an easier way.

Bob

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

256 Posts

joshlfisher Reply #4, 18 years, 10 months ago

Quote from: rthrash at Dec 19, 2007, 12:21 AM

Put an ID on the body of each page and a class on each LI or A. When the body matches the appropriate class, style it as needed.

I’m a little unsure how I would implement this.

PM me to find out how you can get a FREE ipad 2!

MODX Staff
12,272 Posts

Ryan Thrash Reply #5, 18 years, 10 months ago

Create a TV: [*bodyID*] (default value @INHERIT for grins)

Add this to your opening body tag:

<body id="[*bodyID*]">

Add this to your menu:

<ul align="center">
			<li><a class="store" href="http://throughmylensphotography.com">Store</a></li>
			<li><a class="portfolio" href="[~1~]">Portfolio Home</a></li>
			<li><a class="login" href="[~44~]">Login</a></li>
			<li><a class="galleries" href="[~10~]">Galleries</a></li>
			<li><a class="events" href="[~38~]">Events</a></li>	
                        <li><a class="sources" href="[~31~]">Local Sources</a></li>
                        <li><a class="about" href="[~35~]">About</a></li>
</ul>

Set the TV value for the pages as follows:
ID 1 (portfolio): portfolio
ID 44 (login): login
ID 10 (galleries): galleries
ID 38 (events): events
ID 31 (local sources): sources
ID 35 (about): about

Now assuming you don’t have bold, red text for links, add the following to your CSS to make bold red link text indicate you are on that page:

#store .store, #portfolio .portfolio, #login .login, #galleries .galleries, #events .events, #sources .sources, #about .about { 
    font-color: red; 
    font-weight: bold 
}

Adjust the CSS as needed and you’ll have a working solution.

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

256 Posts

joshlfisher Reply #6, 18 years, 10 months ago

Awesome! Thanks! I had figured out about half of this, but couldn’t get the rest!

PM me to find out how you can get a FREE ipad 2!