WebsiteBaker Support (2.8.x) > Templates, Menus & Design

show_menu2 and menu_current

(1/2) > >>

CodeALot:
Edit: Ok, my initial question was too complicated I think. No suggestions whatsoever :)

Before you read on, here's my question in a nutshell: How does the MENU (and NOT the described function!) in this page work? How is it 'called'?
http://code.jellycan.com/sm2test/pages/conditional/show-only-siblings.php
I want what's happening there. Color the parent, color the active sibling. And that in a horizontal menu :)
 
I mean... I LOVE the show_menu2 functions, but it comes with about the worst possible documentation. I just want to know how to pass a class to an active page, AND the active PARENT of that page. I've tried and tried, see code below, and I can't get it to work.

Yes, it's pretty fair to say I'm getting quite desperate here.

I have:
5 menu "parents",
Each parent has 5 "child" pages.
 
I managed to get show_menu2 to show me both the parents and the children, in two seperate horizontal menu's. Each item seperated by a |  symbol. Wonderful :)


--- Code: ---        show_menu2(0, SM2_ROOT, SM2_START, SM2_PRETTY, ' |   [a][menu_title]</a>', '', '', '', '[a][menu_title]</a> ');
        show_menu2(0, SM2_ROOT+1, SM2_START, SM2_PRETTY, ' |   [a][menu_title]</a>', '', '', '', '[a][menu_title]</a> ');
--- End code ---

This works. If I click parent 1, I see the 5 children of that page in the second invocation of show_menu2. Great.
Now, what I want, is to have the menu_current class active on the ACTIVE parent-title _and_ the ACTIVE childpage-title.

All links in both "Parent" and the "Child" menu are white. Active pages should appear black in the menu.

So, if I click Parent-1, and then Child-4, I want the Child-4 page to show up (which it does) and have the Parent-1 and Child-4 to appear in black.

This is the CSS I used so far:

--- Code: ---.menu a:link, .menu a:visited, .menu a:active {
    text-transform:uppercase;
    color:#ffffff;
    padding:8px; text-decoration:none;
}
.menu a:hover {
    text-transform:uppercase;
    color:#000000;
    text-decoration:none;

}

.menu_current a:link, .menu_current a:visited, .menu_current a:active {
    text-transform:uppercase;
    color:#000000;
    text-decoration:none;

}
.menu_current a:hover {
    text-transform:uppercase;
    color:#000000;
    text-decoration:none;

}
--- End code ---

Can anyone help me out? Please? Very please?

I'd give you a live URL, but this is a project that's still only active on my local webserver...

Thanks in advance. Anyone. Please. Did I say please already? :)

CodeALot:
The guy that comes up with an easy to use Show_menu3 will be nominated for the Nobel Prize. This thing is giving me a splitting headache.  :oops:

erpe0812:
Despite what you said, a link would be helpful.
Is it not possible, to set this one on a live server?

rgds

erpe

CodeALot:
Thanks for your reply, Erpe,

I build the site using a local webserver, pointing the actual URL to my 127.0.0.1. That way I can use all site-paths as if they were live. My client already has a webserver on the domain I'm using so I can't upload it to its live-environment yet...

Maybe a schematic display of what I want?

HOME  |   ARRANGEMENTS   |    ROOMS

This is "level 1", it's the top horizontal menu. Now, if I click ROOMS, it looks like this:

HOME  |   ARRANGEMENTS   |    ROOMS
SINGLE  |   DOUBLE   |   SPECIALS

The second line (Single/Double/Specials) is a second invocation of the menu.
By clicking ROOMS in the top menu, the page SINGLE will be the first to load. So, the site is showing the SINGLE page. This all works great.

What I want now, is to have ROOMS and SINGLE be "lit up" in a different color than the other menu-items.

The CSS I use for this is:

--- Code: ---.menu a:link, .menu a:visited, .menu a:active {
    text-transform:uppercase;
    color:#ffffff;
    padding:8px; text-decoration:none;
}
.menu a:hover {
    text-transform:uppercase;
    color:#000000;
    text-decoration:none;
}

.menu_current a:link, .menu_current a:visited, .menu_current a:active {
    text-transform:uppercase;
    color:#000000;
    text-decoration:none;
}

.menu_current a:hover {
    text-transform:uppercase;
    color:#000000;
    text-decoration:none;
}
--- End code ---

The two menus (top level and the second horizontal menu) are invoked using:


--- Code: ---show_menu2(0, SM2_ROOT, SM2_START, SM2_PRETTY, ' |   [a][menu_title]</a>', '', '', '', '[a][menu_title]</a> ');
show_menu2(0, SM2_ROOT+1, SM2_START, SM2_PRETTY, ' |   [a][menu_title]</a>', '', '', '', '[a][menu_title]</a> ');
--- End code ---

I have built site having the "current" page light up the right way in the menu, but never on two levels at the same time. Above that, I can't even get ROOMS (in the above example) to light up, so I assume there's something in the two "show_menu2" invocation lines that should be altered... But what?

erpe0812:
I understood what you want, but it is easier to develop/test it with a live link and firebug.

If you click as you described, SINGLE is current (but in ul li ul li) and ROOMS is parent (in ul li), but it depends on the formatting of the rest of the menu and of the menu-items. Is ROOMS created as a menu-link? So if not, SINGLE would be child referring to ROOMS.

Spo you see, it is really easier if we got a link.
Have a look at your html output code and see, which classes the menu items have, and format them in order of appearence.

rgds

erpe

 

Navigation

[0] Message Index

[#] Next page