Hi All,
Is there a TL function or technique that I can use to test if a child page is active? so I can write an 'active' class in the parent item?
I have got this mostly working but I am having trouble keeping the parent item highlighted when child pages are displayed.
I think that there's something wrong with my modified template but I can't figure it out. Any input appreciated.
Here is my nav-default.tpl that I am modifing
Code:
<ul class="<?php if ($this->level == 'level_1') { echo "nav IR clear-sf "; } echo $this->level; ?>">
<?php foreach ($this->items as $item) {
if ($item['isActive'] && $this->level == 'level_1') { ?>
<li class="active <?php if ($item['class']) { echo $item['class']; } ?>">
<span class="active <?php if ($item['class']) { echo $item['class']; } ?>"> <?php echo $item['link']; ?></span>
<?php echo $item['subitems']; ?>
<?php } else { ?>
<li <?php if ($item['class']) { ?> class="<?php echo $item['class']; ?>"<?php } ?>>
<a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"
<?php if ($item['class']) { ?> class="<?php echo $item['class']; ?>" <?php } ?>
<?php if ($item['accesskey'] != ''){ ?> accesskey="<?php echo $item['accesskey']; ?>" <?php } ?>
<?php if ($item['tabindex']) { ?> tabindex="<?php echo $item['tabindex']; ?>" <?php } ?>
<?php if ($item['nofollow']) { ?> rel="nofollow" <?php } ?>
onclick="this.blur();<?php echo $item['target']; ?>"><?php echo $item['link'];
if ($this->level == 'level_1') { echo""; } ?></a>
<?php echo $item['subitems']; ?>
<?php }
} //endforeach
?>[/list]
The css code if anyone is interested is here
Code:
/* **** Keep in mind that this method uses a single image for all buttons. The image is shifted up and down for highlights and positioned left to right with overflow widths trimmed for each button */
#mainnav {
position:absolute;
left: 220px;
top: 128px;
margin:0; padding:0;
z-index: 500;
}
.nav a { text-decoration: none; font-weight: bold; }
/*a:hover { text-decoration: underline; } */
.nav a:hover { text-decoration: none; }
h4.tested { margin-top: 2em; }
small { line-height: 120%; }
/* Hides from IE-mac \*/
* html .clear-sf { height: 1%; }
.clear { display: block; }
/* End hide from IE-mac */
/* image replacement general properties */
ul.IR li {
position: relative; /*establish a new positioning context for the elements contained within */
/* The original method recommends setting this so that the text doesn't peak out if you resize the text.
But overflow also includes our dropdown list, so we need the overflow to be visible. */
/*overflow: hidden; */
font-size: 0.9em;
}
.IR em {
display: block;
position: absolute;
top: 0; left: 0;
z-index: 1;
/* it’s the em which we’re going to place at the top corner of each list element with position: absolute so that it in fact covers up the text underneath. We need to set the em to display: block because it’s an inline element and won’t take dimensions in its default state. */
}
/* For IE5.x mac only */
* html>body .IR {
position: static;
overflow: visible;
font-size: 10px;
}
* html>body .IR em { position: static; }
/* image replacement specific properties */
.nav { list-style: none; } /* remove the bullets from the list */
.nav li { float: left; padding-bottom: 10px; } /* Float to make inline and add a little bottom padding to make sure the sub menus don't disappear before selecting them */
.nav li, .nav li em { height: 22px; width: 220px; } /* assign width of LI here necessary for drops - assign same dimensions to both the list items and the ems that will hold the images. */
* html>body ul.nav li em { margin-bottom: -22px; } /* for ie5.x/mac only */
.link1 em, .link2 em, .link3 em, .link4 em, .link5 em, .link6 em { /* apply the background-image to each of the ems */
background: url(../../abmac-default/images/links.jpg) no-repeat;
cursor: pointer; /* IE5 requires cursor: hand; however this is not valid CSS2 */
}
/* each link gets a class so we can style, position and set width separately */
.nav li.link1, .nav li.link1 em { width: 93px; }
.nav li.link2, .nav li.link2 em { width: 132px; }
.nav li.link3, .nav li.link3 em { width: 125px; }
.nav li.link4, .nav li.link4 em { width: 125px; }
.nav li.link5, .nav li.link5 em { width: 91px; }
.nav li.link6, .nav li.link6 em { width: 97px; }
ul li.active em { background-position: 0 -22px; } /* for active state */
.link1 { left: 0; }
.link1 em { background-position: 0 0; }
.link1:hover em { background-position: 0 -22px; }
.link2 { left: 0px; }
.link2 em { background-position: -93px 0; }
.link2:hover em { background-position: -93px -22px; }
.link3 { left: 0px; }
.link3 em { background-position: -225px 0; }
.link3:hover em { background-position: -225px -22px; }
.link4 { left: 0px; }
.link4 em { background-position: -350px 0; }
.link4:hover em { background-position: -350px -22px; }
.link5 { left: 0px; }
.link5 em { background-position: -475px 0; }
.link5:hover em { background-position: -475px -22px; }
.link6 { left: 0px; }
.link6 em { background-position: -566px 0; }
.link6:hover em { background-position: -566px -22px; }
/* suckerfish styles */
.nav a { display: block; font-weight: normal; font-size:8px; }
* html .nav a { height: 1%; } /* The Holly Hack - Correct a hasLayout problem with IE6 which leed to problems with accessing the dropdown links*/
.nav li ul {
position: absolute;
z-index: 10; /* show the dropdowns above the images */
top: 22px; /* position the dropdowns a set distance from the top of the image */
left: -999em; /* the dropdowns - are placed absolutely relative to their parents off-screen */
display:none;
list-style: none;
border: 2px solid #cbc0a3;
}
.nav li:hover ul { left: 0; padding-left:0; margin-left:0; display:inline;}
.nav li li {
height: auto; /* reset the height and padding set on the IR list items because they were set for the image replaced list items. */
line-height: 1.5em; /* control leading around text of drop-downs */
padding-bottom: 0;
font-size: 110%;
border-bottom: 1px solid #cbc0a3;
font-family:Georgia,'Times New Roman',Times,serif;
font-size:11px;
text-align:left;
}
.nav li ul a {
padding: 0.25em;
color: #990000;
padding-left:12px;
background-color:#E5E0CD;
font-size:11px;
}
.nav li ul a:hover {
color: #FFFFFF;
background: #990000;
}
'mainnav' div is in my tpl.
Example of TL & Suckerfish image replace on first level
Reply With Quote
Originally Posted by nvisioncurtis
Bookmarks