README.txt

   1 ******************************************************************
   2         About D7 Version
   3 ******************************************************************
   4 This is a direct port by Sylv3st3r. Based on dev version (Jan 24 2011)
   5
   6 ******************************************************************
   7         Contents
   8 ******************************************************************
   9 1. Assumptions
  10 2. Mega Menus in a Nutshell
  11 3. How to Use This Module
  12 4. Styling
  13 5. Advanced Usage
  14
  15 ******************************************************************
  16         Assumptions
  17 ******************************************************************
  18 1. You are a Drupal themer (or understand theming)
  19 2. Your markup and CSS are clean
  20 3. You want more CSS control over Drupal menus
  21
  22 ******************************************************************
  23         Mega Menus in a Nutshell
  24 ******************************************************************
  25 Read: http://www.useit.com/alertbox/mega-dropdown-menus.html
  26
  27 ******************************************************************
  28         How to Use This Module
  29 ******************************************************************
  30 The basis of a mega menu is a Drupal menu that is three levels deep. The first level (or tier) are the
  31 parent items. The second tier are categories. Tier three menu items are the sub links grouped beneath
  32 the second tier categories.
  33
  34 Consider the following example menu:
  35
  36 + Library                           > Tier 1
  37 |   |
  38 |    + Newsletters                  > Tier 2
  39 |   |     |
  40 |   |      + Newsletter 1           > Tier 3
  41 |   |      + Newsletter 2
  42 |   |      + Newsletter 3
  43 |   |
  44 |    + Publications
  45 |         |
  46 |          + Publication 1
  47 |          + Publication 2
  48 |          + Publication 3
  49 |
  50 + Info Center
  51
  52 To create a mega menu out of a menu structured in this way:
  53 1. Enable this module just like any other Drupal module
  54 2. Go to the mega menu configuration page: admin/config/user-interface/megamenu
  55 3. Check the enable box next to the menu you want to convert into a mega menu
  56 4. Click save
  57 5. Click "configure this mega"
  58         5.1 Select the menu orientation
  59         5.2 Select the slot orientation
  60         5.3 Select a default sample skin or type in your own skin name
  61                 IF CREATING YOUR OWN SKIN: You have two options
  62                 1. Follow the on-screen directions to upload your skin to the files directory
  63                 2. Create your own CSS in your theme and include it in your theme.info file.
  64
  65 A block containing your mega menu, with the styles you have specified above, has now been
  66 enabled.
  67
  68 6. Edit your blocks (admin/build/blocks) and place your mega menu block in a region.
  69
  70
  71 ******************************************************************
  72         Styling
  73 ******************************************************************
  74
  75 Now that the mega menu block is setup, the actual work begins.
  76
  77 Continuing from the example menu above, the corresponding megamenu structure looks like this.
  78 Notice the root level, or tier one, items (Library and Info Center) are referred to as parents.
  79 When the mouse hovers over a parent, a bin drops down. In this example, the Library bin contains
  80 two slots, which correspond to the second level of the menu (Newsletters and Publications). Notice
  81 that slots are the organizational element, which contain the final link destinations. In this example,
  82 the slots are oriented horizontally.  They can also stack on top of each other.
  83
  84  ------------------------------------------------
  85 |  Library  |  Info Center |                     |  > Parent
  86  ------------------------------------------------
  87       ||
  88    --------------------------------------------              __
  89   |  -----------------     -----------------   |                \
  90   | | [ Newsletters ] |   | [ Publications ] | | --Slot Title    \
  91   | |                 |   |                  | |                  \
  92   | |  Newsletter 1   |   |  Publication 1   | |                    Bin
  93   | |  Newsletter 2   |   |  Publication 2   | |                  /
  94   | |  Newsletter 3   |   |  Publication 3   | |                 /
  95   |  -----------------     ------------------  |                /
  96    --------------------------------------------              __/
  97
  98     |                 |
  99      \               /
 100        \           /
 101          \       /
 102             Slot
 103
 104 And the markup looks like this (items in {} are either user supplied values or are dynamically generated):
 105
 106 <ul id="megamenu-{menu name}" class="megamenu-menu {menu orientation} megamenu-skin-{skin name}">
 107   <li class="megamenu-parent {even/odd}">
 108     <h2 class="megamenu-parent-title">Library</h2>
 109     <ul class="megamenu-bin megamenu-slots-{slot orientation}">
 110       <li class="megamenu-slot {even/odd}">
 111         <h3 class="megamenu-slot-title">Newsletters</h3>
 112         <ul class="megamenu-items">
 113           <li class="megamenu-item {even/odd}">Newsletter 1</li>
 114           <li class="megamenu-item {even/odd}">Newsletter 2</li>
 115           <li class="megamenu-item {even/odd}">Newsletter 3</li>
 116         </ul>
 117       </li>
 118
 119       <li class="megamenu-slot {even/odd}">
 120         <h3 class="megamenu-slot-title">Publications</h3>
 121         <ul class="megamenu-items">
 122           <li class="megamenu-item {even/odd}">Publication 1</li>
 123           <li class="megamenu-item {even/odd}">Publication 2</li>
 124           <li class="megamenu-item {even/odd}">Publication 3</li>
 125         </ul>
 126       </li>
 127     </ul>
 128   </li>
 129
 130   <li class="megamenu-parent {even/odd}">
 131     <h2 class="megamenu-parent-title">Info Center</h2>
 132     ... bin
 133        ... slots
 134           ... items
 135   </li>
 136 </ul>
 137
 138 To style your mega menu, simply precede all rules with your skin name:
 139 .megamenu-skin-myskin .megamenu-slot-title {
 140         color: red;
 141         font-size: 1.2em;
 142 }
 143
 144 ******************************************************************
 145         Advanced Usage
 146 ******************************************************************
 147 1. Create Mega Menus our of your taxonomies
 148    To automatically generate menu content from your sites Taxonomy structure, you can use the
 149    Taxonomy Menu module (http://drupal.org/project/taxonomy_menu) which populates your Tier1 with
 150    your Taxonomy ‘Vocabulary’ name and Tier2 and Tier3 with Terms hierarchically set to this Vocabulary name.
 151
 152    NOTE: Your taxonomy structure must still supply 3 tiers of data, so this integration will most likely not
 153    work well with free tagging.