By AChamp on

Hopefully somebody can help me with this. I've set up secondary menus below some of my parent (primary) menu items, and I'd like for the primary menu item to remain active while choosing among the various secondary menu items it contains.

In other words, I've got a menu item and it glows green when active. If I choose a secondary menu item below it, I'd like the parent to remain active (glow green).

The reason I'd like to fix this is because the target of a parent menu link is often the same target as one of my secondary links, too; so by clicking the parent menu, it glows, and the first choice within the secondary menu glows, too. However, when you click the second choice from the secondary menu, that choice will then glow, but the parent item goes back to an inactive state. The whole navigation concept is then lost, because the user won't know what category of links the secondary menu list belongs to (from the list of parent menus above).

Sorry if this is confusing.

For an example, you can check out my site.

http://www.legalfriction.com

Thanks in advance for any help!

⋅ Categories: Drupal 5.x

Comments

dman’s picture

dman commented

Use css.
The 'active' class is there for precisely this reason.
I think the bit you are talking about is your

#secondary a.active {
(the exact link is active)

If instead you were using something like
#secondary .active a {
(the branch is active)
the highlighting would continue to happen as expected.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

.dan. is the New Zealand Drupal Developer working on Government Web Standards

AChamp’s picture

AChamp commented

I followed your advice, and changed #primary from a.active {...} to .active a {...}. Works like a charm. Thanks a lot for your help. The menu works exactly like I hoped.

zavaliata’s picture

zavaliata commented

Does not work for me for some reason... I am on Drupal 6.9 if this is important.
Any suggestions?

dman’s picture

dman commented

Please view-source on the themed page you are using. there may be a different class name there - like class="in-active-trail" or something. It's up to you to look at your own code - if you can't post a link to an example.

.dan.
if you are asking a question you think should be documented, please provide a link to the handbook where you think the answer should be found.
| http://www.coders.co.nz/ |

.dan. is the New Zealand Drupal Developer working on Government Web Standards

zavaliata’s picture

zavaliata commented

The site is still offline only, so I post its CSS here:


/** global styles **/
body {
font: 13px/16px Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
}
body,td,th {
	color: #00FF33;
}
#page-wrapper {
position:relative;
width:974px;
text-align:left;
background-color: #000000;
margin: 0 auto;
}
a, a:link, a:visited {
color: #123456;
text-decoration: none;
}
a:hover, a:focus {
color: #123456;
text-decoration: underline;
}

h1.title, h1.title a, h1.title a:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
color: #123456;
font-size: 200%;
margin:0;
line-height:normal;
}
h1, h1 a, h1 a:hover {
font: 20px/20px Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin: 0;
}
h2, h3 {
font: 18px/18px Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin: 2px 0 0 0;
padding: 2px 5px;
}
h2 a, h2 a:hover, .block h3, .block h3 a {
font: 18px/22x Arial, Helvetica, sans-serif;
color: #FFFFFF !important;
margin: 0;
padding: 0;
}
#sidebar-left-region h2,
#sidebar-left-region h3, {
font: 16px/16px Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin: 0;
padding: 20px 0 0 0;
border: none;
}
h4, h5, h6 {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
/** header styles **/
#header-wrapper {
position: relative;
height: 120px;
border-bottom: 1px solid #0095D9;
}
#header-region {
}
#logo {
float: left;
margin: 12px 0 0 12px;
}
#primary-links {
position: absolute;
height: 30px;
bottom: 9px;
right: 0px;
}
#primary-links {
padding:0;
margin:0;
list-style:none;
float: right;
}
#primary-links {
display: inline;
}
#primary-links a {
padding: 3px 10px 0 10px;
font: 20px Verdana, Arial, Helvetica, sans-serif;
color: #0095D9;
}
#primary-links a:hover {
color: #00B5F9;
}
#primary-links .active a {
color: #00B5F9;
}
#secondary-links {
position: relative;
padding: 20px 0 0 8px;
line-height: 300%;
}
#secondary-links ul {
list-style: none;
float: left;
}
#secondary-links ul li {
display: list-item;
}
#secondary-links ul li a {
padding: 3px 10px 0 10px;
font: 16px Verdana, Arial, Helvetica, sans-serif;
color: #0095D9;
}
#secondary-links ul li a:hover {
color: #00B5F9;
}
#secondary-links ul li a.active {
color: #00B5F9;
}
#mission {
position: absolute;
left: 113px;
width: 650px;
top: 68px;
}
#site-slogan {
position: absolute;
left: 113px;
top: 50px;
}
/** content area styles **/
#main-wrapper{
position: relative;
width: auto;
height: 100%;
}
#content {
width: 743px;
padding: 12px 0 10px 10px;
position: relative;
float: left;
height: 600px;
background-image: url(images/sample.jpg);
background-repeat: no-repeat;
}
/** sidebar styles **/
#sidebar-left-region{
position: relative;
float: left;
width: 200px;
padding: 10px 0 0 10px;
}
/** footer styles **/
#footer-region {
float: none;
position:relative;
width: auto;
height: 40px;
margin: 0 auto;
clear: both;
}
#footer-text {
position: relative;
height: 30px;
color: #0095D9;
font-size: 12px;
line-height: 35px;
text-align: center;
}
/** Admin Style **/
/* Tabs */
dman’s picture

dman commented

I mean on your menu html.

.dan.
if you are asking a question you think should be documented, please provide a link to the handbook where you think the answer should be found.
| http://www.coders.co.nz/ |

.dan. is the New Zealand Drupal Developer working on Government Web Standards

zavaliata’s picture

zavaliata commented

Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>"dir="<?php print $language->dir ?>">

