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

The first CMS Builder reference book is now available on-line!







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

The first CMS Builder reference book is now available on-line!







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

The first CMS Builder reference book is now available on-line!







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

The first CMS Builder reference book is now available on-line!







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/