Author Topic: show_menu2: valid XHTML and CSS selectable menus (Read 283519 times)

peppelorum · « **Reply #100 on:** July 03, 2006, 10:17:53 AM »

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

[gelöscht durch Administrator]

travisfisher · « **Reply #101 on:** July 05, 2006, 03:48:26 PM »

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 · « **Reply #102 on:** July 05, 2006, 06:41:39 PM »

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 · « **Reply #103 on:** July 06, 2006, 03:55:18 AM »

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 · « **Reply #104 on:** July 11, 2006, 11:09:48 AM »

Quote from: peppelorum on July 03, 2006, 10:17:53 AM

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 · « **Reply #105 on:** July 28, 2006, 02:54:17 PM »

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 · « **Reply #106 on:** July 28, 2006, 07:44:29 PM »

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 · « **Reply #107 on:** July 31, 2006, 12:40:51 PM »

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 · « **Reply #108 on:** July 31, 2006, 01:13:31 PM »

Hello,

what's your problem with this?

Matthias

berndn · « **Reply #109 on:** July 31, 2006, 01:24:48 PM »

I want to create this kind of list:

Code: [Select]

<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 · « **Reply #110 on:** July 31, 2006, 04:57:21 PM »

Quote from: berndn on July 31, 2006, 01:24:48 PM

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.

Quote from: berndn on July 31, 2006, 01:24:48 PM

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 · « **Reply #111 on:** August 01, 2006, 09:52:42 AM »

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 · « **Reply #112 on:** August 01, 2006, 04:52:18 PM »

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 · « **Reply #113 on:** August 01, 2006, 04:54:59 PM »

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 · « **Reply #114 on:** August 01, 2006, 06:58:36 PM »

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 · « **Reply #115 on:** August 03, 2006, 06:50:46 PM »

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

brofield · « **Reply #116 on:** August 15, 2006, 10:18:15 AM »

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 · « **Reply #117 on:** August 20, 2006, 10:42:39 PM »

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]

<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 · « **Reply #118 on:** August 21, 2006, 12:44:36 AM »

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 · « **Reply #119 on:** August 24, 2006, 07:06:32 AM »

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]

<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, &#39;<ul class="udm" id="udm">&#39;); ?>
<?php } ?></td>

Thanks

brofield · « **Reply #120 on:** August 24, 2006, 07:18:58 AM »

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 · « **Reply #121 on:** August 24, 2006, 08:04:27 AM »

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 · « **Reply #122 on:** August 24, 2006, 08:07:58 AM »

Quote from: brofield on August 24, 2006, 07:18:58 AM

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 · « **Reply #123 on:** August 24, 2006, 08:21:12 AM »

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

ami · « **Reply #124 on:** August 27, 2006, 11:24:07 AM »

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

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

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

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: show_menu2: valid XHTML and CSS selectable menus (Read 283519 times)

peppelorum

travisfisher

succhi

brofield

berndn

berndn

brofield

berndn

brofield

brofield

berndn

brofield

valerie

brofield

Francisco

brofield

brofield

Francisco

brofield

ami