show_menu2: valid XHTML and CSS selectable menus

[peppelorum]

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

[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)?

[kweitzel]

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

cheers

Klaus

[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.

[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

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

[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

[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,

what's your problem with this?

Matthias

[berndn]

I want to create this kind of list:

Code:

<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

[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]

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]

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

[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

[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 

[marccouture]

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

[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

[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:

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

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

[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:

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

See the UDM website linked from that demo for details of how to set it up. My demo page is just showing that it can be used with sm2. http://www.udm4.com/

B

[brofield]

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

• Call htmlspecialchars on all strings to ensure that the output menu items are valid HTML.
• Added new flag SM2_NOESCAPE to turn off this escaping if it isn't desired.

B

[Francisco]

See the UDM website linked from that demo for details of how to set it up. My demo page is just showing that it can be used with sm2. http://www.udm4.com/

B

 Sorry for being a pain.

 http://www.udm4.com/licensing/download/ - I get the .zip from there.

 Now what do I need to upload/modify in the Template? If you can tell me the basic things that have to be done to get a standard UDM menu it will help me get an idea of what I need to do.

 I just need the basic steps after downloading the .zip ... if you could, please tell me.

Thanks

[brofield]

Do your own work. See the UDM site. Read the manual.
http://www.udm4.com/manual/quickstart/

[ami]

Hi Brodie, hi all

really a great snippet. I got it to work as I want:
One vertical menu for the root, a second menu for the root+1. I took the code from your demopage:

Code:

<div class="root">
<?php show_menu2(0, SM2_ROOT, SM2_START); ?>
</div>
<div class="second-menu">
<?php show_menu2(0, SM2_ROOT+1, SM2_START); ?>
</div>

To get it correct for xhtml strict (without target=...) I changed $aItemOpen like this:

Code:

<?php show_menu2(0, SM2_ROOT, SM2_START, SM2_PRETTY, '[li]<a href="[url]">[menu_title]</a>'); ?>

Then there is a mistake I do not understand - what I am coding wrong?
-> On every page I see the children of all root-entries in the second menu, for every entry of root a complete UL.

The same, if I just use the flag SM_PRETTY (no other $aItemOpen). Is there something I don't see?

Only your demo like above shows the correct children of root depending to the actual page.

Thank you for this modul - may be you can identify my mistake.
Axel