Implementation des DHTML Menüs von brainjar.com mit typoscript ( So schauts aus )

Auf der Brainjar Webseite www.brainjar.com aus "Revenge of the Menu Bar" das Javascript und das CSS herunterladen und unter "fileadmin/brainjarmenu.js" bzw fileadmin/brainjarmenu.css" speichern.

Im Setup folgendes eintragen:

# --- 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" />

Dieses Snippet wurde von Peter Klein eingesendet.

Comments

Marc, 14-09-09 14:27:

---

Danke! So etwas habe ich schon so lange gesucht! Ihr seid meine Rettung!!!!!!!

Tim, 23-09-09 11:54:

---

Wie binde ich das Menü in folgendes Template ein?

page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/styles.css
page.20 = TEMPLATE
page.20 {
template = FILE
template.file = fileadmin/vorlage.html
workOnSubpart = document
subparts.inhalt < styles.content.get

subparts.LAST_CHANGE = TEXT
subparts.LAST_CHANGE.field = tstamp
subparts.LAST_CHANGE.strftime = %d.%m.%y, um %H:%M
subparts.LAST_CHANGE.wrap = |

subparts.navigation = TEXT
subparts.navigation.wrap = <div class="menuBar" style="width:100%;">|</div>
}
page.headerData = COA
page.headerData.1 = TEXT
page.headerData.1.value = <script type="text/javascript" src="fileadmin/drucken.js"></script>
page.headerData.2 = TEXT
page.headerData.2.value = <script type="text/javascript" src="fileadmin/brainjarmenu.js"></script>
page.headerData.3 = TEXT
page.headerData.3.value = <link rel="stylesheet" media="print" href="fileadmin/druckvorschau.css" type="text/css" />

Kommentar hinzufügen

* - Pflichtfeld

Vorname: *
Nachname:
E-Mail:
Den Code eingeben:

*

Text: *