TopMenuSkin
<--
Contributions to this skin are appreciated. Please update the skin page at
http://twiki.org/cgi-bin/view/Plugins/TopMenuSkin or provide feedback at
http://twiki.org/cgi-bin/view/Plugins/TopMenuSkinDev.
If you are a TWiki contributor please update the skin in the SVN repository.
-->
The TopMenuSkin adds pulldown menus to the PatternSkin.
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:
| 
- the gray TWiki icon. 
Home 
Search 
to 
to 
to 
Copyright &© 1999-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.