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

Show active state for both main and sub menu at the same time?

(1/2) > >>

sparkdigital:
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/

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: ---<div id="navigation"><?php show_menu(1, 0, 1, true, &#39;<li>[a][menu_title]</a>&#39;,&#39;</li>&#39;,&#39;<ul id="menu">&#39;,&#39;</ul>&#39;,&#39;&#39;,&#39;class="active"&#39;); ?></div>
--- End code ---


and for the subnavigation:


--- Code: ---<div id="sub_navigation"><?php 
        show_menu(1, 1, 1, true,&#39;<li>[a][menu_title]</a>&#39;,&#39;</li>&#39;,&#39;<ul id="sub_menu">&#39;,&#39;</ul>&#39;); 
      ?></div>
--- End code ---

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

Tumultus:
Try this on your menu and replace class="active" with the class name for your active menu item:

--- Code: ---<?php show_menu(1, 0, 1, true, &#39;[a][menu_title][/a]&#39;, &#39;&#39;, &#39;&#39;, &#39;&#39;, &#39;&#39;, &#39;class="active"&#39;, 0); ?>
--- End code ---

sparkdigital:
No, sorry, that didn't work...

Any other suggestions anyone?

Thanks,

K

Argos:
There's no reason to use two separate menus. Try one menu with just
--- Code: ---<?php show_menu() ?>
--- End code ---
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: ---/* 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}
--- End code ---

sparkdigital:
Thanks Argos,

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

Konrad

Navigation

[0] Message Index

[#] Next page