Sha256: 94d347c64036e69ff2955df84c0f7f362972ed844d993c3a14059e941309a121
Contents?: true
Size: 1.73 KB
Versions: 8
Compression:
Stored size: 1.73 KB
Contents
---
title: HorizontalDropdown
directoryName: MenuStyle
inMenu: true
template: /plugin.template
plugin: MenuStyle/HorizontalDropdown
---
h2(#description). Description
Builds a horizontal menu with CSS drop down menus. This menu should work fine in any browser
supporting CSS and the @:hover@ selector (Mozilla based browsers like Firefox, Opera and Konqueror
are fine, does NOT work in IE 6 on Windows XP, not tested with IE 7).
*Caveat*: You should link to the @webgen-css@ resource in your template as this plugin defines some
CSS styles!
h2(#style). Style Advice
The menu works by only using CSS, not DHTML or anything else. Following is a list of CSS selectors
and descriptions how these selectors can be used to style various parts of the menu. You have to pay
attention to the last element in the selector (@ul@, @li@, or @a@). When you want to style menu
items, you normally want to use @a@. You should also be aware of the use of the @>@ sign, there is a
dramatic difference between writing @li a@ and @li > a@ (the former selecting ALL @a@ elements of
the list item, i.e. all @a@ elements in submenus too; and the latter only selecting the direct
descendants)!
table{border: 1px solid black}.
|<code>.webgen-menu-horiz-dd ul > li > a</code>|Style the top level menu items (the ones that are always shown)|
|<code>.webgen-menu-horiz-dd ul ul</code>|Style the drop down menus|
|<code>.webgen-menu-horiz-dd ul ul > li > a</code>|Style the drop down menu items|
|<code>.webgen-menu-horiz-dd li:hover > a</code>|Style the hovered-over menu item|
h2(#examples). Examples
<table class="examples">
<tr>
<th>Used parameters</th><th>Resulting menu</th>
</tr>
<tr>
<td>Using default values</td>
<td>{menu: {menuStyle: horizontal-dropdown}}</td>
</tr>
</table>
Version data entries
8 entries across 8 versions & 1 rubygems