WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: markywatts on July 17, 2009, 09:42:49 AM
-
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
-
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):
<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>
CSS:
#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;}
-
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
-
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.
-
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
-
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!!
OMG... You don't have to say more :cry:
These are the same clients that moan about "That color of red is not exactly the same red that's on my brochure". And after my lecture on differences between print and screen colors, CRT and TFT screens, monitor settings and graphic adapter settings, monitor brands, monitor aging, and room lighting, dare to say "Well, that sounds all very technical, and I guess you're right, but just try to match the red on the site as closely as possible with the brochure, okay?". Aaargghhh!
-
OMG :roll: :roll: :roll: :roll: in these case I just say "it is the same color code, and go bug the designer for more info :)))"
These are the same clients that moan about "That color of red is not exactly the same red that's on my brochure". And after my lecture on differences between print and screen colors, CRT and TFT screens, monitor settings and graphic adapter settings, monitor brands, monitor aging, and room lighting, dare to say "Well, that sounds all very technical, and I guess you're right, but just try to match the red on the site as closely as possible with the brochure, okay?". Aaargghhh!
-
There is then only one thing to do with those customers ... sell them an expensive display AND the service to colour calibrate it :-D
cheers
Klaus
PS: I had this once and I just told the customer how much something like that would be ... issue was off the table.
-
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)
In this case there are two things you can do:
1) teach you customer so that he knows that he is not alone on the web
2) if he do not want to be correctet, deside:
a) leave it or
b) get involved against your integrity
Only the 1 thing is the right one. If my customers are "knowbests" I do not consider to work for them.
There is no person who is always right. And thats a lesson to be learned.
This applies mostly in cases where you have more knowledge as your customers - they can't be right with this and the trick is to show them kindly - not always easy, I know, but achievable. :wink:
Stefek
-
Hi,
Well, i managed to do it :o) I changed the /modules/show_menu2/include.php file by updating the following code. Just added what I needed to the <li> and <ul> and it worked ! Where there's a will there's a way :-D
// replace the keywords
function replace($aMatch) {
switch ($aMatch) {
case 'a':
return '<a href="'.$this->url.'" target="'.$this->page['target'].'">';
case 'ac':
return '<a href="'.$this->url.'" target="'.$this->page['target'].'" class="'.$this->currClass.'">';
case '/a':
return '</a>';
case 'li':
return '<li id="pg'.$this->page['page_id'].'" class="'.$this->currClass.'">';
case '/li':
return '</li>';
case 'ul':
return '<ul id="nav" class="'.$this->currClass.'">';
case '/ul':
return '</ul>';
case 'url':
return $this->url;
Thanks
Marky
-
Thanks for sharing Marky! I'm glad you have succeeded at last :-D
If you have a demo or live site where we can see it in action, please let us know.
-
Hi,
Demo site is here:
http://s291521300.websitehome.co.uk/pages/news/2009/march/march-story2.php
Thanks
Marky