Menu CSS revisited
9 posts by 2 authors in: Forums > CMS Builder
Last Post: January 27, 2015 (RSS)
Hi All,
Based on an old post http://www.interactivetools.com/forum/forum-posts.php?postNum=2207467
I’m trying to effect a color change when a page selected from a nav menu is active.
I’ve got a multi-record editor called navigation_menu with a url and a (link) entry field that I’m using to populate my nav menu.
Here’s the basic code I started with.
<ul >
<?php foreach ($navigation_menuRecords as $record): ?>
<li ><a class="special" href="<?php echo strtolower($record['url']) ?>"<?php echo strtoupper($record['entry'] ) ?></a></li>
<?php endforeach ?>
</ul>
And based on the post, here’s the code that I cobbled together.
<ul >
<?php foreach ($navigation_menuRecords as $record): ?>
<?php $url = '/~nawaflco/nawafl/'.$record['url'] ?>
<li ><a class="special <?php echo preg_match('|$url|/i', $_SERVER['SCRIPT_NAME']) ? 'active' : 'inactive' ?>" href="<?php echo strtolower($record['url']) ?>"><?php echo strtoupper($record['entry']) ?></a></li>
<?php endforeach ?>
</ul>
When I go to a specific page (contact.php), both the $url and the $_SERVER['SCRIPT_NAME'] match exactly for that page’s entry (URL: /~nawaflco/nawafl/contact.php - SCRIPT_NAME: /~nawaflco/nawafl/contact.php), but the class still reads special inactive.
Any ideas appreciated.
Thanks,
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
By claire - January 27, 2015
Hi Jerry
Try changing your code like so:
<li ><a class="special <?php echo preg_match('/|'.preg_quote($url, '/').'|/i', $_SERVER['SCRIPT_NAME']) ? 'active' : 'inactive'; ?>" href="<?php echo strtolower($record['url']) ?>"><?php echo strtoupper($record['entry']) ?></a></li>
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By gkornbluth - January 27, 2015 - edited: January 27, 2015
Hi Claire,
Thank you for taking the time to look at this.
I wish I had better news.
Now all the links show class="special active" regardless of whether there's a match or not.
Interestingly, if I remove the /i in your suggested code, they all revert to class="special inactive".
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
By claire - January 27, 2015
Hi Jerry, can you do a showme() on both the URL and the $_SERVER['SCRIPT_NAME']?
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By gkornbluth - January 27, 2015 - edited: January 27, 2015
Hi Claire.
Here's the actual code used:
<ul >
<?php foreach ($navigation_menuRecords as $record): ?>
<?php $url = '/~nawaflco/nawafl/'.$record['url'] ?>
<li ><a class="special <?php echo preg_match('/|'.preg_quote($url, '/').'|/i', $_SERVER['SCRIPT_NAME']) ? 'active' : 'inactive'; ?>" href="<?php echo strtolower($record['url']) ?>"><?php echo strtoupper($record['entry']) ?><?php echo $spaced_entry ?></a></li>URL: <?php showme($url) ;?> Script-Name: <?php showme($_SERVER['SCRIPT_NAME']); ?>
<?php endforeach ?>
</ul>
And the Output (I was on the contact page and they seem to match for that entry):
<ul >
<li ><a class="special active" href="resources.php">RESOURCES</a></li>URL: <xmp>/~nawaflco/nawafl/resources.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
<li ><a class="special active" href="members-only.php">MEMBERS ONLY</a></li>URL: <xmp>/~nawaflco/nawafl/members-only.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
<li ><a class="special active" href="faq.php">FAQ</a></li>URL: <xmp>/~nawaflco/nawafl/faq.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
<li ><a class="special active" href="contact.php">CONTACT</a></li>URL: <xmp>/~nawaflco/nawafl/contact.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
<li ><a class="special active" href="forms.php">DOWNLOAD FORMS</a></li>URL: <xmp>/~nawaflco/nawafl/forms.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
</ul>
Thanks,
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
By claire - January 27, 2015
Hey Jerry
I have a theory that this is related to the restricted characters in the URL. Can you try this:
<li ><a class="special <?php echo preg_match('/|'.preg_quote($url, '/').'|/i', preg_quote($_SERVER['SCRIPT_NAME'], '/')) ? 'active' : 'inactive'; ?>" href="<?php echo strtolower($record['url']) ?>"><?php echo strtoupper($record['entry']) ?></a></li>
I suspect the regex isn't being matched correctly simply because it's a URL with slashes in it.
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
By gkornbluth - January 27, 2015 - edited: January 27, 2015
Sorry, Claire,
Not any different
I originally added the /~nawaflco/nawafl' to the $url because the SCRIPT NAME had the full path included. Could I use a different call to just return the page name and match that?
actual code
<ul >
<?php foreach ($navigation_menuRecords as $record): ?>
<?php $url = '/~nawaflco/nawafl/'.$record['url'] ?>
<li ><a class="special <?php echo preg_match('/|'.preg_quote($url, '/').'|/i', preg_quote($_SERVER['SCRIPT_NAME'], '/')) ? 'active' : 'inactive'; ?>" href="<?php echo strtolower($record['url']) ?>"><?php echo strtoupper($record['entry']) ?></a></li>
URL: <?php showme($url) ;?> Script-Name: <?php showme($_SERVER['SCRIPT_NAME']); ?>
<?php endforeach ?>
</ul>
Output
<li ><a class="special active" href="newsletters.php">NEWSLETTER</a></li> URL: <xmp>/~nawaflco/nawafl/newsletters.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
<li ><a class="special active" href="becomeamember.php">BECOME A MEMBER</a></li> URL: <xmp>/~nawaflco/nawafl/becomeamember.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
<li ><a class="special active" href="resources.php">RESOURCES</a></li> URL: <xmp>/~nawaflco/nawafl/resources.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
<li ><a class="special active" href="members-only.php">MEMBERS ONLY</a></li> URL: <xmp>/~nawaflco/nawafl/members-only.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
<li ><a class="special active" href="faq.php">FAQ</a></li> URL: <xmp>/~nawaflco/nawafl/faq.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
<li ><a class="special active" href="contact.php">CONTACT</a></li> URL: <xmp>/~nawaflco/nawafl/contact.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
<li ><a class="special active" href="forms.php">DOWNLOAD FORMS</a></li> URL: <xmp>/~nawaflco/nawafl/forms.php</xmp> Script-Name: <xmp>/~nawaflco/nawafl/contact.php</xmp>
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
By claire - January 27, 2015
Maybe simplifying this will make a difference. How about a match to see if the script name contains the record URL?
<li ><a class="special <?php echo strpos($_SERVER['SCRIPT_NAME'], $record['url']) !== false ? 'active' : 'inactive'; ?>" href="<?php echo strtolower($record['url']) ?>"><?php echo strtoupper($record['entry']) ?></a></li>
Claire Ryan
interactivetools.com
Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/
Thank you Claire,
Third time's the charm.
Works as planned.
Couldn't have done this without you!
Best,
Jerry
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php