navigation3Add my vote for this tag skin5Add my vote for this tag usability1Add my vote for this tag user_interface1Add my vote for this tag create new tag
, view all tags

Quick Menu Skin

A functional skin that replaces the left bar with a customizable Javascript menu system.

Screen Shot

Click for full screen image


Note: You do not need to install anything on the browser to use this skin. The following instructions are for the administrator who installs the skin on the server where TWiki is running.


The menu can behave in two ways. When CLICKMENU is set to 0 then the menu automatically shows when you hover the mouse over the menu. When it is set to 1 then the menu is activated by clicking on it. By default CLICKMENU is set to 0.

To add different menus to the menubar you can set QUICKMENUBAR to the topic containing the javascript for your own custom menus. By default QUICKMENUBAR is set to %TWIKIWEB%.QuickMenuBar, have a look at QuickMenuBar to see how the menus are created.

To change settings just add them to TWikiPreferences, WebPreferences, or your personal page.

   * Set CLICKMENU = 1

Modifying Menus

The menu bar is built by default from QuickMenuBar, which in turn includes QuickMenuBarLogin (if login is enabled) and QuickMenuBarWebs and QuickMenuBarUtilities. If internationalisation is enabled, then QuickMenuBarLanguage is also included. These files contain javascript commands that are included by the skin's templates. You can edit these files to customize the menu, but be sure to avoid unwanted linking by enclosing your code in <noautolink> ... </noautolink> tags.

QuickMenu Javascript Reference

  • To create a new menu
    mymenu = new QuickMenu.Menu(menuBar, "Menu Text", "", "/icons/icon.gif", "Menu Tip Information");
    or just a link:
    new QuickMenu.Menu(menuBar, "TWiki.org", "http://twiki.org/");
    or a javascript function:
    new QuickMenu.Menu(menuBar, "Say Hello", "js:alert('Hello')");

  • Add items to the menu
    mymenu.Add("Item Text", "%SCRIPTURLPATH{"view"}%/PageToView", "", "Item Tip");
    mymenu.Add("Text Formatting", "%SCRIPTURLPATH{"view"}%/TextFormattingRules", "%ICONURLPATH{"help"}%", "More formatting help");
    mymenu.Add("Disabled item");

  • Add a submenu
    mymenu.Add("Choose Colour", ":Colour");
    submenu = mymenu.Add("Choose Colour", ":");

QuickMenu Examples

  • A cleaner interface NEW
    You don't need to store each menu & submenu in variables.
    with (new QuickMenu.Menu(menuBar, "Menu")) {
        Add("Item1", "url");
        Add(); // Separator
        with (Add("SubMenu", ":")) {
          Add("SubItem1", "url");
          Add("SubItem2", "url");

  • An edit button on the menubar
    new QuickMenu.Menu(menuBar, "%MAKETEXT{"Edit"}%", "%SCRIPTURLPATH{"edit"}%/%BASEWEB%/%BASETOPIC%?t=%GMTIME{"$epoch"}%", "%ICONURLPATH{"edittopic"}%", "%MAKETEXT{"Edit this topic text"}%");

  • A recent changes menu (Thanx to TWiki:Main/PeterHuisken)
    Creates a list of the 10 most recently changed topics.

    with (new QuickMenu.Menu(menuBar,"%MAKETEXT{"Changes"}%","","","%MAKETEXT{"Latest Changes"}%")) {
        %SEARCH{".*" web="%BASEWEB%" regex="on" nosearch="on" nototal="on" order="modified" reverse="on" limit="10" format="  Add(\"$topic\", \"%SCRIPTURLPATH{view}%/$web/$topic\",\"\");"}%

  • A main topics menu
    Lists all the child topics of WebHome.
    with (new QuickMenu.Menu(menuBar,"Web Topics")){
      %SEARCH{"\%META:TOPICPARENT\{name=\"%HOMETOPIC%\"\}\%" type="regex" nonoise="on" format="  Add(\"$topic\", \"%SCRIPTURLPATH{view}%/$web/$topic\");"}%

Extras: Rounded corners

See QuickMenuSkinRounded

Skin Info

Description: Functional skin that replaces the left bar with a customizable Javascript menu system
Screenshot: Click for full screen image
Preview: Preview with this topic
Base Name: quickmenu
Skin Author: TWiki:Main/VernonLyon
Skin Version: 1 Feb 2007 (v1.07)
Change History:  
1 Feb 2007: Added a missing template for TWiki 4.1.0 (v1.07)
21 Nov 2006: Added backlinks template, Fixed IE "select" bug, Menu items are actual links, Cleaner interface (v1.06)
13 Sep 2006: Fixed IE bug (v1.05)
18 Jul 2006: Added language support (v1.04)
13 Jul 2006: Added support for icons in the menubar (v1.03)
4 Jul 2006: Added QUICKMENUBAR setting (v1.02)
21 Jun 2006: Added "Account" menu (v1.01)
13 Jun 2006: Initial version (v1.00)
Skin Home: http://TWiki.org/cgi-bin/view/Plugins/QuickMenuSkin
Feedback: http://TWiki.org/cgi-bin/view/Plugins/QuickMenuSkinDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/QuickMenuSkinAppraisal

-- TWiki:Main/VernonLyon - 13 Jun 2006

Topic attachments
I Attachment History Action Size Date Who Comment
Unknown file formatmd5 QuickMenuSkin.md5 r15 r14 r13 r12 r11 manage 0.2 K 2008-12-10 - 13:16 SopanShewale checksum file , Uploaded as a part of Release Process
Compressed Zip archivetgz QuickMenuSkin.tgz r22 r21 r20 r19 r18 manage 57.9 K 2008-12-10 - 13:16 SopanShewale See QuickMenuSkin for details. Untar and run the installer script, Uploaded as a part of Release Process
Compressed Zip archivezip QuickMenuSkin.zip r26 r25 r24 r23 r22 manage 68.1 K 2008-12-10 - 13:16 SopanShewale See QuickMenuSkin for details. Unzip and run the installer script , Uploaded as a part of Release Process
Unknown file formatEXT QuickMenuSkin_installer r1 manage 4.7 K 2008-12-10 - 13:16 SopanShewale Installer Script, Uploaded as a part of Release Process
Texttxt QuickMenuSkin_installer.pl.txt r1 manage 29.3 K 2006-11-22 - 15:43 VernonLyon Download, change the extension to .pl, and run for automatic install
GIFgif fullscreen.gif r2 r1 manage 24.1 K 2007-02-01 - 18:16 VernonLyon  
GIFgif screenshot.gif r2 r1 manage 8.7 K 2007-02-01 - 18:16 VernonLyon  
Edit | Attach | Watch | Print version | History: r20 < r19 < r18 < r17 < r16 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r20 - 2008-12-10 - SopanShewale
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.