show_menu2: valid XHTML and CSS selectable menus

[Francisco]

 Hi there,

I have just installed this module, changed my template to have:

show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul class="udm" id="udm">');

instead of "SHOW_MENU"

I get a list of pages in bare HTML, seems like the CLASS is missing. I am attaching a screenshot, for privacy reasons I blanked out the page names and everything that can be used to track the website using google.

Excuse me my ignorance, but did I missed any steps? ~ I just changed the template menu code... maybe I didn't do it right.

But I checked the source code of your DEMO page, it seems like you use JAVA SCRIPT... I don't know where to get those to get UDM working...

This is what I modified/added in template:

Code Select Expand

<td width="100%" style="height: 173px">
                        <?php if(SHOW_MENU) { /* Only shown menu if we need to */ ?>
<?php show_menu2(0, SM2_ROOT, SM2_ALL, SM2_ALL, false, "\n</li>", false, false, false, '<ul class="udm" id="udm">'); ?>
<?php } ?></td>


Thanks

[brofield]

You might be able to do something like that using conditions, but it looks like a pretty messy menu. Try one of the other CSS menus that don't need all of the table guff that this one does. An example using UDM is on the sample site. There are plenty of others too.

B

[valerie]

Can showmenu2 work on a multi-level css menu? The one I'm looking at is by stu nicholls found here: http://www.cssplay.co.uk/menus/final_drop2.html

I can figure out one level but beyond that I'm not sure...

Here's the xhtml:

Code Select Expand

<ul>
<li><a class="drop" href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>

<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders
<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>

<li><a href="#nogo">FLYOUT third level &#187;<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="#nogo">Third level-1</a></li>
<li><a href="#nogo">Third level-2</a></li>
<li><a href="#nogo">Third level-3</a></li>
<li><a href="#nogo">Third level-4</a></li>

</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>

<li class="upone"><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
</ul>

</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>

[brofield]

Version 3.6 now available at http://code.jellycan.com/show_menu2/

• New flag SM2_SIBLING to output only the parents and siblings of the current menu

B

[marccouture]

brofield, you are a life saver.  Excellent work, thank you very much!

[berndn]

Thanks a lot for your explanation. I wasn't sure that it was so easy to use the custom output filter in the version I used. Thanks for this

And thanks a lot for the new version. Will try it 

[brofield]

A custom output class takes callbacks from the sm2 menu engine and formats that data for output. The legacy.php file defines a new function sm2_show_menu() which attempts to recreate the call signature of the show_menu() function using a custom output class. It is an example of how to call show_menu2 with a custom output class, not a final solution for you.

Instead use show_menu2 version 3.5 and use the conditional formatting. See the http://code.jellycan.com/sm2test/ website, "Conditional" for an example of what you want to do.

B

[brofield]

Version 3.5 now available at http://code.jellycan.com/show_menu2/

• Added conditional formatting. Only add attributes, classes, tags, etc when specific conditions are met for that menu item, like if it has a particular class, if it has a particular level, etc. Ssee the documentation for complete details. Examples using the conditional formatting can be found at the demo site http://code.jellycan.com/sm2test/ (search for "Conditional")
• New flag SM2_PRETTY to output the menu HTML formatted with indents for ease of debugging

B

[berndn]

Thanks for the tips so far. I would need the name="submenu" for the javascript which is needed for Internet Explorer.
I looked into the legacy.php but I'm not sure how to use it. I enable the legacy.php with the include.
After I do this what has changed. Do I need to call show_menu2 with what parameters or what do I have to do ?
If you wish we can talk about this via email or pm instead of me asking silly question in this thread

[brofield]

I want to create this kind of list...
But all my tries lead to garbish

Please read the documentation at http://code.jellycan.com/show_menu2/  In any case, that looks pretty much like the default output. Exactly what are you trying to do that is different to the default? If you want the class="submenu" when the menu has sub-menus then you just need to change your code to expect the class "menu-expand" and there you have it. There is no easy way to get the name="submenu" added when there is a submenu without writing your own output function. See legacy.php in the sm2 zipfile download for an example of a custom output function.

Anyway to dump the show_menu2 output into an php array or is this to complicated

Again, have a look at writing your own custom output function if you really want it output as an array. I expect that you are looking to over-engineer the problem though. You just need to read the documentation better.

Give us a clear explanation of the problem and we might be able to help you.

Regards,
Brodie

[berndn]

I want to create this kind of list:

Code Select Expand


<div id=menu><ul id=menuList><li><a href="#" name="submenu" class="submenu">Products</a><ul><li><a href="#">All</a></li>
<li><a href="#">CodeCharge</a></li>
<li><a href="#">CodeCharge Studio</a></li>
<li><a href="#">DemoCharge Studio</a></li>
<li><a href="#" name="submenu" class="submenu">Comparison</a><ul><li><a href="#">CodeCharge Studio</a></li>
<li><a href="#">DemoCharge Studio</a></li></ul></li>
</ul></li>


But all my tries lead to garbish
Anyway to dump the show_menu2 output into an php array or is this to complicated

[ruebenwurzel]

Hello,

what's your problem with this?

Matthias

[berndn]

