DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:menu

menu Plugin

Compatible with DokuWiki

2017-02-19 Rincewind, Angua, Weatherwax, Frusterick Manners

plugin This plugins displays links as nice looking menu cards. Any DokuWiki link is supported.

Last updated on
2018-11-27
Provides
Syntax
Repository
Source

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to dwmenu

Tagged with boxes, icons, images, menu, navigation

Screenshot

To give you a little impression how it look likes, see this screen shot:

Syntax

<menu col=1,align=left,caption="headline",[type=menubar]>
  <item>title|description|link|image</item>
</menu>
  • The title is the text displayed in bold next to the icon. Beside the icon the title is the link to click on. The length of the longest title defines eventually the width of the menu.
  • The description is the small black text below the title. It is for information only. The length is not limited and will be wrapped if necessary.
  • The link is the link address in wiki syntax. Any syntax dokuwiki supports for links could be used here.
  • The image is a medialink to the icon. The icon must have been uploaded before it can be used in the menu. Links to external images are not foreseen.

Configuration

The plugin accepts these optional parameters in the <menu> tag:

  • col = <number>
    The menu card may be organized in one to four columns. Default is one column.
  • width = <css width unit>
    The width of the menu, in css units. Examples: 200px, 40em, 90%. The default is 100%.
  • align = <left|center|right>
    This option decides where the menu will be placed. Allowed options are “left”, “center” and “right”. Default is “left”. These only matter of “width” is specified.
  • valign = <top|center|bottom>
    Vertically align text and images. The default is “top.”
  • caption = <“any text”>
    The headline of the menu. By default, there is none.
  • type = <menubar>
    Activates menubar mode, 1 row with small captions.
  • wrap = true
    Allow other page content to wrap around the menu, if align=right or align=left, and width is specified.

A menu item must be embraced by <item></item>. Each item has four parameters which must be separated by |:

  1. The Name of the menu item. This name will be shown as link text and also used as “title” for the item image.
  2. The link description. This text will be places with smaller font size below the link text. It may contain several words and is not limited to one row. The text will automatically wrapped around if it doesn't fit into the menu item's width.
  3. The link itself. It follows DokuWiki's syntax rules and therefore must be embraced by [[ ]] or {{ }}. Any DokuWiki link may be used but given titles will be ignored and replaced by the menu item name. Links embraced with curly brackets {{ }} are links to media files. Even images will be shown as link here.
  4. The image to illustrate the link. Because this is a DokuWiki media link, it must be embraced by curly brackets {{ }}. Internal or external links could be used. The image should be 48×48 in size for best effect, but any other size could be used.

Changelog

2018-11-27 0.0.5

  • Added width, valign and wrap options.
  • Fixed many layout bugs.
  • Fixed issue with plugin manager.

2017-03-12 0.0.4

  • Fixes for PHP7 compatibility
  • Added option for horizontal menu

2009-08-06 0.0.3

  • fix problem while creating wiki links. Due to this, moving relatively in namespaces wouldn't work - fixed

2009-08-02 0.0.2

  • some css fixes
  • add “png” class to png images to support DD_belatedPNG (transparent png immages for IE6

2009-08-01 0.0.1 public release

  • first release

Discussion

This is my first public DokuWiki plugin, so improvements are welcome and there is always room for improvement :-)

8/7/2009 - If you have multiple menu's on a single page, how do you keep them from wrapping around each other? I put two back-to-back and the second one wraps behind the first one. Is there a way, besides centering it, to make anything after the menu come under it?

Menues are always floating. To prevent the menues from wrapping around each other you have to switch floating off. You can do this with the clearfloat plugin or you may add the line below to your entities.conf file and put a “{clear}” between the menues.
{clear}   <p style="clear:both" />

Matthias Grimm 2009/08/08 18:08

Thank you so much for the prompt response. This menu system is great and works like a charm having multiple menus below each other and have them not wrap around each other. :)


How do you create such menus as you have in your screenshots? I cannot have anything in Bold as you have. Could you provide some code samples?

Michael 2009/10/14


Yo,

I tried your plugin but it don't work on my Doku (2009-02-14b). I follow your example, but Doku don't parse menu code as I want. I was agree with Michael. You must give us one real exemple of syntax as your screenshot. It's not very clear. Thank

Nico 2009/11/23

Do you think the example above will be sufficient? Please tell me your experiences. — Matthias Grimm 2009/12/11 22:39
Matthias, now your topic is OK, just add one require section on this page before install section. People must enable mbstring module (mbstring.so) in php.ini file. Now, your plugin work fine on my Dokuwiki. Thank you for your feedback :-) — nico 2009/12/18

