Issue #1458084 by PatRedmond, imclean, hackwater: Use D7 jquery behaviours
[project/megamenu.git] / 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.