I like it and have only one problem.
Can this be implemented http://examples.codecharge.com/CCSExamplePack2/VerticalCSSMenu/VCSSMenu.php ?
I have serious trouble with this.
Can someone help ?

[ruebenwurzel]

Hello,

using this replacement function is very easy. Download the last version, install the zip file as a modul and replace the menu call in the template (show_menu, page_menu or menu) with show_menu2. Thats all. If there are some arguments in the brackets after the call ( f.e. (0,1,1) you can use this with the replacement function too without any problems. To get the whole functions working it is better to replace this arguments with the new ones. Look at the readme.txt wich comes with the modul.

With these arguments you can change f.e. the default display of the left-hand side menu. So if you can describe what you want i'm pretty shure we can give you some hints. It's really not difficult because very logical structured.

Matthias

[marccouture]

Hi,

Reading through this thread, I haven't come across a non-coders' perspective on using this snippet.  Can someone explain how to integrate this in, say, the Simple template that is included in WB and change the default display of the left-hand side menu?

Thanks!

[brofield]

Added two short snippets so that the root items gets a class of their own.

You don't need this change. You can do this using the original show_menu2. Try supplying the SM2_NUMCLASS flag and then root items will have the menu-0 class. Or without using the SM2_NUMCLASS flag, you add the menu level in the format string manually. For example, something like "<li class='menu-[level] [class]'>". Again root items with have the menu-0 class.

B

[succhi]

You can also add your own 'id' to the first element without having to wrap. e.g. <ul id="topbar">... and another could be <ul id="sidebar">...

Stuart.

[kweitzel]

wrap the menus in different DIVs ... for design check out css.maxdesign.com.au they have listamatic and listamatic2 (1 for simple lists and 2 for nested lists).

cheers

Klaus

[travisfisher]

What is the best approach for a site that has the need for the default menu CSS (menu-top, etc.) for multiple menus (1,2,3)?

[peppelorum]

Added two short snippets so that the root items gets a class of their own.

[gelöscht durch Administrator]

[brofield]

New version available at http://code.jellycan.com/show_menu2/

* Fixes for menu display on special pages (e.g. search results page) as provided by succhi
* New flag SM2_NOCACHE to force a new read from the database

B

[brofield]

@succhi
Thanks for the debugging work. It can be a real a b**** to work on someone else's code. Your solution seems fine to me. It sounds like there are more changes than what you have in this post, did you want to email the changed files to me? I'll roll it up and release it.

B

[succhi]

@brofield

Mate I am trying to work out why the menu doesn't show when I am on a page with a PAGE_ID of 0. The search page is just such a page and the menu goes 'bye-bye'.

Any quick ideas?

Update:
I found part of the problem.
When the page_id = 0 $wb->page['menu'] is empty.

Code Select Expand

// fix up the menu number to default to the menu number
// of the current page if no menu has been supplied
if ($aMenu == 0) {
    $aMenu = $wb->page['menu'] == '' ? 1 : $wb->page['menu'];
}

That fixes part of it. However I now have a menu that is fully expanded. I need to fix this part now.

Update 2:
I have found where it starts to go funny but I am not sure what the best fix would be.

Code Select Expand

sm2_mark_children($rgParent, PAGE_ID, 1);

If PAGE_ID != 0 then it is fine, it marks things correctly however with PAGE_ID == 0 every single item gets marked so the entire menu gets expanded when recursed. What do you think the best fix is Brodie?

Update 3:
OK if I do the following I get the result I am after.

Code Select Expand


// mark all children of the current page
if (PAGE_ID != 0) {
   sm2_mark_children($rgParent, PAGE_ID, 1);
}

I know that search should have no children so lets not even go down the track of marking anything. That's fixed it for me, plus I set all the $wb->page[] settings that might not be set due to PAGE_ID == 0.

@Brofield. Let me know if you can think of a better way to fix these problems. It took me near two hours + to work out what all the different levels of arrays you've got going on were doing. doing print_r($array) stuff everywhere to visualise what was happening.

Stu.

[melissa]

Wow guys. I am so impressed.

This is the first time I've had a chance to come back to show_menu2 to see if I can use it with UDM, and I see you even have a demo of using UDM to make it really easy for me!

succhi and brofield, thanks for your hard work on this code.

Here's one more demo -

Code Select Expand

show_menu2(3, SM2_ROOT, SM2_START, SM2_ALL,
'&nbsp;|&nbsp;<span><a href="[url]">[menu_title]</a></span>',
'',
'',
'',
'<span><a href="[url]">[menu_title]</a></span>',
'');

I'm using it for a menu at the bottom of the page (using multiple menus), and it comes up like this:

Privacy Policy | Terms & Conditions | Contact Us

Melissa.

[brofield]

Re-released the final beta as version 3.0

Question:
Show show_menu2 be calling htmlspecialchars() on the page title, menu title, description, etc. The original show_menu doesn't, but it seems to me that it puts too much responsibility on the user to know that they need to write &amp; instead of a single &. Plus if they put angle brackets in their text it will possible screw up the output.

Does anyone use this "feature"? I think that I should be calling at least htmlspecialchars. See the demo site at http://code.jellycan.com/sm2test/ for an example. The page is called "<b>Bold</b> & <i>Italics</i>".

Brodie