You are here

README.txt in Ultimenu 8

Same filename and directory in other branches
  1. 7 README.txt
ULTIMENU
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.


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.
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.


REQUIREMENTS

- Drupal core optional menu.module should be enabled.


USAGE
Watch for "Save".
1. Install the module as usual, more info can be found on:
   http://drupal.org/documentation/install/modules-themes/modules-7

2. Toggle Ultimenu blocks:
   Visit /admin/structure/ultimenu
   to manage the Ultimenu blocks, regions, a skin library and a few goodies.

   o Click menus you want to use for Ultimenu blocks, say "Main navigation".
   o Save.

3. Toggle Ultimenu regions:
   Still at /admin/structure/ultimenu
   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.

   o Click on menu item title where you want to add flyout (regions).
   o Save.

4. Place blocks into regions:
   Visit /admin/structure/block
   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.
   Important! Do not add Ultimenu blocks into Ultimenu regions, else broken.

   o Place "Ultimenu: Main navigation" block into any region, except Ultimenu
     regions.
     - Click "Place block" button on any region (header, sidebar, footer
       or navigation region, except Ultimenu regions!), say "Primary menu".
       This Ultimenu block acts as Ultimenu region container.
     - On modal, search for "Ultimenu: Main navigation", and click "Place block".
       The Ultimenu regions are still empty here.
   o Place other blocks into any Ultimenu region.
     Scroll to bottom and search for each Ultimenu regions, say
     "Ultimenu:main: About".
     Add other blocks to the "Ultimenu:main: About" region, and repeat.

If still confused, try removing "Ultimenu: " part from the names mentally.

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.

Repeat! Do not add Ultimenu blocks into Ultimenu regions, else broken.

STYLINGS

Classes:
  .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.

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.


AUTHOR/MAINTAINER/CREDITS
@gausarts

Contributors:
https://www.drupal.org/node/1897426/committers

File

