[TYPO3-english] Mega Menu with Typo3

[Vincent Mans]

Hi Alex,

Here it is, basically. Hope it's complete, it's rather tricky to
unravel. In the source of that website you'll find crumler.css and
crumbler.js (it's not css3). It's from Chrome Drop Down Menu- Author:
Dynamic Drive (http://www.dynamicdrive.com) and slightly changed (look
for //vm in the code). And perhaps I did some modifications in the
other css-files as well. It needs re-engineering, but as you may
understand, it didn't came that far yet.

The dropmenu parts are just object elements in TemplaVoilà. They are
situated outside the HTML page layout, just above the closing </body>
tag and CSS/JS takes care of the appearance. You can fill the elements
through DS with HMENU, but also other objects like RECORD or PLUGIN.
Everything fits in it. You can create complete webpages inside the
mega menu. That was one of the purposes of this setup. For example, I
plan to put webshop offers in the mega menu, and the contents of the
basket, and images.

The TS is limited to 3 mainlevel menu items. But it can be as many as
you like (just study optionSplit to see how you get passed the 3
items, I've handled that situation too once.

The dropmenus correspond to the column and row. So: dropmenu2c is the
second menu item, third position. As you see, there are dropmenu4 and
5, which are not used in fact. But you can imagine some grid approach
here. You can do anything with it.

I can imagine there are better ways to solve this, I'm not the most
advanced. But it works fine and it is easy to manage for content
managers.

Finally, this is the TS. Like I said, the hovering of the top level
menu items should be handled. I think jquery provides better options
these days (I didn't find it back in 2008). The rel-attribute is
crucial: the JS addresses those, invoking the dropdown of the
corresponding mega menu. Have fun. It took me a few days to sort it
all out and get it to work, hope this helps you to get it right and
improve it in a few hours ;-) Since I have to update this website in a
few months, I'm curious how you improve it further, to learn from
that.

temp.navpath = HMENU
temp.navpath.special = list
temp.navpath.special.value = 229,228,254 // top level menu pages

temp.navpath.1 = TMENU
temp.navpath.1.target = _top
temp.navpath.1.wrap = <div class="crumbler" id="crumblermenu"><ul>|</ul></div>
temp.navpath.1.NO {
  linkWrap = <li>|</li>
}
temp.navpath.1.ACT=1
temp.navpath.1.ACT {
  linkWrap = <li>|</li>
}
temp.navpath.1.CUR=1
temp.navpath.1.CUR {
  linkWrap = <li>|</li>
}

[treeLevel = 0,1,2,3,4,5]
temp.navpath.1.NO.ATagParams
=rel="dropmenu1"|*|rel="dropmenu2"|*|rel="dropmenu3"
temp.navpath.1.ACT.ATagParams =rel="dropmenu1"
style="color:red"|*|rel="dropmenu2"
style="color:red"|*|rel="dropmenu3" style="color:red"
temp.navpath.1.CUR.ATagParams =rel="dropmenu1"
style="color:red"|*|rel="dropmenu2"
style="color:red"|*|rel="dropmenu3" style="color:red"

lib.menu1 < temp.navpath

# Vertical dropmenus #############################

temp.dropmenu1a = HMENU
temp.dropmenu1a {
  special = directory
  special.value = 275
  1 = TMENU
  1{
    wrap = <ul>|</ul>
    NO.allWrap = <li> | </li>
    ACT = 1
    ACT.allWrap = <li> | </li>
    SPC = 1
    SPC.allWrap = <li class="dmheader"> | </li>
  }
}
lib.dropmenu1a < temp.dropmenu1a

temp.dropmenu1b = HMENU
temp.dropmenu1b {
  special = directory
  special.value = 278
  1 = TMENU
  1{
    wrap = <ul>|</ul>
    NO.allWrap = <li> | </li>
    ACT = 1
    ACT.allWrap = <li> | </li>
    SPC = 1
    SPC.allWrap = <li class="dmheader"> | </li>
  }
}
lib.dropmenu1b < temp.dropmenu1b

temp.dropmenu1c = HMENU
temp.dropmenu1c {
  special = directory
  special.value = 276
  1 = TMENU
  1{
    wrap = <ul>|</ul>
    NO.allWrap = <li> | </li>
    ACT = 1
    ACT.allWrap = <li> | </li>
    SPC = 1
    SPC.allWrap = <li class="dmheader"> | </li>
  }
}
lib.dropmenu1c < temp.dropmenu1c

temp.dropmenu2a = HMENU
temp.dropmenu2a {
  special = directory
  special.value = 285
  1 = TMENU
  1{
    wrap = <ul>|</ul>
    NO.allWrap = <li> | </li>
    ACT = 1
    ACT.allWrap = <li> | </li>
    SPC = 1
    SPC.allWrap = <li class="dmheader"> | </li>
  }
}
lib.dropmenu2a < temp.dropmenu2a

temp.dropmenu2b = HMENU
temp.dropmenu2b {
  special = directory
  special.value = 284
  1 = TMENU
  1{
    wrap = <ul>|</ul>
    NO.allWrap = <li> | </li>
    ACT = 1
    ACT.allWrap = <li> | </li>
    SPC = 1
    SPC.allWrap = <li class="dmheader"> | </li>
  }
}
lib.dropmenu2b < temp.dropmenu2b

temp.dropmenu2c = HMENU
temp.dropmenu2c {
  special = directory
  special.value = 232
  1 = TMENU
  1{
    wrap = <ul>|</ul>
    NO.allWrap = <li> | </li>
    ACT = 1
    ACT.allWrap = <li> | </li>
    SPC = 1
    SPC.allWrap = <li class="dmheader"> | </li>
  }
}
lib.dropmenu2c < temp.dropmenu2c

temp.dropmenu3a = HMENU
temp.dropmenu3a {
  special = directory
  special.value = 292
  1 = TMENU
  1{
    wrap = <ul>|</ul>
    NO.allWrap = <li> | </li>
    ACT = 1
    ACT.allWrap = <li> | </li>
    SPC = 1
    SPC.allWrap = <li class="dmheader"> | </li>
  }
}
lib.dropmenu3a < temp.dropmenu3a

temp.dropmenu3b = HMENU
temp.dropmenu3b {
  special = directory
  special.value = 291
  1 = TMENU
  1{
    wrap = <ul>|</ul>
    NO.allWrap = <li> | </li>
    ACT = 1
    ACT.allWrap = <li> | </li>
    SPC = 1
    SPC.allWrap = <li class="dmheader"> | </li>
  }
}
lib.dropmenu3b < temp.dropmenu3b

temp.dropmenu3c = HMENU
temp.dropmenu3c {
  special = directory
  special.value = 290
  1 = TMENU
  1{
    wrap = <ul>|</ul>
    NO.allWrap = <li> | </li>
    ACT = 1
    ACT.allWrap = <li> | </li>
    SPC = 1
    SPC.allWrap = <li class="dmheader"> | </li>
  }
}
lib.dropmenu3c < temp.dropmenu3c

temp.dropmenu4 = HMENU
temp.dropmenu4 {
  entryLevel = 5
  1 = TMENU
  1{
    wrap = <ul>|</ul>
    NO.allWrap = <li> | </li>
    ACT = 1
    ACT.allWrap = <li> | </li>
    SPC = 1
    SPC.allWrap = <li class="dmheader"> | </li>
  }
}
lib.dropmenu4 < temp.dropmenu4

temp.dropmenu5 = HMENU
temp.dropmenu5 {
  entryLevel = 6
  1 = TMENU
  1{
    wrap = <ul>|</ul>
    NO.allWrap = <li> | </li>
    ACT = 1
    ACT.allWrap = <li> | </li>
    SPC = 1
    SPC.allWrap = <li class="dmheader"> | </li>
  }
}
lib.dropmenu5 < temp.dropmenu5


Bye,
Vincent