Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2016-11-17 23:54:23

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,253
Website

Highlighting the current page menu item

A couple of years ago I posted some code to highlight the current page's navigation menu item for CE3 and CE4 sites.
I recently got a question about how to make that work in Backlight. And while I may have eventually figured it out by myself, I didn't feel like going down that rabbit hole right now. So, naturally, I asked Matt.

See the update at the bottom of this post on my TTG-Tips site:
http://ttg-tips-and-tricks.barbeephoto. … -websites/

Thanks Matt!


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#2 2016-11-18 21:10:20

Ben
Moderator
From: Melbourne, Australia
Registered: 2012-09-29
Posts: 3,283

Re: Highlighting the current page menu item

Hi Rod, I had a play with it with Backlight.  This works to add the selected class to the current page menu item:

function ttg_scripts( $style, $path ) { 
	
echo <<<SCRIPT
<script>
	$(function() {
		$("ul.menu a[href='" + window.location.pathname + "']").addClass("selected");
	});
</script>
SCRIPT;

} // END

(or with alternative syntax:

function ttg_scripts( $style, $path ) { ?>
<script>
	$(function() {
		$("ul.menu a[href='" + window.location.pathname + "']").addClass("selected");
	});
</script>
<?php } // END

)

That saves looping on the hrefs.  Bear in mind that Backlight 1.1 uses short URLs for Backlight links, e.g. /contact rather than http://yoursite.com/contact.  That's why window.location.pathname is used instead of window.location.href.

The following line adds 'selected' to the parent menu items as well:

$("ul.menu a[href='" + window.location.pathname + "']").addClass("selected").parents('li').children().addClass('selected');

Offline

#3 2016-11-18 21:59:15

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 4,992
Website

Re: Highlighting the current page menu item

And that's why Ben does the programming, rather than me. That's much cleaner than what I came up with. ;-)


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#4 2016-11-18 22:09:09

Ben
Moderator
From: Melbourne, Australia
Registered: 2012-09-29
Posts: 3,283

Re: Highlighting the current page menu item

You're too kind, Matt.  It may help to know that I don't know how that last line actually works.  My jQuery is rusty, especially when it comes to parent and child functions.

Offline

#5 2016-11-18 22:54:05

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,253
Website

Re: Highlighting the current page menu item

Cool.
Out of curiosity, by using
<<<SCRIPT
........
SCRIPT;

or the php closing and opening tags, are they're ways of avoiding having to escape the single quotes?

I'll update my blog post on this! thanks.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#6 2016-11-19 05:42:01

Ben
Moderator
From: Melbourne, Australia
Registered: 2012-09-29
Posts: 3,283

Re: Highlighting the current page menu item

They are.  I have never user heredocs before (the SCRIPT syntax, where SCRIPT can be whatever you like).  They're used for long strings where you can provide the content as-is without needing to escape quotes. 
In the above example, it turned out to be cleaner to close and reopen the PHP tags, since the objective is to output the code there and then.
If you wanted to assign the content instead then heredocs would work well, e.g.

$content =<<<SCRIPT
........
SCRIPT;

Offline

Board footer

Powered by FluxBB