README.txt
View source
  1. ULTIMENU
  2. Ultimenu is the UltimatelyDeadSimple™ megamenu ever with dynamic region
  3. creation.
  4. An Ultimenu block is based on a menu.
  5. Ultimenu regions are based on the menu items.
  6. The result is a block contains regions containing blocks, as opposed to: a
  7. region contains blocks.
  8. The module manages the toggle of Ultimenu blocks, regions, and a skins library,
  9. while leaving the management of block, menu and regions to Drupal.
  10. At individual Ultimenu block, you can define a unique skin and the flyout
  11. orientation.
  12. You don't have to write regions in the theme .info, however you can always
  13. permanently store resulting region definitions in it. See Notes below for
  14. possible handle of confusion.
  15. FEATURES
  16. 1. Multiple instance of Ultimenus based on system and menu modules.
  17. 2. Dynamic regions based on menu items which is toggled without touching .info.
  18. 3. Render menu description.
  19. 4. Menu description above menu title.
  20. 5. Add title class to menu item list.
  21. 6. Add mlid class to menu item list.
  22. 7. Add menu counter class.
  23. 8. Remove browser tooltip.
  24. 9. Use mlid, not title for Ultimenu region key.
  25. 10. Custom skins, or theme default "css/ultimenu" directory for auto discovery.
  26. 11. Individual flyout orientation: horizontal to bottom or top, vertical to
  27. left or right.
  28. 12. Pure CSS3 animation and basic styling is provided without assumption.
  29. Please see and override the ultimenu.css for more elaborate positioning,
  30. either left, centered or right to menu list or menu bar.
  31. 13. With the goodness of blocks and regions, you can embed almost anything:
  32. views, panels, blocks, menu_block, boxes, slideshow..., except a toothpick.
  33. All 1-9 is off by default.
  34. REQUIREMENTS
  35. - Drupal core optional menu.module should be enabled.
  36. USAGE
  37. Watch for "Save".
  38. 1. Install the module as usual, more info can be found on:
  39. http://drupal.org/documentation/install/modules-themes/modules-7
  40. 2. Toggle Ultimenu blocks:
  41. Visit /admin/structure/ultimenu
  42. to manage the Ultimenu blocks, regions, a skin library and a few goodies.
  43. o Click menus you want to use for Ultimenu blocks, say "Main navigation".
  44. o Save.
  45. 3. Toggle Ultimenu regions:
  46. Still at /admin/structure/ultimenu
  47. Once a menu is enabled, dynamic regions will be available to toggle. Only
  48. enabled regions (based on enabled menu items) will be visible at block/
  49. context admin.
  50. o Click on menu item title where you want to add flyout (regions).
  51. o Save.
  52. 4. Place blocks into regions:
  53. Visit /admin/structure/block
  54. This is the fun part.
  55. We have an Ultimenu: Main navigation acting like any regular
  56. menu block.
  57. We also have Ultimenu regions to hold any block, except the Ultimenu block
  58. itself, of course.
  59. Important! Do not add Ultimenu blocks into Ultimenu regions, else broken.
  60. o Place "Ultimenu: Main navigation" block into any region, except Ultimenu
  61. regions.
  62. - Click "Place block" button on any region (header, sidebar, footer
  63. or navigation region, except Ultimenu regions!), say "Primary menu".
  64. This Ultimenu block acts as Ultimenu region container.
  65. - On modal, search for "Ultimenu: Main navigation", and click "Place block".
  66. The Ultimenu regions are still empty here.
  67. o Place other blocks into any Ultimenu region.
  68. Scroll to bottom and search for each Ultimenu regions, say
  69. "Ultimenu:main: About".
  70. Add other blocks to the "Ultimenu:main: About" region, and repeat.
  71. If still confused, try removing "Ultimenu: " part from the names mentally.
  72. WHY ANOTHER MEGAMENU?
  73. I tried one or two, not all, and read some, but found no similar approach.
  74. Unless I missed one. Please file an issue if any similar approach worth a merge.
  75. HOW CAN YOU HELP?
  76. Please consider helping in the issue queue, provide improvement, or helping with
  77. documentation.
  78. RELATED MODULES
  79. http://drupal.org/project/om_maximenu - OM Maximenu
  80. http://drupal.org/project/megamenu - Megamenu
  81. http://drupal.org/project/superfish - Superfish
  82. http://drupal.org/project/menu_views - Menu Views
  83. http://drupal.org/project/1077858 - MuchoMenu
  84. http://drupal.org/project/gigamenu - Giga Menu
  85. http://drupal.org/project/menu_minipanels - Menu Minipanels
  86. http://drupal.org/sandbox/ravigupta/1099796 - Mega Dropdown
  87. http://drupal.org/project/menu_attach_block - Menu Attach Block
  88. NOTES
  89. Whenever a menu item is removed/disabled, the relevant region will be removed.
  90. If you manually copy/store them in theme .info, regions will always be visible,
  91. which is another case.
  92. Dynamic region is indeed removed, but system now displays your written regions.
  93. However you can force disabling unwanted Ultimenu regions via UI if so required,
  94. altering the system.
  95. Make sure to clear the cache to see the new regions.
  96. Repeat! Do not add Ultimenu blocks into Ultimenu regions, else broken.
  97. STYLINGS
  98. Classes:
  99. .ultimenu: the menu UL tag.
  100. .ultimenu > li: the menu LI tag.
  101. .ultimenu__flyout: the ultimenu region aka flyout.
  102. .ultimenu__link: the menu-item A tag.
  103. .has-ultimenu: contain the flyout, to differ from regular list like
  104. when using border-radius.
  105. A very basic layout is provided to display them properly. Skinning is all yours.
  106. To position the flyout may depend on design.
  107. Use relative UL to have a very wide flyout that will stick to menu UL.
  108. Use relative LI to have a smaller flyout that will stick to menu LI.
  109. To center the flyout, use negative margin technique:
  110. .ultimenu__flyout {
  111. left: 50%;
  112. margin-left: -480px; /* half of width */
  113. width: 960px;
  114. }
  115. Adjust the margin and width accordingly. The rule: margin is half of width.
  116. More ideas for positioning:
  117. - Centered to menu bar, like ESPN
  118. - Always left to menu bar
  119. - Always right to menu bar
  120. - Centered to menu item
  121. - Left to menu item, like Reuters
  122. - Right to menu item
  123. When placing vertical Ultimenu in sidebar, make sure to add position relative
  124. to the sidebar selector, and add proper z-index, otherwise it is possible that
  125. the flyout will be dropped behind some content area.
  126. AUTHOR/MAINTAINER/CREDITS
  127. @gausarts
  128. Contributors:
  129. https://www.drupal.org/node/1897426/committers