Lexa 2010/04/07

A friend custom for me the php code that allow to fix de width of items.

The code changed only by 4 lines:

syntax.php.diff
--- syntax.old.php      2009-08-08 16:46:28.000000000 +0200
+++ syntax.php  2010-07-07 15:02:39.000000000 +0200
@@ -172,6 +172,10 @@
                 if ($opts['align'] == "right")  $this->rcmd['float'] = "right";
                 if (!empty($opts['caption']))
                     $this->rcmd['caption'] = hsc($opts['caption']);
+               if (!empty($opts['itemwidth']))
+               {
+                   $this->rcmd['width'] = intval($opts['itemwidth']);
+               }
             break;
           case DOKU_LEXER_MATCHED:
                 $menuitem = split('\|', trim(substr($match,6,-7)));

Here the wiki code for menu with this tweak :

<menu col=2,itemwidth=20,align=center,caption="Menu">
  <item>Item name1|Item descr1|[[Wiki link1]]| {{image1}}</item>
  <item>Item name2|Item descr2|[[Wiki link2]]| {{image2}}</item>
  <item>Item name3|Item descr3|[[Wiki link3]]| {{image3}}</item>
</menu>

24/9/2010

Hey,

I really like your plugin but I have a problem with the colums.
I've got 5 sections to be shown in the menu and I want to have 2 colums. Up to this point it works fine. the prolem is, that in the left column, I have only 2 sections, but in the right column I have 3. That doesn't look very nice. And I can't find the mistake.
Do you know what I've done wrong?
Many regards,
Melanie
Her is what I've written:

 
<menu col=2,align=left>
  <item>Aktuelles|Aktuellsten Themen aus dem Forum|[[aktuelles_intern]]|{{:news.jpg|}}</item>
  <item>Forum|Austausch aktueller Themen|[[forum]]|{{:forum.jpg|}}</item>
  <item>Infosammlung|Sammlung von Informtionen|[[infosammlung]]|{{:info.jpg|}}</item>
  <item>Protokolle|Protokolle aus dem Arbeitskreis|[[protokolle]]|{{:protokoll.jpg|}}</item>
  <item>Themen|Themen|[[themen_intern]]|{{:themen.jpg|}}</item>
  </menu>
  
Could it be that your icons in Front of the Text are pretty small?

The point here is that each menu item is placed in a separate <div></div> and float to its final position. For some reason your menu is very small and dense so the subtext uses several lines. It seems now that your fifth menu item can't float pass item three. Each <div> has a different size due to it's contents. Unfortunately I compensate this only in width but not in height.

a quick solution might be to choose bigger Icons so they define the height of the menu items. — Matthias Grimm 2011/02/01 21:29

Is this still maintained?? Just wandering cause berlios announced some weeks ago that they will soon shutdown their service - and so all links will soon be non-usable. 2011/11/11

Please rename your plugin

A plugin named “menu” still exist still 2006. See: http://wiki.gammaproduction.de/dokuwiki/plugins/menu
Conflict?! gr.Siggi

That URL is no longer valid, and that menu plugin wasn't on dokuwiki.org. – zioth 2018-11-27


2013/01/03

I would like to force col=1 on small screen like mobile phone. Does somebody knows a hack for this ? Great plugin by the way.

–Alexandre Bastien

It's a great plugin. Now I want to use it with weatherwax but the backlinks don't function any more. Juergen 30.07.2013

Needs to update

Dosent work anymore on Hrun mnok 11.03.2014

It does now – zioth 2018-11-27

2021-02-12

Media Query

Hey, thank you for the nice plugin! As the mobile version doesn't yet produce the result that I wanted with three columns, I tried tweaking it via @media so that only one column is displayed (feedback is very welcome as I'm a beginner and sorry, if this is not the right place to post): in the conf>userall.css I included the following:

@media all and (max-width: 600px) {
  div.menuitem {
	  width:100% !important;
	  padding:3px; 
  }

To hide the images, I tried:

div.menu img {
	  display:none !important;
  }

Is there a different way to achieve this? I couldn't get this to work in the style.css of the menu-Plugin and I'm worried that this will have an effect on other items in the Wiki, not just the menu-plugin. Thank you very much! — Arkul 2021-02-12 12:16

plugin/menu.txt · Last modified: 2021-02-12 12:16 by suse_sunshine@gmx.de

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki