A popular trend in webiste design is to create "Fat Menus" where individual pull-down menu items contain richly formatted text as well as graphics.
For maximum flexibility, NeatClubs allows you to substitute the sub-menu that would normally appear under a top menu with the HTML contents of a document.
When a document is substituted for the regular contents of the sub-menu, a knowledgeable web-site designer can achieve maximum design flexibility by creating the sub-menu content themselves over-riding what would normally be created by NeatClubs.COM.
Invoking Fat Menus in Menu Setup
To specify that a sub-menu should be replaced by the contents of a document, place the document ID in brackets to the right of the top level menu text that appears on the menu button as shown below. (As a reminder, this option only works when the JQuery menus are being used. If you are using the Tigra menus the document ID in brackets will be ignored)
In this example, when a site visitor places their mouse over the "About Us" menu option, a sub-menu will appear with the contents of document ID #239 embedded in the sub-menu. Obviously the HTML that appears in the referenced document will need to be designed with care.
For those knowledgeable about HTML, content you supply will be wrapped in a "div" of class "sub" (<div class="sub"> .. your content .. </div>) This means that typefaces, font-sizes and colors will be styled automatically.
Use the class "l3" (as in level 3) as shown in the example below to stylize sub-menu options with smaller text. Third level menus are not supported with fat menus so, this class internal to NeatClubs.COM provides the ability to create a virtual third level of navigation by creating smaller sub-headings that may be links to any internal or external web-site content.
You can embed multiple unordered-lists (<ul> tags) in a document, and NeatClubs will render them appropriately beside one another.
Below is a simple example of HTML that you might want to include as a "Fat Menu" document. This example will cause a graphic to appear on the left with three bullets to the right.
<table><tr>
<td><img src="./images/my_graphic.png"></td>
<td>
<ul>
<li><a href="#">Sub Menu 2a</a></li>
<li><a class="l3" href="#">Sub Menu 2b</a></li>
<li><a class="l3" href="#">Sub Menu 2c</a></li>
</ul>
</td>
</tr></table>