View source
<h2>ULTIMENU</h2>
<p>Ultimenu is the UltimatelyDeadSimple™ megamenu ever with dynamic region creation.</p>
<p>An Ultimenu block is based on a menu.<br />
Ultimenu regions are based on the menu items.<br />
The result is a block contains regions containing blocks, as opposed to: a region contains blocks.</p>
<p>The module manages the toggle of Ultimenu blocks, regions, and a skins library,
while leaving the management of block, menu and regions to Drupal.</p>
<p>At individual Ultimenu block, you can define a unique skin and the flyout orientation.</p>
<p>You don't have to write regions in the theme .info,
however you can always permanently store resulting region definitions in it.
See Notes below for possible handle of confusion.</p>
<h2>FEATURES</h2>
<ol>
<li>Multiple instance of Ultimenus based on system and menu modules.</li>
<li>Dynamic regions based on menu items which is toggled without touching .info.</li>
<li>Render menu description.</li>
<li>Menu description above menu title.</li>
<li>Add title class to menu item list.</li>
<li>Add mlid class to menu item list.</li>
<li>Add menu counter class.</li>
<li>Remove browser tooltip.</li>
<li>Use mlid, not title for Ultimenu region key.</li>
<li>Custom skins, or theme default "css/ultimenu" directory for auto discovery.</li>
<li>Individual flyout orientation: horizontal to bottom or top, vertical to left or right.</li>
<li>Pure CSS3 animation and basic styling is provided without assumption.
Please see and override the ultimenu.css for more elaborate positioning, either left,
centered or right to menu list or menu bar.</li>
<li>With the goodness of blocks and regions, you can embed almost anything:
views, panels, blocks, menu_block, boxes, slideshow..., except a toothpick.</li>
</ol>
<p>All 1-9 is off by default.</p>
<h2>REQUIREMENTS</h2>
<p>- Drupal core optional menu.module should be enabled.</p>
<h2>USAGE</h2>
<p>Watch for "<strong>Save</strong>".</p>
<ol>
<li>Install the module as usual, more info can be found on:
http://drupal.org/documentation/install/modules-themes/modules-7
</li>
<li><strong>Toggle Ultimenu blocks:</strong>
Visit <em>/admin/structure/ultimenu</em>
to manage the Ultimenu blocks, regions, a skin library and a few goodies.<br />
<ul>
<li>Click menus you want to use for an Ultimenu block, say "<strong>Main navigation</strong>".
This block is like a regular menu block, only will hold the following regions in it.</li>
<li>Save.</li>
</ul>
</li>
<li><strong>Toggle Ultimenu regions:</strong>
Still at <em>admin/structure/ultimenu</em>
Once a menu is enabled, dynamic regions will be available to toggle.
Only enabled regions (based on enabled menu items) will be visible at block/context admin.
<ul>
<li>Click on menu item title where you want to add the flyout (regions).
Any menu item enabled here will act as regions.</li>
<li>Save.</li>
</ul>
</li>
<li><strong>Place blocks into regions:</strong>
Visit <em>/admin/structure/block</em>
This is the fun part.
We have an <strong>Ultimenu: Main navigation</strong> acting like any regular menu block.
We also have Ultimenu regions to hold any block, except the Ultimenu block itself, of course.
<strong>Important!</strong> Do not add <strong>Ultimenu: Main navigation</strong> block into any Ultimenu region, else broken.
<ul>
<li>Place <strong>Ultimenu: Main navigation</strong> block into any region, except Ultimenu regions.
<ul>
<li>Click "<strong>Place block</strong>" button on any region (header, sidebar, footer or navigation region, <strong>except Ultimenu regions!</strong>),
say "<strong>Primary menu</strong>" region. This Ultimenu block acts as Ultimenu region container.</li>
<li>On modal, search for "<strong>Ultimenu: Main navigation</strong>", and click "<strong>Place block</strong>".
The Ultimenu regions are still empty here.</li>
</ul>
</li>
<li>Place other blocks into any Ultimenu region.
Scroll to bottom, and search for each Ultimenu regions, say "<strong>Ultimenu:main: About</strong>".
Add other blocks to the "<strong>Ultimenu:main: About</strong>" region, and repeat.</li>
</ul>
</li>
</ol>
<p>If confusing, try removing <strong>Ultimenu: </strong> part from the names mentally.</p>
<h2>WHY ANOTHER MEGAMENU?</h2>
<p>I tried one or two, not all, and read some, but found no similar approach.<br />
Unless I missed one. Please file an issue if any similar approach worth a merge.</p>
<h2>HOW CAN YOU HELP?</h2>
<p>Please consider helping in the issue queue, provide improvement, or helping with<br />
documentation.</p>
<h2>RELATED MODULES</h2>
<ul>
<li>http://drupal.org/project/om_maximenu - OM Maximenu</li>
<li>http://drupal.org/project/megamenu - Megamenu</li>
<li>http://drupal.org/project/superfish - Superfish</li>
<li>http://drupal.org/project/menu_views - Menu Views</li>
<li>http://drupal.org/project/1077858 - MuchoMenu</li>
<li>http://drupal.org/project/gigamenu - Giga Menu</li>
<li>http://drupal.org/project/menu_minipanels - Menu Minipanels</li>
<li>http://drupal.org/sandbox/ravigupta/1099796 - Mega Dropdown</li>
<li>http://drupal.org/project/menu_attach_block - Menu Attach Block</li>
</ul>
<h2>NOTES</h2>
<p>Whenever a menu item is removed/disabled, the relevant region will be removed.<br />
If you manually copy/store them in theme .info, regions will always be visible, which is another case.<br />
Dynamic region is indeed removed, but system now displays your written regions.<br />
However you can force disabling unwanted Ultimenu regions via UI if so required, altering the system.</p>
<p>Make sure to clear the cache to see the new regions.</p>
<p><strong>Repeat!</strong> Do not add Ultimenu block into Ultimenu region, else broken.<p>
<h2>STYLINGS</h2>
<p>Classes:</p>
<pre>
.ultimenu: the menu UL tag.
.ultimenu > li: the menu LI tag.
.ultimenu__flyout: the ultimenu region aka flyout.
.ultimenu__link: the menu-item A tag.
.has-ultimenu: contain the flyout, to differ from regular list like when using border-radius.
</pre>
<p>A very basic layout is provided to display them properly. Skinning is all yours.<br />
To position the flyout may depend on design.<br />
Use relative UL to have a very wide flyout that will stick to menu container UL.<br />
Use relative LI to have a smaller flyout that will stick to menu item LI.</p>
<p>To center the flyout, use negative margin technique:</p>
<p><code><pre>.ultimenu__flyout {
left: 50%;
margin-left: -480px; /* half of width */
width: 960px;
} </pre></code></p>
<p>Adjust the margin and width accordingly. The rule: margin is half of width.</p>
<p><strong>More ideas for positioning:</strong></p>
<ul>
<li>Centered to menu bar, like ESPN</li>
<li>Always left to menu bar</li>
<li>Always right to menu bar</li>
<li>Centered to menu item</li>
<li>Left to menu item, like Reuters</li>
<li>Right to menu item</li>
</ul>
<p>When placing vertical Ultimenu in sidebar, make sure to add position relative<br />
to the sidebar selector, and add proper z-index, otherwise it is possible that<br />
the flyout will be dropped behind some content area.</p>
<h2>AUTHOR/MAINTAINER/CREDITS</h2>
<p>@gausarts</p>
<p><strong>Contributors:</strong><br />
https://www.drupal.org/node/1897426/committers</p>