<head>
  <title>
	<?php print $head_title; ?>
  </title>
	<?php print $head; ?>
	<?php print $styles; ?>
	<?php print $scripts; ?>
	<script type="text/javascript"></script>
</head>

<body class="<?php print $body_classes; ?>">

	<div id="page-wrapper">
	
		<!-- BEGIN Header -->
		<div id="header-wrapper">
			
			<!-- logo -->
			<div id="logo">
			<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-image" /></a>
			</div>
			
			<!-- Region: header -->
			<div id="header-region">
			<?php print $header; ?>
			</div>

			<!-- primary links -->
			<div id="primary-links">
			<?php print theme('links', $primary_links); ?>
			</div>
			
		</div>
			
			<!-- BEGIN Center Content -->
			<div id="main-wrapper">
    		<!-- Region: sidebar left -->
			<div id="sidebar-left-region">
			<!-- secondary links -->
			<div id="secondary-links">
			<?php print theme('links', $secondary_links); ?>
			</div>
			<?php print $left; ?>
			</div>

			<!-- Region: content -->
			<div id="content">
			<?php print $content; ?>
			</div>
			
			<!-- END Center Content -->
			
			<!-- BEGIN Footer -->
			<!-- Region: footer -->
			<div id="footer-region">
			<?php print $footer; ?>
			
			<!-- footer text -->
			<div id="footer-text">
			<?php print $footer_message; ?>
			</div>
			</div>
			</div>
	</div>
	<?php print $closure; ?>

</body>
</html>
dman’s picture

dman commented

No :-)

That's PHP code.

View-source on the page showing the problem menu.
Copy the block of HTML that renders the menu (not the whole page please). In there we will see the actual class structure where there MAY be some semantic classnames you can build a CSS selector out of.

.dan.
if you are asking a question you think should be documented, please provide a link to the handbook where you think the answer should be found.
| http://www.coders.co.nz/ |

.dan. is the New Zealand Drupal Developer working on Government Web Standards

joachim’s picture

joachim commented

AFAIK there isn't. At least not in D5.
The menu_trails module does what you want IIRC.

zavaliata’s picture

zavaliata commented

Forgive my ignorance :-)

<!-- primary links -->
<div id="primary-links">
<ul class="links"><li class="menu-114 first"><a href="/drupal/?q=node/1" title="">Services</a></li>
<li class="menu-115"><a href="/drupal/?q=node/2" title="">Projects</a></li>
<li class="menu-116"><a href="/drupal/?q=node/3" title="">Partners</a></li>
<li class="menu-117"><a href="/drupal/?q=node/4" title="">About us</a></li>
<li class="menu-118 last"><a href="/drupal/?q=node/5" title="">Contact us</a></li>
dman’s picture

dman commented

See, that's not good.
Here's my example from a nonsense/dummy/dev site today.

  <ul class="links primary-links">
    <li class="menu-184 first"><a href="/a-menu" >a menu</a></li>
    <li class="menu-185 active-trail last"><a href="/about" >dummy about item</a></li>
</ul>
<ul class="links secondary-links">
  <li class="menu-206 first"><a href="/about/our-role">Our Role</a></li>
  <li class="menu-207"><a href="/about/recruitment" >Recruitment</a></li>
  <li class="menu-208 active-trail active"><a href="/about/enquiries" class="active">Enquiries</a></li>
  <li class="menu-205 last"><a href="/about/who-we-are">Who We Are</a></li>
</ul>

In this case 'Enquiries' is a child item of 'dummy about item'.
Looking at the classes available to me there, I can theme 

.links .active {
  font-weight:bold;
}

and also 

.links .active-trail {
  background-color:red;
}

If I want. This will show the currently active parent in red.

I'm not sure what theme (in D6) you are using if this is not working.
You did copy that menu code from a page where you expected the effect to work, didn't you? A page under another page that you wanted the menu to be highlighted in?

.dan.
if you are asking a question you think should be documented, please provide a link to the handbook where you think the answer should be found.
| http://www.coders.co.nz/ |

.dan. is the New Zealand Drupal Developer working on Government Web Standards

zavaliata’s picture

zavaliata commented

Actually I have written all the code from scratch. Used snippets from the book "Drupal 6 themes" by Packt.
Your advice works! It is interesting to mention that for some reason I can change property for background-color (as in your example) but not for the text color... Should it be like that?

At last below is the code you expect by me (without last modifications applied)... the previous one was without the children selected. Sorry for wasting your time man...
So it matches your example I think.

<!-- primary links -->
<div id="primary-links">
<ul class="links"><li class="menu-114 active-trail first"><a href="/drupal/?q=node/1" title="">Services</a></li>

<!-- secondary links -->
<div id="secondary-links">
<ul class="links"><li class="menu-119 active-trail first active"><a href="/drupal/?q=node/6" title="" class="active">Engineering</a></li>
dman’s picture

dman commented

Fine, fine.
So you can see that .active-trail is themable. Go for it!
The text color will not take simple color settings because it's a link. and your stylesheet or browser is probably coloring it with the a, a:link or a:visited color instead, as that's stronger in the cascade specificity calculations.
You may need

.links .active-trail a, 
.links .active-trail a:link, 
.links .active-trail a:visited {
  color: red;
}

to really make it work. But that's just normal CSS.

.dan.
if you are asking a question you think should be documented, please provide a link to the handbook where you think the answer should be found.
| http://www.coders.co.nz/ |

.dan. is the New Zealand Drupal Developer working on Government Web Standards

zavaliata’s picture

zavaliata commented

Thank you for all your help and time Dan! I owe you many beers :-)

The styling works with the "!important" declaration, I am not very into the CSS, so it is fine with me so far.