You are here

README.txt in Ultimenu 7

Same filename and directory in other branches
  1. 8 README.txt
Ultimenu is the UltimatelyDeadSimple™ megamenu ever with dynamic region
creation.

An Ultimenu block is based on a menu. Ultimenu regions are based on the menu items.
The result is a block contains regions containing blocks, as opposed to: a
region contains blocks.

The module manages the toggle of Ultimenu blocks, regions, and a skins library,
while leaving the management of block, menu and regions to Drupal.

At individual Ultimenu block, you can define a unique skin and the flyout
orientation.

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.

Inspirations:
============
http://www.nationalgeographic.com/
http://www.starbucks.com/
http://www.nike.com
http://explo.org/
http://www.whitehouse.gov/
http://www.actionenvelope.com/


Features:
================================================================================
1. Multiple instance of Ultimenus based on system and menu modules.
2. Dynamic regions based on menu items which is toggled without touching .info.
3. Render menu description.
4. Menu description above menu title.
5. Add title class to menu item list.
6. Add mlid class to menu item list.
7. Add menu counter class
8. Remove browser tooltip.
9. Use mlid, not title for Ultimenu region key.
10. Custom skins, or theme default "css/ultimenu" directory for auto discovery.
11. Individual flyout orientation: horizontal to bottom or top, vertical to
    left or right.
12. 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.
    And a simple JS to highlight the current menu item after hover (.hover)
    whenever CSS (:hover) fails.
13. With the goodness of blocks and regions, you can embed almost anything:
    views, panels, blocks, menu_block, boxes, slideshow..., except a toothpick.

All 1-9 is off by default.


Usage:
================================================================================
1. Enable or install the module.
2. Visit admin/structure/ultimenu to manage the Ultimenu blocks, regions, a skin
   library and a few goodies.
3. 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.
4. Visit admin/structure/block to assign the "Ultimenu: Menu name" block into
   header, sidebar, footer or navigation region, except Ultimenu regions.
5. Add other blocks to the Ultimenu regions.


Requirements:
================================================================================
- Drupal core optional menu.module should be enabled.


Why another megamenu?
================================================================================
I tried one or two, not all, and read some, but found no similar approach.
Unless I missed one. Please file an issue if any similar approach worth a merge.


How can you help?
================================================================================
Please consider helping in the issue queue, provide improvement, or helping with
documentation.


Related modules
================================================================================
http://drupal.org/project/om_maximenu - OM Maximenu
http://drupal.org/project/megamenu - Megamenu
http://drupal.org/project/superfish - Superfish
http://drupal.org/project/menu_views - Menu Views
http://drupal.org/project/1077858 - MuchoMenu
http://drupal.org/project/gigamenu - Giga Menu
http://drupal.org/project/menu_minipanels - Menu Minipanels
http://drupal.org/sandbox/ravigupta/1099796 - Mega Dropdown
http://drupal.org/project/menu_attach_block - Menu Attach Block



Notes:
================================================================================
Whenever a menu item is removed/disabled, the relevant region will be removed.
If you manually copy/store them in theme .info, regions will always be visible,
which is another case.
Dynamic region is indeed removed, but system now displays your written regions.
However you can force disabling unwanted Ultimenu regions via UI if so required,
altering the system.

Make sure to clear the cache to see the new regions.


Context user tips:
================================================================================
Do not place the Ultimenu container blocks along with Ultimenu regions where you
place other blocks. Use a separate context, say:
  a. ultimenu_containers: Ultimenu container blocks, e.g.: Ultimenu:main menu,
     or use regular block admin.
  b  ultimenu_items: Other blocks to place inside Ultimenu regions.

Known issues:
================================================================================
Context module integration:
- Placing both Ultimenu container and items inside the same context will behave.
- Context produces some notices:
  Undefined property: stdClass::$content in _block_get_renderable_array()


Stylings:
================================================================================
Classes:
  .ultimenu: the menu UL tag.
  .ultimenu > li: the menu LI tag.
  .ultimenu-flyout: the ultimenu region aka flyout.
  .ultimenu-item: the menu-item A tag.
  .ultimenu > li.hover: keep persistent highlighting on hover menu item
  .has-ultimenu: contain the flyout, to differ from regular list like
  when using border-radius.

