summaryrefslogtreecommitdiffstats
path: root/README.txt
blob: 43d92df418ad376a146348eb01b5bd2d13f40309 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
******************************************************************
	About D7 Version
******************************************************************
This is a direct port by Sylv3st3r. Based on dev version (Jan 24 2011)

******************************************************************
	Contents
******************************************************************
1. Assumptions
2. Mega Menus in a Nutshell
3. How to Use This Module
4. Styling
5. Advanced Usage

******************************************************************
	Assumptions
******************************************************************
1. You are a Drupal themer (or understand theming)
2. Your markup and CSS are clean
3. You want more CSS control over Drupal menus

******************************************************************
	Mega Menus in a Nutshell
******************************************************************
Read: http://www.useit.com/alertbox/mega-dropdown-menus.html

******************************************************************
	How to Use This Module 
******************************************************************
The basis of a mega menu is a Drupal menu that is three levels deep. The first level (or tier) are the 
parent items. The second tier are categories. Tier three menu items are the sub links grouped beneath 
the second tier categories.

Consider the following example menu:

+ Library                           > Tier 1
|   |
|    + Newsletters                  > Tier 2
|   |     |
|   |      + Newsletter 1           > Tier 3
|   |      + Newsletter 2
|   |      + Newsletter 3
|   |
|    + Publications
|         |
|          + Publication 1
|          + Publication 2
|          + Publication 3
|   
+ Info Center

To create a mega menu out of a menu structured in this way:
1. Enable this module just like any other Drupal module
2. Go to the mega menu configuration page: admin/config/user-interface/megamenu
3. Check the enable box next to the menu you want to convert into a mega menu
4. Click save
5. Click "configure this mega"
	5.1 Select the menu orientation
	5.2 Select the slot orientation
	5.3 Select a default sample skin or type in your own skin name
		IF CREATING YOUR OWN SKIN: You have two options
		1. Follow the on-screen directions to upload your skin to the files directory
		2. Create your own CSS in your theme and include it in your theme.info file.

A block containing your mega menu, with the styles you have specified above, has now been 
enabled.
	
6. Edit your blocks (admin/build/blocks) and place your mega menu block in a region.


******************************************************************
	Styling
******************************************************************

Now that the mega menu block is setup, the actual work begins.

Continuing from the example menu above, the corresponding megamenu structure looks like this. 
Notice the root level, or tier one, items (Library and Info Center) are referred to as parents. 
When the mouse hovers over a parent, a bin drops down. In this example, the Library bin contains 
two slots, which correspond to the second level of the menu (Newsletters and Publications). Notice
that slots are the organizational element, which contain the final link destinations. In this example, 
the slots are oriented horizontally.  They can also stack on top of each other.

 ------------------------------------------------
|  Library  |  Info Center |                     |  > Parent
 ------------------------------------------------
      ||                       
   --------------------------------------------              __
  |  -----------------     -----------------   |                \
  | | [ Newsletters ] |   | [ Publications ] | | --Slot Title    \
  | |                 |   |                  | |                  \
  | |  Newsletter 1   |   |  Publication 1   | |                    Bin
  | |  Newsletter 2   |   |  Publication 2   | |                  /
  | |  Newsletter 3   |   |  Publication 3   | |                 /     
  |  -----------------     ------------------  |                /
   --------------------------------------------              __/
    
    |                 |
     \               /
       \           /
         \       /
            Slot

And the markup looks like this (items in {} are either user supplied values or are dynamically generated):

<ul id="megamenu-{menu name}" class="megamenu-menu {menu orientation} megamenu-skin-{skin name}">
  <li class="megamenu-parent {even/odd}">
    <h2 class="megamenu-parent-title">Library</h2>
    <ul class="megamenu-bin megamenu-slots-{slot orientation}">
      <li class="megamenu-slot {even/odd}">
        <h3 class="megamenu-slot-title">Newsletters</h3>
        <ul class="megamenu-items">
          <li class="megamenu-item {even/odd}">Newsletter 1</li>
          <li class="megamenu-item {even/odd}">Newsletter 2</li>
          <li class="megamenu-item {even/odd}">Newsletter 3</li>
        </ul>
      </li>

      <li class="megamenu-slot {even/odd}">
        <h3 class="megamenu-slot-title">Publications</h3>
        <ul class="megamenu-items">
          <li class="megamenu-item {even/odd}">Publication 1</li>
          <li class="megamenu-item {even/odd}">Publication 2</li>
          <li class="megamenu-item {even/odd}">Publication 3</li>
        </ul>
      </li>
    </ul>
  </li>
  
  <li class="megamenu-parent {even/odd}">
    <h2 class="megamenu-parent-title">Info Center</h2>
    ... bin
       ... slots
          ... items
  </li>
</ul>

To style your mega menu, simply precede all rules with your skin name:
.megamenu-skin-myskin .megamenu-slot-title {
	color: red;
	font-size: 1.2em;
}

******************************************************************
	Advanced Usage
******************************************************************
1. Create Mega Menus our of your taxonomies
   To automatically generate menu content from your sites Taxonomy structure, you can use the 
   Taxonomy Menu module (http://drupal.org/project/taxonomy_menu) which populates your Tier1 with 
   your Taxonomy ‘Vocabulary’ name and Tier2 and Tier3 with Terms hierarchically set to this Vocabulary name.

   NOTE: Your taxonomy structure must still supply 3 tiers of data, so this integration will most likely not 
   work well with free tagging.