By -Anti- on

I don't know css (ie. I don't understand the syntax; I don't know what it means), but usually I muddle through by randomly trying different things, guided by what I see appearing in Firebug. This time I'm totally stuck - nothing I try works, and after fours hours I need to give up and get help.

I'm trying to style the (vertical) menu-block menu-items, bearing in mind I'm using DHTML menu. Eg.

TOP PARENT
- top parent (fake leaf)
- second leaf
- third leaf

In this case, the user has expanded the top parent, and then clicked the 'fake leaf' link.
The top parent is, say bold red, and the active fake leaf is, say, bold green.
The second and third leaves normal weight dark red.

TOP PARENT
- top parent (fake leaf)
- second leaf
- third leaf

Now the user has clicked 'second leaf', so it is bold green.
However, the top parent is still red, still showing which 'section' they're in.

TOP PARENT

Finally, the user clicks the 'top parent' to collapse it.
I stays bold red, showing that the page they're looking at is within that collapsed part of the menu.

Thanks for any insight or help with this.

⋅ Categories: Drupal 6.x

Comments

-Anti-’s picture

-Anti- commented

I finally solved this! And I even got more functionality than I was expecting:

TOP PARENT
- top parent (fake leaf)
- second leaf
- third leaf
- CHILD PARENT
-- child parent (fake leaf)
-- fourth leaf
-- fifth leaf

Here, the top parent and child parent are both bold red. The page being viewed (fourth leaf) is bold maroon. If collapsed, the top parent and child parent *stay* bold red. This allows users to browse other menus and still easily find their way back to where they were, or to see at a glance which 'section' they're in.

The css that does this is actually very simple; I'm ashamed that it took me six solid hours to work this out:

/* > is a 'child selector'; it doesn't select the whole nest like the descendant selector does */
li.active-trail>a {
color: #D00000;
font-weight: bold;
}

I for one, have never seen a > in a css stylesheet.
I'm indebted to the css 'selectors' information here:
http://www.westciv.com/style_master/academy/css_tutorial/selectors/index...

So, along with my horizontal primary/secondary menu being highlighted in the same manner, it is now virtually impossible to be viewing a page on my site and not know where you are in terms of the 'sections' conveyed by the menu hierarchy/layout (the 'sections' are based on content-type, and tie into the menu highlighting courtesy of the menu-trail module).

I've been working on and off with the entire issue of navigation for weeks, because the menu system problems were compounded by language/translation problems, and 'active-trail' styling issues, as well as my total ignorance of css. It's fantastic that I can now move on, but I really wish Drupal had sensible menu highlighting 'out of the box' - it's so easy to get lost on Drupal sites, more than any other cms I've tried, because of the shift away from being 'section orientated'. That shift is great, but at the same time you can't leave the user without any idea which part of the site they're in.

Brydave’s picture

Brydave commented

Thats great, thanks for the post! I was running into the same problem...

But I'm also wondering if you figured out how to edit the top parent css?
I want to have a different look to the top parent that you click on from the links that the menu opens up.

I'm using dhtml menu also with 6x and zen theme.

Thanks for your help!

BigMike’s picture

BigMike commented

I know this is an old post, but I am having trouble controlling the color of each dhtml-menu link

Drupal 6.17, DHTML-menu 3.5, using Zen theme 1.1

The menus are structured in the following:

div .content DHTML-menu
ul .menu
li .first dhtml-menu collapsed start-collapsed
a #dhtml_menu-###

where the '###' are some assigned numbers for each menu link

Here is what I am trying to use:

li.dhtml-menu a { color: #5F5F5F; font-weight: bold; }

But this does not work, nothing changes.

But if I include an exact menu ### number, such as the following:

li.dhtml-menu a#dhtml_menu-125 { color: #5F5F5F; font-weight: bold; }

Then it works great but ONLY for that particular menu link. I've got about 30 or so menu items, so I suppose I could list them all one by one in my .css file, but WOW that is annoying, and in the future if anyone decides to add menus then I will have to go into the css EACH TIME and add each new menu item's id number. So really this is not a solution..

I've tried all of these and so far no dice:

li.dhtml-menu a#dhtml_menu-*
li.dhtml-menu a#
li.dhtml-menu a#*
li.dhtml-menu a
li.dhtml-menu a*
li.dhtml-menu>a
li.dhtml-menu a:active
li.dhtml-menu a:link

So the next thing I tried was to modify the module itself (which I HATE doing, just trying to troubleshoot...), \sites\all\modules\dhtml_menu\dhtml_menu.module

63:  // Only work with menu items that have an mlid and a menu name.
64:  if (isset($link['menu_name']) && isset($link['mlid'])) {
65:    // Some themes use options, others use localized_options. Populate both.
66:    $link['localized_options']['attributes']['id'] = 'dhtml_menu-' . _dhtml_menu_unique_id($link['mlid']);
67:    $link['options']['attributes']['id'] = $link['localized_options']['attributes']['id'];

At line 67 I inserted this:

$link['localized_options']['attributes']['class'] = 'test_class';

Now, when I check the style of say menu id # 125, it looks like this:

div .content DHTML-menu
ul .menu
li .dhtml-menu collapsed start-collapsed
a #dhtml_menu-125 .test_class

GREAT. Now I have a class to control the menu link with. BUT, SADLY THIS ALSO WON'T WORK!!

li.dhtml-menu a.test_class { color: #5F5F5F; font-weight: bold; } <--- This does NOTHING
li.dhtml-menu a#dhtml_menu-125 { color: #5F5F5F; font-weight: bold; } <--- And of course this does

So I'm back to square one. I've checked all other .css files, there is nothing else calling the id of each link so I am pretty sure my css mods are not being overruled...

So being the novice I am, I wondered if maybe IDs have higher priority than classes, so I inserted this at line 67:

$link['localized_options']['attributes']['id'] = 'test_id';

And this actually replaced the entire id with just "test_id". So then I tried
li.dhtml-menu a#test_id { color: #5F5F5F; font-weight: bold; }

and wa-la, the color and font-weight now appear for ALL menu links. But I am wondering.... Those generated menu numbers must be there for some reason and this hack removes them.

How can I append a second ID instead of replacing the entire ID ? I wonder if it was
a #dhtml_menu-### test_id
If I could simply control it using the test_id ID.............?

Any help is GREATLY appreciated. Thank you very much!

Regards,
BigMike

BigMike’s picture

BigMike commented

But I am wondering.... Those generated menu numbers must be there for some reason

Ok, I just discovered that removing the dhtml_menu-### ID breaks the DHTML option, "Keep only one menu open at a time".

BigMike’s picture

BigMike commented

Anyone know how to change the color of the menu text???? I've been trying to do this for a solid month :-(

BigMike’s picture

BigMike commented

ok ok ok ok ok ok ok ok

I FINALLY GOT IT!!!!!!!

And actually... It was just a different css line that was controlling all hyperlink colors on my sidebar where the menu is.

ARRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG such a simple issue and now that it's fixed its like a bitter sweet victory haha

Ok, carry on :D

Mike

tanitani’s picture

tanitani commented

You wrote so much in your first post, then just "I finally got it"?

Please elaborate.
Thanks,

Gábor

christopher james francis rodgers’s picture

christopher james francis rodgers commented

@BigMike

Given that it is thee only addon module for one of my sites.

..and given that DHTML Menu is 'buggy'
and appears to have no maintenance /
has been abandoned by developers.

Thanking you kindly in advance:

- Chris
.
.


All the best; intended.
-Chris (great-grandpa.com)
___
"The number one stated objective for Drupal is improving usability." ~Dries Buytaert *