Difference: TopMenuSkin (1 vs. 9)

Revision 92018-07-06 - TWikiContributor

Line: 1 to 1
 

TopMenuSkin

Revision 82014-08-19 - TWikiContributor

Line: 1 to 1
 

TopMenuSkin

Revision 72013-09-28 - TWikiContributor

Line: 1 to 1
 

TopMenuSkin

Revision 62013-02-16 - TWikiContributor

Line: 1 to 1
 

TopMenuSkin

Revision 52012-09-19 - TWikiContributor

Line: 1 to 1
 

TopMenuSkin

Revision 42011-07-28 - TWikiContributor

Line: 1 to 1
 

TopMenuSkin

Revision 32011-03-09 - TWikiContributor

Line: 1 to 1
 

TopMenuSkin

Added:
>
>
 
Added:
>
>
 The TopMenuSkin adds pulldown menus to the PatternSkin.

Screen Shot

Line: 22 to 24
 Twiki, Inc.
Changed:
<
<
>
>
 
Line: 100 to 101
 

CSS and JavaScript

Changed:
<
<
This section defines the CSS and JavaScript. (View Raw to see the source.)
>
>
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
 
<--
-->
Changed:
<
<
<--
-->
>
>
" }%
 

Installation

Line: 212 to 214
 
  • 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 TWiki:Item6424 (to add the format parameter feature).
    • Apply patch TWikibug:Item6430 so that Edit and Attach buttons point to the current topic instead of TopMenuSkinTopBar.
Changed:
<
<
>
>
 
    • If you have more than 30 webs, apply TWikibug:Item6429 to limit the number of webs shown in the "Home" menu.

Creating your own look

Line: 229 to 232
 
Copyright: © 2010, TWiki:Main/PeterThoeny, Twiki, Inc.
License: GPL (GNU General Public License)
Description: Top-menu skin
Changed:
<
<
Screenshot: Click for full screen image
>
>
Screenshot: Screenshot
 
Preview: Preview with this topic
Base Name: topmenu,pattern
Changed:
<
<
Skin Version: 2010-05-26 (v1.4)
>
>
Skin Version: 2010-10-03 (v1.91)
 
Change History:
<-- specify latest version first -->
 
Added:
>
>
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

Revision 12010-05-27 - TWikiContributor

Line: 1 to 1
Added:
>
>

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.

Screen Shot

Screenshot

Tob Bar and Menu Structure

This skin is
sponsored by:
Twiki, Inc.

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.

CSS and JavaScript

This section defines the CSS and JavaScript. (View Raw to see the source.)

<--
-->
<--