By noraa on

I know this is merely aesthetic, but it's really bugging me now, and I know it SHOULD be possible. First off, thanks in advance for any advice. I've gotten some great help here getting this theme this far, and for that I am truly thankful. Now this one last piece. I cannot get the active primary link to stay highlighted when the secondary link is clicked. Example: www.lifeonilife.com. Under iMovie and iPhoto links are some secondary links which are showing and highlighted just as I want. What I want the primary link to do is stay highlighted also (in this case stay blue). Here is my page.tpl.php code:

<div id="navcontainer">
<ul>
					  <?php if (isset($primary_links)) { ?>
						<?php foreach ($primary_links as $link): ?>
						<li><?php print $link?></li>
						<?php endforeach; ?>
					  <?php } ?>
		<ul>		  
					  <?php if (isset($secondary_links)) { ?>
						<?php foreach ($secondary_links as $link): ?>
						<li><?php print $link?></li>
						<?php endforeach; ?>
					  <?php } ?>
		</ul>	
</ul>
</div>

Here is my css code:

/* Toolbar Styles */

#navcontainer {
margin-right: auto;
margin-left: auto;
width: 680px;
position: relative;
height: 10px;
font-size: 0.9em;
}
#navcontainer #active {
background: no-repeat url(images/button_over.png);
text-shadow: none;
}
#navcontainer .active {
background: no-repeat url(images/button_over.png);
text-shadow: none;
}
/* Parent - Level 0 */
#navcontainer ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 680px;
left: 0;
}
#navcontainer li {
display: inline;
float: left;
}
#navcontainer a{
width: 113px;
height: 34px;
display: block;
background: no-repeat url(images/button_normal.png);
text-decoration: none;
padding-top: 11px;
color: #000;
text-shadow: 0px 1px 0px #ffffff;
text-align: center;
}
#navcontainer a:hover {
}
#navcontainer a:active {
background: url(images/button_over.png) no-repeat;
text-shadow: none;
}
/* Child - Level 1 */
#navcontainer ul ul {
position: absolute;
left: 0;
top: 32px;
width: inherit;
font-size: 0.9em;
}
#navcontainer ul ul li {
}
#navcontainer ul ul a {
background: none;
padding-top: 1px;
width: 9em;
}
#navcontainer ul ul a:hover{
background: repeat-x url(images/submenu_over.png) center top;
}
#navcontainer ul ul #active{
background: repeat-x url(images/submenu_over.png) center top;
text-shadow: none;
}
#navcontainer ul ul .active {
background: repeat-x url(images/submenu_over.png) center top;
text-shadow: none;
}

⋅ Categories: Drupal 4.7.x

Comments

markhope’s picture

markhope commented

Hi Noraa

I think this is solved by using CSS as I mentioned in an earlier post:
http://drupal.org/node/90318#comment-164972

Once you click on a secondary link it gets the class of ".active". This means that your primary link no longer is highlighted.

Replace your nav code with this (i've not tested it btw). It will add an id to each Primary nav link.
home should be id="primnav1", imovie should be id="primnav2" and so on.

<div id="navcontainer">
<ul id="primarynav"> /*I've added an ID to pick out the primary nav ul*/
<?php if (isset($primary_links)) { ?>
<?php 
  $i=1;
  foreach ($primary_links as $link): ?>
<li id="primnav<?php print t($i) ?>"><?php print $link?></li>
<?php 
  $i++;
  endforeach; ?>
<?php } ?>
<ul>
<?php if (isset($secondary_links)) { ?>
<?php foreach ($secondary_links as $link): ?>
<li><?php print $link?></li>
<?php endforeach; ?>
<?php } ?>
</ul>
</ul>
</div>

Then replace your body tag in page.tpl.php with:

<?php
/**
*  This snippet creates a <body> class and id for each page.
*
* - Class names are general, applying to a whole section of documents (e.g. admin or ).
* - Id names are unique, applying to a single page.
*/
// Remove any leading and trailing slashes.
$uri_path = trim($_SERVER['REQUEST_URI'], '/');
// Split up the remaining URI into an array, using '/' as delimiter.
$uri_parts = explode('/', $uri_path);

// If the first part is empty, label both id and class 'main'.
if ($uri_parts[0] == '') {
    $body_id = 'main';
    $body_class = 'main';
}
else {
    // Construct the id name from the full URI, replacing slashes with dashes.
    $body_id = str_replace('/','-', $uri_path);
    // Construct the class name from the first part of the URI only.
    $body_class = $uri_parts[0];
}
/**
* Add prefixes to create a kind of protective namepace to prevent possible
* conflict with other css selectors.
*
* - Prefix body ids with "page-"(since we use them to target a specific page).
* - Prefix body classes with "section-"(since we use them to target a whole sections).
*/
$body_id = 'page-'.$body_id;
$body_class = 'section-'.$body_class;
print "<body class=\"$body_class\" id=\"$body_id\"";
print theme('onload_attribute');
print ">";
?>

You don't really need to understand the code - it just works.

I notice you now have clean url's enabled so this should apply the class="section-imovie" to the body tag when you click on the imovie button (because the url is /imovie).

<body class="section-imovie" id="page-imovie">

Next change your imovie forum url to /imovie/forum
Change your iphoto url to /iphoto
and your iphoto forum to /iphoto/forum

that makes more sense anyway as they fall below those primary sections.

now you should be able to apply a highlight to the primary nav no matter which menu link is active.

#navcontainer li {
display: inline;
float: left;
}
#navcontainer li a{
width: 113px;
height: 34px;
display: block;
background: no-repeat url(images/button_normal.png);
text-decoration: none;
padding-top: 11px;
color: #000;
text-shadow: 0px 1px 0px #ffffff;
text-align: center;
}
#navcontainer li a:hover {
   background: url(images/button_over.png) no-repeat;
}
#navcontainer li a:active {
background: url(images/button_over.png) no-repeat;
text-shadow: none;
}
.section-main ul#primarynav li#primnav1 a,
.section-imovie ul#primarynav li#primnav2 a,
.section-iphoto ul#primarynav li#primnav3 a 
{
   background: url(images/button_over.png) no-repeat;  /* the section highlight */
}

You need to set up more css rules in the last block for each new section you add.

Let me know how you get on.

Mark

noraa’s picture

noraa commented

Thanks once again for the speedy reply. As with anything one fiddles with too long, the mind goes to mush and can't see the forest for the trees (or is that trees for the forest?). It has become all a blur to me at this point. As soon as I get back from the store (for some reason hubby expects a meal when he gets home from work) I will be absorbing your directions. I suspected the answer was in the original code somewhere, but I've made quite the cluster f___ of things at this point. Thanks for giving me a vantage point to jump off clean from again. Will keep you posted on progress. Someday I actually plan to add content to this little site.

vm’s picture

vm commented

closing unclosed code tag

noraa’s picture

noraa commented

Can't thank you enough, Markhope. All is working fine now. The php is a little more than I can absorb at 2:15am, but I'm studying it. Thanks so much! I'm gonna have to buy you a virtual dinner.

markhope’s picture

markhope commented

Hi noraa,

Never had a virtual dinner before. ha ha. Glad you're pleased with the results - looks good.

Mark