_listItem active state

24 posts by 2 authors in: Forums > CMS Builder
Last Post: May 25, 2010   (RSS)

By dsternalski - May 16, 2010

Hi,

I'm trying to give the <li> tag a class if it is an active link (so if the page is selected, the main navigation button stays highlighted).

Here's the section of the code that I'm trying to get this working on:

<?php foreach ($allCurriculumRecords as $categoryRecord): ?>
<?php if(!$categoryRecord['featureSelect']) : ?>
<?php echo $categoryRecord['_listItemStart'] ?>
<?php $thisPage = "curriculum"; ?>
<?php if ($categoryRecord['_hasParent']) {$thisPage .= "currentpage"; } ?>
<?php if ($categoryRecord['_hasChild']) {$thisPage .= "currentpage"; } ?>
<a href="<?php echo $categoryRecord['_link'] ?>"><?php echo $categoryRecord['name'] ?></a>
<?php echo $categoryRecord['_listItemEnd'] ?>
<?php endif ?>
<?php endforeach; ?>

also, please find the file.
Attachments:

navigation_007.php 6K

Re: [dsternalski] _listItem active state

By Jason - May 17, 2010

Hi,

What field in $categoryRecord are you using to decide if you want the navigation button highlighted or not?

Thanks.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] _listItem active state

By dsternalski - May 17, 2010

It would be the Parent (top level) navigation button.

Re: [dsternalski] _listItem active state

By Jason - May 17, 2010

Hi,

Sorry, I'm still not sure what you're using to decide whether or not an <li> tag should be highlighted.

What 2 fields have to be the same in order to highlight it?

Let me know.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [dsternalski] _listItem active state

By Jason - May 17, 2010

Hi,

You could try some code like this to output a different <li> tag:

<?php if $categoryRecord['_hasParent']==0 && $categoryRecord['_isSelectedBranch']==1): ?>
<li class="highlighted">
<?php else: ?>
<?php echo $categoryRecord['_listItemStart']; ?>
<?php endif ?>

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] _listItem active state

By dsternalski - May 18, 2010

Hi,

The code is now:

<?php foreach ($allCurriculumRecords as $categoryRecord): ?>
<?php if(!$categoryRecord['featureSelect']) : ?>
<?php $thisPage = "curriculum"; ?>
<?php if($categoryRecord['_hasParent']==0 && $categoryRecord['_isSelectedBranch']==1): ?>
<li class="currentpage">
<?php else: ?>
<?php echo $categoryRecord['_listItemStart']; ?>
<?php endif ?>
<a href="<?php echo $categoryRecord['_link'] ?>"><?php echo $categoryRecord['name'] ?></a>
<?php echo $categoryRecord['_listItemEnd'] ?>
<?php endif ?>
<?php endforeach; ?>

However, now this button is permanently active (even when it's not).

Re: [dsternalski] _listItem active state

By Jason - May 18, 2010

Hi,

How exactly do you want the selected menu item to be highlighted? Are you just changing the font size, color, etc? Let me know because there may be an easier way around this.

Thanks.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] _listItem active state

By dsternalski - May 18, 2010

Hi,

Here's the CSS code that I am trying to apply when the class currentpage is selected:

li.currentpage {background:#560a0b url(../images/buttonRightHover.gif) no-repeat top right;}
li.currentpage a {background:url(../images/buttonLeftHover.gif) no-repeat top left; color:#ffffff;}

So, the <li> will be applying a background image and background colour, and the <a> will also be applying an image and text colour change.

Re: [dsternalski] _listItem active state

By Jason - May 18, 2010

Hi,

What I would suggest is not have an li.currentpage class, so we don't run into any inheritance issues. Instead, we'll put our CSS in a span tag. You'll still need a class for the <a> tag.

Then we could use this code:

<?php foreach ($allCurriculumRecords as $categoryRecord): ?>
<?php if(!$categoryRecord['featureSelect']) : ?>
<?php $thisPage = "curriculum"; ?>
<?php echo $categoryRecord['_listItemStart']; ?>
<?php if($categoryRecord['_hasParent']==0 && $categoryRecord['_isSelectedBranch']==1): ?>
<span style="background:#560a0b url(../images/buttonRightHover.gif) no-repeat top right;">
<a class="*Class Name* " href="<?php echo $categoryRecord['_link'] ?>">
<?php echo $categoryRecord['_name'] ?>
</a></span>
<?php else: ?>
<a href="<?php echo $categoryRecord['_link'] ?>"><?php echo $categoryRecord['name'] ?></a>
<?php endif ?>

<?php echo $categoryRecord['_listItemEnd'] ?>
<?php endif ?>
<?php endforeach; ?>

You'll just need to replace *Class Name* with the CSS class you're using for your <a> tag.

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/