Difference: TopMenuSkin (r7 vs. r6)

TopMenuSkin

The TopMenuSkin adds pulldown menus to the PatternSkin.

Screenshot

Screenshot

Tob Bar and Menu Structure

NOTE: The skin is designed to incorporate the "you are here" breadcrumb into the pulldown menus:
"Home" menu => "Web" menu => List of parent topics, if any (shown as "P"s) => Current topic ("View" menu).

Web-specific Menu-Bars

The TopMenuSkinDefaultWebTopMenu defines the default menu structure used in any web. A WebTopMenu topic in a web can redefine the default menu structure. If the WebTopMenu topic is missing in a web, create one with content of _default.WebTopMenu and customize it. Bullets must be of format [[...][...]] or <a href="...">...</a>, and may not contain any text next to the link.

To preserve the "you are here" breadcrumb, it is important to add additional pulldown menus after the INCLUDE of %SYSTEMWEB%.TopMenuSkinTopicMenu. The top level menu-bar should have this structure:

  • INCLUDE of %SYSTEMWEB%.TopMenuSkinHomeMenu
  • Current Web menu
  • INCLUDE of %SYSTEMWEB%.TopMenuSkinTopicMenu
  • Additional pulldown menu(s) as needed (optional)

Example WebTopBar menu structure with additional "Bugs" pulldown menu:

%INCLUDE{%SYSTEMWEB%.TopMenuSkinHomeMenu}%
   * [[%BASEWEB%.%HOMETOPIC%][<img src="%ICONURL{web-bg}%" border="0" alt="" width="16" height="16" style="background-color:%WEBBGCOLOR%" /> <nop>%MAKETEXT{"[_1] Web" args="%BASEWEB{format="$current"}%"}% %ICON{menu-down}%]]
      * [[%SCRIPTURLPATH{"view"}%/%BASEWEB%/WebCreateNewTopic?topicparent=%BASETOPIC%][ %ICON{"newtopic"}% %MAKETEXT{"Create New Topic"}%]]
      * [[%BASEWEB%.WebTopicList][ %ICON{"index"}% %MAKETEXT{"Index"}%]]
      * [[%BASEWEB%.WebSearch][ %ICON{"searchtopic"}% %MAKETEXT{"Search"}%]]
      * [[%BASEWEB%.WebChanges][ %ICON{"changes"}% %MAKETEXT{"Changes"}%]]
      * [[%BASEWEB%.WebNotify][ %ICON{"notify"}% %MAKETEXT{"Notifications"}%]]
      * [[%BASEWEB%.WebRss][ %ICON{"feed"}% %MAKETEXT{"RSS Feed"}%]]
      * [[%BASEWEB%.WebStatistics][ %ICON{"statistics"}% %MAKETEXT{"Statistics"}%]]
      * [[%BASEWEB%.WebPreferences][ %ICON{"wrench"}% %MAKETEXT{"Preferences"}%]]
%INCLUDE{%SYSTEMWEB%.TopMenuSkinTopicMenu}%
   * [[BugTracker][%ICON{bug}% Bugs %ICON{menu-down}%]]
      * [[NewReport][Create bug report]]
      * [[OpenBugs][Open bugs]]
      * [[ConfirmedBugs][Confirmed bugs]]
      * [[FixedBugs][Fixed bugs]]

Use Menu-Bars in Topics

A menu-bar can be added anywhere in a topic:

  • Include the "TWiki.TopMenuSkin" topic - this pulls in the CSS and JavaScript needed for the menu-bar.
  • Create a nested bullet list with links:
    • The top level bullets define the menu-bar items. Bullets with/without links are supported.
    • Second level bullets define the pulldown options within a menu-bar item.
      • A second level bullet must contain exactly one link (format [[...][...]] or <a href="...">...</a>) without any text next to the link.
    • Third level bullets are not supported.
  • Enclose the bullet list with a <div class="twTopMenuTab"> tag.

Example:

%INCLUDE{"%SYSTEMWEB%.TopMenuSkin"}%
<div class="twTopMenuTab">
   * [[WebHome][%ICON{home}% Home %ICON{menu-down}%]]
      * [[WebNotify][Subscribe]]
      * [[WebStatistics][Statistics]]
   * [[WebSearch][%ICON{searchtopic}% Search %ICON{menu-down}%]]
      * [[WebSearchAdvanced][Advanced search]]
      * [[SearchHelp][Search help]]
</div>

Renders as:

NOTE: The pulldown menus only work if the TWiki:Plugins/JQueryPlugin is installed and enabled.

Read-Only Skin Mode

This skin and the PatternSkin support a read-only mode. This is mainly useful if you have TWiki application pages or dashboards where you do not want regular users to change content. The read-only mode is enabled with a READONLYSKINMODE preferences setting set to 1. Details in PatternSkinCustomization#ReadOnlySkinMode.

CSS and JavaScript

This section defines the CSS and JavaScript used by the TopMenuSkin; View Raw to see the source. Some additional CSS is defined in templates/vewi.topmenu.tmpl

Create Your Own Look

