show_menu2: valid XHTML and CSS selectable menus

[virgil]

@brofield

Hi Brodie
I would like to use your show_menu2 snippet to create a Sitemap with
description + keywords like shown in your demo page. 

I guess that -to create a normal menu- you put a regular php-call of show_menu2
in the index(.)php file, which will create the menu call on every page of your site
... but...
I want a sitemap to be shown only on a single page  

- How can I do that?
- Wich release of the snippet do I at least nee?


Thx for answers...
Regards,
Virgil

[brofield]

In my case all I originally wanted to have a different top level icon and color for each top level category

Graphics (paint_brush.gif)
News (newspaper.gif)

If you use the new 3.0 version then you could use the [level] or [page_id] formats set the class or link id. To do class based images though, you should be able to do it with the current version and CSS selectors. See http://css.maxdesign.com.au/listutorial/master.htm

Cheers,
Brodie

[brofield]

Release of show_menu2, version 3.0 beta 2.

Changes in this version are:

• added [description], [keywords], [page_id], [parent] (parent page id), [level] (page level) formatting options
• all flag like options combined into a flags parameter (affects only people using numbered classes and descriptions or keywords
• all formatting of the menu has been abstracted out into a formatting class which may be replaced by a caller with their own custom formatting class.

Details, demo and downloads at http://code.jellycan.com/show_menu2/

Regards,
Brodie

[brofield]

@kickarse
You can already do something like this by using the [menu_title] as the class in the item format. You would want to keep all of your menu titles as single words I guess. In the next beta I will include a few extra items like page_id, parent_page_id, description, keywords. e.g.

Code Select Expand


"<a href='[url]' target='[target]' class='[menu_title]'>[menu_title]</a>"


@bupaje
I have no idea what you are wanting.

Regards,
B

[bupaje]

@brofield - no feedback on the beta until this weekend but I wanted to say the sitemap feature with the added description field is cool -just what I wanted. Also thanks for picking up that arraykeys bug and for all your other work. 

If you're still taking requests for future updates here's one I had a while back on my previous layout, but others have requested it. How about the ability to assign small 16x16 icons to the menu items. I did a messy hack on my old one where I simply did something like [page_name].jpg and save images named after each page but made for many duplicated images. I also did similar with page level ie [level].jpg (forget what the actually variables were called).

In my case all I originally wanted to have a different top level icon and color for each top level category

Graphics (paint_brush.gif)
News (newspaper.gif)

Then you could use a similar logo/color scheme on the page; this helps on a site with many types of content for the visitor to readily know what section they are in. In other words all art related pages are blue scheme, with paint brush logo (matching the menu icon) etc.

Anyway sorry for inflicting you with my rambling thought process. This should be part of the WB core as it is absolutely excellent.

[kickarse]

Just curious if you thought about adding functionality such as this
(from your site )

Code Select Expand

<div class="menu">

<ul class='menu-top'>
<li class='menu-sibling'><a href='http://code.jellycan.com' target='_top'>Home</a></li>
<li class='menu-sibling'><a href='http://code.jellycan.com/simpleopt/' target='_top'>SimpleOpt</a></li>
<li class='menu-sibling'><a href='http://code.jellycan.com/simpleini/' target='_top'>SimpleIni</a></li>
<li class='menu-sibling'><a href='http://code.jellycan.com/moji/' target='_top'>Moji</a></li>
<li class='menu-sibling'><a href='http://code.jellycan.com/langselect/' target='_top'>LangSelect</a></li>
<li class='menu-expand menu-current'><a href='http://code.jellycan.com/show_menu2/' target='_top'>show_menu2</a>
        <ul><li class='menu-child'><a href='http://code.jellycan.com/sm2test/' target='_top'>Test</a></li></ul>
</li>
<li class='menu-sibling'><a href='http://code.jellycan.com/macros/' target='_top'>Macros</a></li>
<li class='menu-sibling'><a href='http://code.jellycan.com/comments/' target='_top'>Comments</a></li>
</ul>
</div>

Thought about giving the a href a class of what the name of the link is like so

Code Select Expand

<li class='menu-sibling'><a href='http://code.jellycan.com/comments/' class='comments'>Comments</a></li>

Something that would be populated by $page_id or $title ?

This would help if you wanted to style the link with pictures as navigation instead of text. Giving complete control over the menu look.

[brofield]

your menu function looks quite impressive: I'm trying to have a menu like this, where all the

home | study | about
is there a way to get this?
I only get it to look like home | study | about |

obviously, the red vertical bar at the end is ugly. Does anybody have a solution for this?

I take it back. Of course there is a way to do this. See the demo site at http://code.jellycan.com/sm2test/ and have a look at the "Root Only (TEXT)" sample. Essentially you set the normal item to " | link" and set the first item to "link".

Cheers,
Brodie

[brofield]

I've released version 2.6.1 which should clear this problem up. See http://code.jellycan.com/show_menu2/

B

@brofield

I spotted this error in my scripts.log file. Not sure if it is important.

PHP Warning:  array_keys(): The first argument should be an array in /modules/show_menu2/include.php on line 124

[brofield]

You are probably better to do this with the sitemap module. I will look to see what might be involved.

B

Thanks. Looks like I was looking at an older doc. I did change it to [page] but it still shows the menu title. 

I did have a suggestion for the future as well. Maybe you can add a feature to optional show the meta description/keywords as well. This can be useful in the sitemap for example where I can show the title and short description of each page. For example


Sitemap

Graphics
- Photoshop
  - Plugins - Add features to your program with these free plugins. [keywords: art, design]

[brofield]

Sorry, no easy solution that I can think of.

B

your menu function looks quite impressive: I'm trying to have a menu like this, where all the

home | study | about
is there a way to get this?
I only get it to look like home | study | about |

obviously, the red vertical bar at the end is ugly. Does anybody have a solution for this?

Thanks a lot

[brofield]

I have released a beta of v3.0 at http://code.jellycan.com/show_menu2/

This version has a call signature similar to the existing show_menu, however it is not a fully drop in replacement for it due to the problems I mentioned in my previous email. Let me know what problems you have with it.

[bupaje]

@brofield

I spotted this error in my scripts.log file. Not sure if it is important.

PHP Warning:  array_keys(): The first argument should be an array in /modules/show_menu2/include.php on line 124

[bupaje]

Thanks. Looks like I was looking at an older doc. I did change it to [page] but it still shows the menu title. 

I did have a suggestion for the future as well. Maybe you can add a feature to optional show the meta description/keywords as well. This can be useful in the sitemap for example where I can show the title and short description of each page. For example


Sitemap

Graphics
- Photoshop
  - Plugins - Add features to your program with these free plugins. [keywords: art, design]

[brofield]

Documentation is at:
http://forum.websitebaker.org/index.php/topic,2584.0.html

Use [page] instead.

Cheers,
Brodie

[bupaje]

Want to use this for a sitemap and having a little problem getting it to show [page_title] instead of [menu_title]

Here is what I tried

show_menu2(0, SM2_CURR+1, SM2_CURR+1,'[a][page_title][/a]');

but it shows the [menu_title]

http://stormvisions.com/pages/art-design.php

[ruebenwurzel]

Hello,

how a menu is shown (horizontal, vertical) is css based. Look here.

http://css.maxdesign.com.au/listamatic/

Matthias

[baelinc]

I am using this menu function, and i really like it. The only problem that i am having, is how to tell this code to be a horizontal menu instead of a vertical one. Here is the code that i am using, please edit it so that it shows as a horizontal menu....

Code Select Expand

<?php show_menu2(0, SM2_ROOT+1, SM2_START) ?>

Thanks,
Johnathan

[phil]

your menu function looks quite impressive: I'm trying to have a menu like this, where all the

home | study | about
is there a way to get this?
I only get it to look like home | study | about |

obviously, the red vertical bar at the end is ugly. Does anybody have a solution for this?

Thanks a lot

[Tim]

I managed to get it working Brofield, thanks again.

[bupaje]

font-weight is inherited by the child menus. Try
.menu-expand > a { font-weight: bold; }
This will only modify the <a> links directly underneath a .menu-expand classed tag and no children.

For some reason I couldn't get that to work -not sure if there was a typo? Don't know enough about css but I did get this to sort of work like this though when I get down 3 levels deep I note that bold is back ...

Code Select Expand


.menu-child{
background-color: #F3F3F3;
border : 1px solid #EEEEEE;
                font-weight: normal;
}

.menu-current{
background-color: #DDDDDD;
border : 1px solid #16B144;
}


.menu-expand {
               font-weight: bold;
}



Thanks again for this excellent mod.

[brofield]

@brofield
Can you modify the wrapper functions page_menu() and
show_menu() to utilize your script but keep the current order
of parameters (for backwards compatibility) ?

It is actually quite difficult due to the item formatting that show_menu uses. There are a few problems:

• the default item class. There is no such thing as a default item class that is used for every item EXCEPT FOR THE CURRENT ONE in show_menu2. This means that I can't generate exactly the same menus that show_menu currently is.
• the [class] replacement string. The class is automatically added to the last tag in the item open tag. This is different to the item format string.
• the item format string is combined with the open tag. In show_menu2 these are separated. I can probably rewrite it to be combined, but then it may not be possible to put the classes exactly where you want to.

Have done a first kick at changing sm2 such that a merge of show_menu and show_menu2 will be possible. It is running at the demo site now (see the README file there). Will continue to play a little to see what I can do.

B

[brofield]

font-weight is inherited by the child menus. Try
.menu-expand > a { font-weight: bold; }

This will only modify the <a> links directly underneath a .menu-expand classed tag and no children.

B

[bupaje]

Thanks! Decided to try this on my site and it works fantastic!

A minor CSS question ... I used this

.menu-child{
   background-color: #F3F3F3;
   border : 1px solid #EEEEEE;
}

.menu-current{
   background-color: #DDDDDD;
   border : 1px solid #16B144;
}
 

.menu-expand{
                font-weight: bold;
}


and you can see if you go here http://stormvisions.com/pages/art-design/3dgamestudio.php that the second level pages with no subpages are bold instead of only the pages with subs. Any hints?

Three thumbs up!

[Stefan]

@PeterM
Definitely. I guess it could be a drop-in replacement for the current core menu (frontend::menu())

@brofield
Can you modify the wrapper functions page_menu() and show_menu() to utilize your script but keep the current order of parameters (for backwards compatibility) ?

[PeterM]

Would it be possible to incorporate this script into the standard WB zip-file. I didn't use this snippet to make the menus of my templates, because of the fact that it's not standard WB yet.

Some of my templates, for instance, K2 would have looked better with this template.