_listItem active state
24 posts by 2 authors in: Forums > CMS Builder
Last Post: May 25, 2010 (RSS)
By dsternalski - May 16, 2010
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.
Re: [dsternalski] _listItem active state
By Jason - May 17, 2010
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
Re: [dsternalski] _listItem active state
By Jason - May 17, 2010
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: [Jason] _listItem active state
By dsternalski - May 17, 2010
It's the main level navigation that needs to stay highlighted when you're on a page in that section, so those that have a depth of 0.
Does that help?
Re: [dsternalski] _listItem active state
By Jason - May 17, 2010
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
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
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
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
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/