How to style current page link in menu with show_menu2

[aeon]

I want to change the style applied to the current menu item when using show_menu2. This is NOT the same as looking for the menu-current property as I ONLY want to apply a style to the specific link in the menu that returns to the current page. This is so that visitors to a site can see more clearly where they are.

So far I have only managed to style both the page being viewed AND it's child pages which I want to exclude from the style.

I cannot find any documentation or examples of this. I have a feeling that I might need to do some cunning code whereby the menu is read into variables rather than being displayed and javascript then parses these to find a matching page name AND menu-current property, and then goes on to generate the code to output the menu. Sounds much more complex than I would like though - and I would struggle not being a javascript guru!

Does anyone have any hints on this? Words of wisdom much appreciated!

[Waldschwein]

Hi!

You have to do this via the .css file of your template - just read the README of show_menu2 here. Everything is detailled described in it.

Regards Michael

[aeon]

Thanks Michael, I got that far but cannot find anything in the documentation that achieves what I describe. I have been making lots of adustments using CSS and everything looks like it should be fine APART from the ability to individually style the link on a menu which refers to the currently viewed page. Perhaps it is in there and I just can't see the wood for the trees!

If I could set an id="page_being_viewed_n ow" on the relevant menu item then I would have a handle to which I might apply a style, but I can't see how I might do this? Is it possible anyone?

Help still appreciated please!

[applepie]

Hi aeon, I am not sure if you have found the answer. You may find this site helpful: http://code.jellycan.com/show_menu2/

[marathoner]

@aeon

Normally, show_menu2 will use the class "menu-current" for the current page...but this can be changed. It might be helpful if you look at the HTML output of your page so you can see exactly what classes are applied to each menu item. Read the documentation as Waldschwein suggested since it outlines each class and how it is used.

[albatros]

Hi aeon,

and maybe the webdeveloper-addon for firefox will help you to check the css-classes in the output of showmenu2.

hth

albatros

[aeon]

Thanks to all for your suggestions - I had looked at the resources you direct me to and do use firefox addons to check CSS code.

The issue I am struggling with is that while menu-current applies only to the current page in the code the effect of CSS styling using this tag also applies to any child pages in a hierarchy

so if I have in the stylesheet
li.menu-current a { color:#ff0000; }

this works as follows -

Menu item 1
Menu item 2 (menu-current)
   Menu item 2 child 1
Menu item 3

instead of what I am looking for -

Menu item 1
Menu item 2 (menu-current)
  Menu item 2 child 1
Menu item 3

[marathoner]

Could you post your URL so we can look at it?

[aeon]

It's on a development server at present so not accessible. Sorry. I could provide CSS / PHP code extracts?

[marathoner]

Without seeing the code or the CSS this is purely a guess but I think that you are allowing the CSS to 'cascade' to the menu-current child.

Try something like this (not tested):
.menu-current a { color:#ff0000; }
.menu-current li a {color:XXXX;}

You simply need to style the "next level down" differently.

[aeon]

Brilliant marathoner! I had a feeling it must be staring me in the face and it was. Thanks.