Implementation of the DHTML menu from brainjar.com, using plain Typoscript to generate the code.Click here for example.

Go to the Brainjar website www.brainjar.com, save the javascript as "fileadmin/brainjarmenu.js" and the CSS as "fileadmin/brainjarmenu.css" (article: "Revenge of the Menu Bar").

Then in your SETUP enter this:

# --- Brainjar menu begin ---
temp.brainjarmenu = COA
temp.brainjarmenu {
  # ---------------------------------------
  # Typoscript implementation of the DHTML
  # menu found at http://www.brainjar.com
  # ---------------------------------------
  10 = HMENU
  10.entryLevel = 0
  10.1 = TMENU
  10.1 {
    wrap = <div class="menuBar" style="width:80%;">|</div>
    NO.ATagParams = class="menuButton"
    IFSUB = 1
    IFSUB.doNotLinkIt = 1
    IFSUB.subst_elementUid = 1
    IFSUB.allWrap = <a class="menuButton" href="#" onclick="return buttonClick(event, 'menu{elementUid}');" onmouseover="buttonMouseover(event, 'menu{elementUid}');">|</a>
  }
   
  20 < .10
  20.1 >
  20.1 = TMENU
  20.1 {
    expAll = 1
    NO.doNotLinkIt = 1
    NO.doNotShowLink = 1
    IFSUB < .NO
    IFSUB = 1
    IFSUB.subst_elementUid = 1
    IFSUB.allWrap = <div id="menu{elementUid}" class="menu" onmouseover="menuMouseover(event)">|
    IFSUB.wrapItemAndSub = |</div>
  }
  20.2 = TMENU
  20.2 {
    NO.ATagParams = class="menuItem"
    IFSUB = 1
    IFSUB.doNotLinkIt = 1
    IFSUB.subst_elementUid = 1
    IFSUB.allWrap = <a class="menuItem" href="#" onclick="return false;" onmouseover="menuItemMouseover(event, 'menu{elementUid}');"><span class="menuItemText">|</span><span class="menuItemArrow">&#9654;</span></a>
    SPC = 1
    SPC.doNotLinkIt = 1
    SPC.doNotShowLink = 1
    SPC.allWrap = <div class="menuItemSep"></div>
  }
   
  30 < .10
  30.1 >
  30.1 = TMENU
  30.1 {
    expAll = 1
    NO.doNotLinkIt = 1
    NO.doNotShowLink = 1
  }
  30.2 < .20.1
  30.3 < .20.2
   
  40 < .10
  40.1 >
  40.1 < .30.1
  40.2 < .30.1
  40.3 < .20.1
  40.4 < .20.2
   
  50 < .10
  50.1 >
  50.1 < .30.1
  50.2 < .30.1
  50.3 < .30.1
  50.4 < .20.1
  50.5 < .20.2
}

# --- Brainjar menu end ---

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 < temp.brainjarmenu
page.headerData.1 = TEXT
page.headerData.1.value = <SCRIPT LANGUAGE="JavaScript" SRC="fileadmin/brainjarmenu.js"></SCRIPT>
page.headerData.2 = TEXT
page.headerData.2.value = <link href="fileadmin/brainjarmenu.css" rel="stylesheet" type="text/css" />

this Snippet was submitted by Peter Klein

Comments

Franck, 17-03-09 19:13:

---

Hi
congratulation for the tuto !
I try try to use it with templavoila
sommebody can help me?
thanks
franck

Peter, 22-03-09 21:56:

---

Change "temp.brainjarmenu" into "lib.brainjarmenu", then it should work with TemplaVoila.

Add comment

* - required field

First name: *
Last name:
E-mail:
Enter the code:

*

Content: *