Expand collapse menu like admin but for front end

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

(1/3) > >>

markywatts:
Hi,

I have a site that needs a static menu across top and then sub menu on the left, the sub menu has sub pages within aswell. So just the like the admin in WebsiteBaker is there a way of using that javascript on the sub menu that expands and collapses and also remembers which one was expanded when you click and go to that page.

So you could expand say NEWS and the year and then click one of the news items:
- News
+ 2008
- 2009
article 1
article 2
article 3
+ Results
+ Photos

This would stay expanded like above and highlight the page you are now actually on say "article 1". Pretty much just how it works when logged into pages in the CMS.

Thanks
Marky

Argos:
No need for javascript. Use show_menu2 to style your menu: http://code.jellycan.com/show_menu2/

Beware: this is powerful yet complex stuff, especially if you haven't work with it much yet.

I think this might get you started (I took it from a site I built):

--- Code: ---<div id="submenu">
<?php show_menu2(0,SM2_ROOT+2,SM2_CURR+1,'','[if(class!=menu-expand){[li][a][menu_title]</a>}][if(class==menu-expand){[li][a][menu_title] »</a>}]'); ?>
</div>
--- End code ---

CSS:

--- Code: ---#submenu {float:right;width:220px;margin-left:10px;background-color:#ededed;border:1px solid #b5b6b5;font-size:0.9em;border-top:none;}
#submenu #head {background-color:#999;color:#fff;display:block;font-weight:bold;height:22px;line-height:22px;padding-left:10px;}

#submenu ul,
#submenu li{list-style-type:none;margin:0;padding:0;}
#submenu li{border-top:1px solid #b5b6b5;}
#submenu a:link,
#submenu a:visited,
#submenu a:active,
#submenu a:hover {line-height:22px;color:#333;font-size:95%;display:block;text-decoration:none;padding:0 10px;font-weight:bold;}
#submenu a:hover {background-color:#b5b6b5;}
#submenu ul li ul li a {background-color:#f9f9f9;padding:0 10px 0 25px !important;color:#666 !important;font-weight:normal !important;}
#submenu .menu_current {background-color:#fff;}
--- End code ---

markywatts:
Hi,

Have tried your code but the customer wants to be able to click a + sign and expand the menu without going to another page, then clicking a sub item to go to that page. So your suggestion works but you have to click a menu item go to that page for it to expand :-(

I have almost got it working here, I want show_menu2 to display only the "Children of a specific page_id" like so:

<?php show_menu2(2, 7, SM2_ALL, SM2_ALL); ?>

This works but I then need the <ul> to have an ID and the <li>'s to have ID's aswell. I have successfully got it working with an ID for the <ul> and for the <li> using this:

<?php show_menu2(2, SM2_ROOT, SM2_ALL, SM2_ALL, '<li id="pg[page_id]"><a href="[url]" target="[target]">[menu_title]</a>', "\n</li>", '<ul id="nav">','</ul>', false, false); ?>

But when you go to a sub page in that list the menu disappears; because there are no submenu items to show. I need it to display all the "Children of a specific page_id", so I tried this code and it doesn't work :-(
<?php show_menu2(2, 7, SM2_ALL, SM2_ALL, false, '<li id="pg[page_id]"><a href="[url]" target="[target]">[menu_title]</a>', "\n</li>", '<ul id="nav">','</ul>', false, false); ?>

Please, please can you help??

See the site here. (view source for commented out attempts)
http://s291521300.websitehome.co.uk/pages/login.php

Thanks
Marky

Argos:
Sorry, can't help you without spending much time (which I won't do).

But I must warn you that most ordinary web users will not understand the concept of clicking on + signs to open a menu tree. This is a user interface element that's familiar to web and computer professionals, but not to your average site visitor. People tend to click on links, not on + signs. So I advise you to get rid of the + signs and use my example as it is: click a link to open a tree.

markywatts:
Hi,

I totally agree with you it is just a bad idea and not how most people use sites! Unfortunately for me the customer is insistent that this has to work this way as well as the dimensions of the site fitting perfectly to his laptop screen size. Need I say more!! Much to my advice not to do this... customer is always right (NOT)

Thank you for you help and I will bear your code in mind for future less strict clients :-D

Thank you again.
Marky

Navigation

[0] Message Index

[#] Next page

Go to full version