A very basic layout is provided to display them properly. Skinning is all yours.
To position the flyout may depend on design.
Use relative UL to have a very wide flyout that will stick to menu UL.
Use relative LI to have a smaller flyout that will stick to menu LI.

To center the flyout, use negative margin technique:

  .ultimenu-flyout {
    left: 50%;
    margin-left: -480px; /* half of width */
    width: 960px;
  }

Adjust the margin and width accordingly. The rule: margin is half of width.

More ideas for positioning:
- Centered to menu bar, like ESPN
- Always left to menu bar
- Always right to menu bar
- Centered to menu item
- Left to menu item, like Reuters
- Right to menu item

When placing vertical Ultimenu in sidebar, make sure to add position relative
to the sidebar selector, and add proper z-index, otherwise it is possible that
the flyout will be dropped behind some content area.


i18n with Entity translation integration:
================================================================================
Ultimenu works great if the region is not language dependent, that is using the
MLID as the region key. If Entity translation keeps one node for multiple
languages, Ultimenu keeps one region for multiple languages.

1. admin/structure/ultimenu
   Check: Use mlid, not title for Ultimenu region key, because the title is
   language dependent.

2. admin/structure/menu/manage/[MENU-NAME]/edit
   Check: option #2 - Translate and Localize.

3. admin/structure/menu/item/[MLID]/edit
   Keep "language neutral", to localize the menu title.

File