This skin is based on PatternSkin, and the same rules for customization apply.

The TopMenuSkin disables the sidebar and activates a different top bar in twiki/templates/view.topmenu.tmpl. Details in PatternSkinCustomization and PatternSkinCssCookbook.

The top bar TopMenuSkinTopBar (with menu bar, logo and search boxes) can be cloned using same topic name and customized per web.

Add a Sidebar

If you want a sidebar in addition to the top bar, define a WEBLEFTBAR setting with the name of the topic to include as the sidebar. This can be done in a WebPreferences for the whole web or in a topic. Example:

Add Breadcrumbs

The TopMenuSkin incorporates "you are here" breadcrumbs in the pulldown menu, such as "Home > Main web > P > P > View. The P's indicate the parent topic(s). If you prefer the old verbose breadcrumbs you can enable it with the following preferences setting:

  • Set BREADCRUMBS = 1

Fixed Menu-Bar

The FIXEDTOPMENU preferences setting determines if the menu-bar is fixed or auto-hidden. If set to on, the menu-bar is always visible at the top, regardless of the window scroll position. If off, the menu-bar hides when scrolled, and can be shown by hovering over menu-start.png - the gray TWiki icon.

  • Set FIXEDTOPMENU = off

Installation

This skin is pre-installed. TWiki administrators can upgrade the skin as needed on the TWiki server.

  • Download the ZIP file from the Skin homepage (see below)
  • Unzip TopMenuSkin.zip in your twiki installation directory
  • Install TWiki:Plugins/JQueryPlugin and enable it using configure (if not done already)
  • To turn on the skin, write in Main.TWikiPreferences:
    * Set SKIN = topmenu, pattern
  • Test if installed
  • Note on upgrading existing TWiki:
  • Note on using this skin on TWiki-5.1.1 and older:
  • Note on using this skin on TWiki-4.2 and 4.3:
    • This skin depends on TWiki 5.0 specific feature %WEB{format="$current"}% to show the current web in the Web menu. To use this skin on TWiki 4.2 or 4.3, remove the parameter from the WEB variable (to show only %WEB%), or apply patch TWikibug:Item6424 (to add the format parameter feature).
    • This skin depends on TWiki 5.0 specific feature %ADDTOHEAD{}% to add style sheets to the HTML head section. Apply patch TWiki:Support.SID-01117 to inline style sheets.
    • Apply patch TWikibug:Item6430 so that Edit and Attach buttons point to the current topic instead of TopMenuSkinTopBar.
    • Apply patch TWikibug:Item6438 so that breadcrumb links point to the current web instead of the TWiki web.
    • Attach menu-down.gif to TWikiDocGraphics.
    • Attach twiki-gray.gif to TWikiDocGraphics.
    • If you have more than 30 webs, apply TWikibug:Item6429 to limit the number of webs shown in the "Home" menu.

Skin Info

  • Set SHORTDESCRIPTION = Skin with pulldown menus in top bar
  • Sponsor: Twiki, Inc.
