Expand collapse menu like admin but for front end

[markywatts]

Hi,

Demo site is here:
http://s291521300.websitehome.co.uk/pages/news/2009/march/march-story2.php

Thanks
Marky

[Argos]

Thanks for sharing Marky! I'm glad you have succeeded at last 
If you have a demo or live site where we can see it in action, please let us know.

[markywatts]

Hi,

Well, i managed to do it )  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 

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

[Stefek]

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. 

Stefek

[kweitzel]

There is then only one thing to do with those customers ... sell them an expensive display AND the service to colour calibrate it

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.

[crnogorac081]

OMG  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!

[Argos]

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

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!

[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 

Thank you again.
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,

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]

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 Select Expand

<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] &raquo;</a>}]'); ?>
</div>

CSS:

Code Select Expand

#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;}

[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