README.txt
View source
  1. Ultimenu is the UltimatelyDeadSimple™ megamenu ever with dynamic region
  2. creation.
  3. An Ultimenu block is based on a menu. Ultimenu regions are based on the menu items.
  4. The result is a block contains regions containing blocks, as opposed to: a
  5. region contains blocks.
  6. The module manages the toggle of Ultimenu blocks, regions, and a skins library,
  7. while leaving the management of block, menu and regions to Drupal.
  8. At individual Ultimenu block, you can define a unique skin and the flyout
  9. orientation.
  10. You don't have to write regions in the theme .info, however you can always
  11. permanently store resulting region definitions in it. See Notes below for
  12. possible handle of confusion.
  13. Inspirations:
  14. ============
  15. http://www.nationalgeographic.com/
  16. http://www.starbucks.com/
  17. http://www.nike.com
  18. http://explo.org/
  19. http://www.whitehouse.gov/
  20. http://www.actionenvelope.com/
  21. Features:
  22. ================================================================================
  23. 1. Multiple instance of Ultimenus based on system and menu modules.
  24. 2. Dynamic regions based on menu items which is toggled without touching .info.
  25. 3. Render menu description.
  26. 4. Menu description above menu title.
  27. 5. Add title class to menu item list.
  28. 6. Add mlid class to menu item list.
  29. 7. Add menu counter class
  30. 8. Remove browser tooltip.
  31. 9. Use mlid, not title for Ultimenu region key.
  32. 10. Custom skins, or theme default "css/ultimenu" directory for auto discovery.
  33. 11. Individual flyout orientation: horizontal to bottom or top, vertical to
  34. left or right.
  35. 12. Pure CSS3 animation and basic styling is provided without assumption.
  36. Please see and override the ultimenu.css for more elaborate positioning,
  37. either left, centered or right to menu list or menu bar.
  38. And a simple JS to highlight the current menu item after hover (.hover)
  39. whenever CSS (:hover) fails.
  40. 13. With the goodness of blocks and regions, you can embed almost anything:
  41. views, panels, blocks, menu_block, boxes, slideshow..., except a toothpick.
  42. All 1-9 is off by default.
  43. Usage:
  44. ================================================================================
  45. 1. Enable or install the module.
  46. 2. Visit admin/structure/ultimenu to manage the Ultimenu blocks, regions, a skin
  47. library and a few goodies.
  48. 3. Once a menu is enabled, dynamic regions will be available to toggle. Only
  49. enabled regions (based on enabled menu items) will be visible at block/
  50. context admin.
  51. 4. Visit admin/structure/block to assign the "Ultimenu: Menu name" block into
  52. header, sidebar, footer or navigation region, except Ultimenu regions.
  53. 5. Add other blocks to the Ultimenu regions.
  54. Requirements:
  55. ================================================================================
  56. - Drupal core optional menu.module should be enabled.
  57. Why another megamenu?
  58. ================================================================================
  59. I tried one or two, not all, and read some, but found no similar approach.
  60. Unless I missed one. Please file an issue if any similar approach worth a merge.
  61. How can you help?
  62. ================================================================================
  63. Please consider helping in the issue queue, provide improvement, or helping with
  64. documentation.
  65. Related modules
  66. ================================================================================
  67. http://drupal.org/project/om_maximenu - OM Maximenu
  68. http://drupal.org/project/megamenu - Megamenu
  69. http://drupal.org/project/superfish - Superfish
  70. http://drupal.org/project/menu_views - Menu Views
  71. http://drupal.org/project/1077858 - MuchoMenu
  72. http://drupal.org/project/gigamenu - Giga Menu
  73. http://drupal.org/project/menu_minipanels - Menu Minipanels
  74. http://drupal.org/sandbox/ravigupta/1099796 - Mega Dropdown
  75. http://drupal.org/project/menu_attach_block - Menu Attach Block
  76. Notes:
  77. ================================================================================
  78. Whenever a menu item is removed/disabled, the relevant region will be removed.
  79. If you manually copy/store them in theme .info, regions will always be visible,
  80. which is another case.
  81. Dynamic region is indeed removed, but system now displays your written regions.
  82. However you can force disabling unwanted Ultimenu regions via UI if so required,
  83. altering the system.
  84. Make sure to clear the cache to see the new regions.
  85. Context user tips:
  86. ================================================================================
  87. Do not place the Ultimenu container blocks along with Ultimenu regions where you
  88. place other blocks. Use a separate context, say:
  89. a. ultimenu_containers: Ultimenu container blocks, e.g.: Ultimenu:main menu,
  90. or use regular block admin.
  91. b ultimenu_items: Other blocks to place inside Ultimenu regions.
  92. Known issues:
  93. ================================================================================
  94. Context module integration:
  95. - Placing both Ultimenu container and items inside the same context will behave.
  96. - Context produces some notices:
  97. Undefined property: stdClass::$content in _block_get_renderable_array()
  98. Stylings:
  99. ================================================================================
  100. Classes:
  101. .ultimenu: the menu UL tag.
  102. .ultimenu > li: the menu LI tag.
  103. .ultimenu-flyout: the ultimenu region aka flyout.
  104. .ultimenu-item: the menu-item A tag.
  105. .ultimenu > li.hover: keep persistent highlighting on hover menu item
  106. .has-ultimenu: contain the flyout, to differ from regular list like
  107. when using border-radius.
  108. A very basic layout is provided to display them properly. Skinning is all yours.
  109. To position the flyout may depend on design.
  110. Use relative UL to have a very wide flyout that will stick to menu UL.
  111. Use relative LI to have a smaller flyout that will stick to menu LI.
  112. To center the flyout, use negative margin technique:
  113. .ultimenu-flyout {
  114. left: 50%;
  115. margin-left: -480px; /* half of width */
  116. width: 960px;
  117. }
  118. Adjust the margin and width accordingly. The rule: margin is half of width.
  119. More ideas for positioning:
  120. - Centered to menu bar, like ESPN
  121. - Always left to menu bar
  122. - Always right to menu bar
  123. - Centered to menu item
  124. - Left to menu item, like Reuters
  125. - Right to menu item
  126. When placing vertical Ultimenu in sidebar, make sure to add position relative
  127. to the sidebar selector, and add proper z-index, otherwise it is possible that
  128. the flyout will be dropped behind some content area.
  129. i18n with Entity translation integration:
  130. ================================================================================
  131. Ultimenu works great if the region is not language dependent, that is using the
  132. MLID as the region key. If Entity translation keeps one node for multiple
  133. languages, Ultimenu keeps one region for multiple languages.
  134. 1. admin/structure/ultimenu
  135. Check: Use mlid, not title for Ultimenu region key, because the title is
  136. language dependent.
  137. 2. admin/structure/menu/manage/[MENU-NAME]/edit
  138. Check: option #2 - Translate and Localize.
  139. 3. admin/structure/menu/item/[MLID]/edit
  140. Keep "language neutral", to localize the menu title.