WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: sparkdigital on March 27, 2010, 09:20:07 AM

Title: Show active state for both main and sub menu at the same time?
Post by: sparkdigital on March 27, 2010, 09:20:07 AM: Hi,

I'm wondering if someone can help me with my menu on this new site we're building. It's basically a horizontal menu with a horizontal submenu below. A test version can be seen here: http://test.sparkdigital.co.uk/ (http://test.sparkdigital.co.uk/)

The menu is constructed of two seperate menus. The problem is that the top menu is showing the active state nicely when viewing one of the main pages, but when viewing one of the subpages, the active state is only shown for the subpage. Is there any way to show it for both?

Here's the menu code:

Code: [Select]
<div id="navigation"><?php show_menu(1, 0, 1, true, '<li>[a][menu_title]</a>','</li>','<ul id="menu">','</ul>','','class="active"'); ?></div>

and for the subnavigation:

Code: [Select]
<div id="sub_navigation"><?php show_menu(1, 1, 1, true,'<li>[a][menu_title]</a>','</li>','<ul id="sub_menu">','</ul>'); ?></div>
Also, has anyone got any ideas on how to sort out the difference in layout between FF and IE? It looks as it should in FF but I need to do some work still on IE - any help would be appreciated!

Thanks,

Konrad
Title: Re: Show active state for both main and sub menu at the same time?
Post by: Tumultus on March 27, 2010, 03:26:10 PM: Try this on your menu and replace class="active" with the class name for your active menu item:
Code: [Select]
<?php show_menu(1, 0, 1, true, '[a][menu_title][/a]', '', '', '', '', 'class="active"', 0); ?>
Title: Re: Show active state for both main and sub menu at the same time?
Post by: sparkdigital on March 29, 2010, 09:50:57 AM: No, sorry, that didn't work...

Any other suggestions anyone?

Thanks,

K
Title: Re: Show active state for both main and sub menu at the same time?
Post by: Argos on March 30, 2010, 01:22:17 PM: There's no reason to use two separate menus. Try one menu with just
Code: [Select]
<?php show_menu() ?> and use CSS to style the submenu as a horizontal bar.

To set both parent and child active, with your menu call in a container with ID "nav", and the menu UL with class "menu":

Code: [Select]
/* Active ("current") status main level links */ #nav li.menu-current a, .menu li:hover>a {blahblah} #nav ul li.menu-current {blahblah} /* Gives parent main level link an active status if child is active */ #nav ul li.menu-parent {blahblah} #nav li.menu-parent a {blahblah}
Title: Re: Show active state for both main and sub menu at the same time?
Post by: sparkdigital on March 30, 2010, 01:49:48 PM: Thanks Argos,

Will give it a try and will let you know how I get on.

Konrad
Title: Re: Show active state for both main and sub menu at the same time?
Post by: JonH on April 01, 2010, 03:00:09 PM: I have to use 2 different menus as the submenu is in a sidebar and the mainmenu is a basic horisontal menu at the top. How do I show active state in both?

Edit: I found the solution here: https://forum.WebsiteBaker.org/index.php?topic=13577.0;wap2

Code: [Select]
<?php show_menu2(1, SM2_ROOT+1, SM2_START); ?> and then style .menu-parent
Title: Re: Show active state for both main and sub menu at the same time?
Post by: sparkdigital on April 01, 2010, 03:42:11 PM: Thanks John,

This should work - in the top level it gives me the class menu_parent to style as the menu current and in the child level it gives me another menu_current. Thanks for the link!

Konrad
Title: Re: Show active state for both main and sub menu at the same time?
Post by: sparkdigital on April 01, 2010, 05:02:08 PM: Sorted! Looking at the example on http://soeder-architekten.de (http://soeder-architekten.de) and the CSS sheet that goes with it really helped - all done now, thanks for all your input!

K