Skin Author: TWiki:Main.PeterThoeny
Copyright: 2010-2013, TWiki:Main.PeterThoeny , Twiki.org TWiki.org
2010-2013 TWiki:TWiki.TWikiContributor
License: GPL (GNU General Public License)
Description: Top-menu skin
Screenshot: Screenshot
Preview: Preview with this topic
Base Name: topmenu,pattern
Skin Version: 2013-02-16 2013-09-28
2013-02-16: 2013-09-28: TWikibug:Item7123 TWikibug:Item7160 : Use TWISTY in installation instructions and change history Support verbose breadcrumbs at the top of the page
2012-09-18: 2013-04-22: TWikibug:Item6936 TWikibug:Item7151 : Pulldown menu closes too early on hover if Change CALC to CALCULATE in bookmark word spacing more than one menu on page
2012-09-18: 2013-03-03: TWikibug:Item6934 TWikibug:Item7143 : Option for auto-hidden or fixed top Show "Watch" pulldown menu in case menu-bar with FIXEDTOPMENU preferences setting TWiki:Plugins.WatchlistPlugin is installed and enabled
2012-09-06: 2013-02-16: TWikibug:Item6925 TWikibug:Item7123 : Show TWiki help link Use TWISTY in installation instructions and change history twiki-help.gif in top-menu bar
2012-09-04: 2012-09-18: TWikibug:Item6918 TWikibug:Item6936 : New WEBLEFTBAR setting to show a sidebar Pulldown menu closes too early on hover if more than one menu on page
2011-07-28: 2012-09-18: TWikibug:Item6780 TWikibug:Item6934 : Usability: Link to UserList topic instead of TWikiUsers Option for auto-hidden or fixed top menu-bar with FIXEDTOPMENU preferences setting
2011-07-10: 2012-09-06: TWikibug:Item6725 TWikibug:Item6925 : Change global package variables Show TWiki help link from "use vars" to "our" twiki-help.gif in top-menu bar
2011-07-01: 2012-09-04: TWikibug:Item6763 TWikibug:Item6918 : Fix for WYSIWYG editor corrupting system pages New WEBLEFTBAR setting to show a sidebar
2011-06-14: 2011-07-28: TWikibug:Item6751 TWikibug:Item6780 : Fix for cutoff buttons in header when using Usability: Link to UserList topic instead of TWikiUsers IE7 -- TWiki:Main.BradleyMellen
2011-05-18: 2011-07-10: TWikibug:Item6682 TWikibug:Item6725 : Read-only skin mode with READONLYSKINMODE preferences setting Change global package variables from "use vars" to "our"
2011-03-09: 2011-07-01: TWikibug:Item6659 TWikibug:Item6763 : Customizable web-specific Fix for WYSIWYG editor corrupting system pages TopMenuSkinTopBar
2011-01-03: 2011-06-14: TWikibug:Item6628 TWikibug:Item6751 : Minor gradient fix Fix for cutoff - change action buttons area from plain white to pale in header when using IE7 -- gray to align with PatternSkin TWiki:Main.BradleyMellen ; adding pale shadow
2010-12-02: 2011-05-18: TWikibug:Item6614 TWikibug:Item6682 : Always show Register User link in Account Read-only skin mode with READONLYSKINMODE preferences setting menu, regardless of login status
2010-10-03: 2011-03-09: TWikibug:Item6588 TWikibug:Item6659 : Use gray Customizable web-specific TWiki icon in top menu bar instead of orange icon TopMenuSkinTopBar
2010-09-23: 2011-01-03: TWikibug:Item6530 TWikibug:Item6628 : Add ManagingUsers Minor gradient fix - change action buttons area from plain white to top menu of TWiki web pale gray to align with PatternSkin ; adding pale shadow
2010-08-21: 2010-12-02: TWikibug:Item6524 TWikibug:Item6614 : Fix for no Always show Register User link in Account pulldown menu on IE7 Opera menu, regardless of login status browser -- TWiki:Main.MalcolmNeumeyer
2010-06-09: 2010-10-03: TWikibug:Item6485 TWikibug:Item6588 : Fix banner background image position issue on Safari Use gray TWiki icon in top menu bar instead of orange icon
2010-06-06: 2010-09-23: TWikibug:Item6482 TWikibug:Item6530 : XHTML validation Add ManagingUsers fixes; moving CSS to HTML head using ADDTOHEAD variable top menu of TWiki web
2010-06-05: 2010-08-21: TWikibug:Item6475 TWikibug:Item6524 : Better indication of breadcrumb in Fix for no Account pulldown top menu using large arrows on IE7 Opera browser -- TWiki:Main.MalcolmNeumeyer
2010-05-26: 2010-06-09: TWikibug:Item6471 TWikibug:Item6485 : Show topic info in tooltip of View menu; Fix banner background image position issue on Safari show tooltip help in View and Edit menu items; point raw view and print version to actual topic revision
2010-05-20: 2010-06-06: TWikibug:Item6455 TWikibug:Item6482 : Use %ICON{menu-down}% instead of long img tag in menu-bars XHTML validation fixes; moving CSS to HTML head using ADDTOHEAD variable
2010-05-01: 2010-06-05: TWikibug:Item6437 TWikibug:Item6475 : Removed loading Better indication of jQuery Javascript library to avoid double load breadcrumb in top menu using large arrows issue; require JQueryPlugin installed and enabled
2010-04-26: 2010-05-26: TWikibug:Item6435 TWikibug:Item6471 : Doc improvements Show topic info in tooltip of View menu; show tooltip help in View and Edit menu items; point raw view and print version to actual topic revision
2010-04-21: 2010-05-20: TWikibug:Item6431 TWikibug:Item6455 : Fix hardcoded reference to JQueryPlugin CSS and JS; doc Use %ICON{menu-down}% instead of long img tag in menu-bars improvements
2010-04-19: 2010-05-01: TWikibug:Item6413 TWikibug:Item6437 : Initial release (v1.0) Removed loading of jQuery Javascript library to avoid double load issue; require JQueryPlugin installed and enabled
2010-04-26: TWikibug:Item6435: Doc improvements
2010-04-21: TWikibug:Item6431: Fix hardcoded reference to JQueryPlugin CSS and JS; doc improvements
2010-04-19: TWikibug:Item6413: Initial release (v1.0)
Dependencies: TWiki 4.2 or later; TWiki:Plugins/PatternSkin; TWiki:Plugins/JQueryPlugin
Skin Home: http://TWiki.org/cgi-bin/view/Plugins/TopMenuSkin
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TopMenuSkinDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TopMenuSkinAppraisal

Related topics: TopMenuSkinDefaultWebTopMenu, TopMenuSkinHomeMenu, TopMenuSkinTopBar, TopMenuSkinTopicMenu, WebTopMenu, _default.WebTopMenu, Main.WebTopMenu, Sandbox.WebTopMenu, Trash.WebTopMenu, TWikiSkins, TWikiSkinBrowser, UserDocumentationCategory, AdminDocumentationCategory

View topic | View difference side by side | History: r8 < r7 < r6 < r5 | More topic actions
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 1999-2020 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.TopMenuSkin.