The Caboteria / TWiki Web / TopMenuSkin (18 Sep 2012, TWikiContributor)

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:

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:

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:

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.

Installation

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.

Skin Info

Skin Author: TWiki:Main.PeterThoeny
Copyright: © 2010-2012, TWiki:Main.PeterThoeny, Twiki.org
© 2010-2012 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: 2012-09-18
Change History:  
2012-09-18: TWikibug:Item6936: Pulldown menu closes too early on hover if more than one menu on page
2012-09-18: TWikibug:Item6934: Option for auto-hidden or fixed top menu-bar with FIXEDTOPMENU preferences setting
2012-09-06: TWikibug:Item6925: Show TWiki help link twiki-help.gif in top-menu bar
2012-09-04: TWikibug:Item6918: New WEBLEFTBAR setting to show a sidebar
2011-07-28: TWikibug:Item6780: Usability: Link to UserList topic instead of TWikiUsers
2011-07-10: TWikibug:Item6725: Change global package variables from "use vars" to "our"
2011-07-01: TWikibug:Item6763: Fix for WYSIWYG editor corrupting system pages
2011-06-14: TWikibug:Item6751: Fix for cutoff buttons in header when using IE7 -- TWiki:Main.BradleyMellen
2011-05-18: TWikibug:Item6682: Read-only skin mode with READONLYSKINMODE preferences setting
2011-03-09: TWikibug:Item6659: Customizable web-specific TopMenuSkinTopBar
2011-01-03: TWikibug:Item6628: Minor gradient fix - change action buttons area from plain white to pale gray to align with PatternSkin; adding pale shadow
2010-12-02: TWikibug:Item6614: Always show Register User link in Account menu, regardless of login status
2010-10-03: TWikibug:Item6588: Use gray TWiki icon in top menu bar instead of orange icon
2010-09-23: TWikibug:Item6530: Add ManagingUsers to top menu of TWiki web
2010-08-21: TWikibug:Item6524: Fix for no Account pulldown menu on IE7 Opera browser -- TWiki:Main.MalcolmNeumeyer
2010-06-09: TWikibug:Item6485: Fix banner background image position issue on Safari
2010-06-06: TWikibug:Item6482: XHTML validation fixes; moving CSS to HTML head using ADDTOHEAD variable
2010-06-05: TWikibug:Item6475: Better indication of breadcrumb in top menu using large arrows
2010-05-26: TWikibug:Item6471: 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-05-20: TWikibug:Item6455: Use %ICON{menu-down}% instead of long img tag in menu-bars
2010-05-01: TWikibug:Item6437: 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

Edit | Attach | Print version | History: r5 < r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Copyright © 1999-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding The Caboteria? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.TopMenuSkin.