Home | Gifts

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:

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:

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

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

Show details toggleopen.gif Hide details toggleclose.gif

Skin Info

Skin Author: TWiki:Main.PeterThoeny
Copyright: © 2010-2018, TWiki:Main.PeterThoeny, TWiki.org
© 2010-2018 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: 2018-07-06

Show Change History toggleopen.gif Hide Change History toggleclose.gif
2018-07-06: TWikibug:Item7841: Copyright update to 2018
2016-01-09: TWikibug:Item7708: Copyright update to 2016
2014-08-19: TWikibug:Item7546: Top bar buttons on top right corner can be customized
2014-06-18: TWikibug:Item7520: Context sensitive tooltip help for Jump box and Search box
2014-05-15: TWikibug:Item7492: Hide top menu in print using hideInPrint CSS class (requires PatternSkin 2014-05-15)
2013-09-28: TWikibug:Item7160: Support verbose breadcrumbs at the top of the page
2013-04-22: TWikibug:Item7151: Change CALC to CALCULATE in bookmark word spacing
2013-03-03: TWikibug:Item7143: Show "Watch" pulldown menu in case TWiki:Plugins.WatchlistPlugin is installed and enabled
2013-02-16: TWikibug:Item7123: Use TWISTY in installation instructions and 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

Revision r9 - 2018-07-06 - 07:43:54 - TWikiContributor Edit