Aufklappbares Menü

Unbekannter Benutzer · 5. März 2007 13:15

Hallo Comunity!

Ich bin auf der suche nach einem Aufklappbaren Textmenü.
Sollte für einen Newbie leicht zu implementieren sein!

Villeicht hat jemand einen heissen Tipp für mich?

M.f.g.
Leo

ArminB · 5. März 2007 13:42

moin,

entweder mit TEMNU_LAYER oder das ypmenu
http://typo3.intervation.de/snippets/menues/ypslideoutmenu.html

Armin

Unbekannter Benutzer · 6. März 2007 06:54

THX!

Was ich zu erwähnen vergessen hatte:

Ich suche ein vertikalem Menü.

Villeicht hat noch jemand einen Link für mich?

M.f.g.
Leo

just2b · 6. März 2007 07:25

Hallo,

such mal nach google nach vertikalen Listenmenüs, das ist eigentlich wenig Sache von TYPO3 sondern mehr von CSS!
Ein paar Bsp auch auf meiner Seite: http://www.just2b.com/mein-typo3/css-ts-menues.html

georg

Unbekannter Benutzer · 6. März 2007 07:41 · Beste Antwort

danke just2b!

Soweit eigentlich alles klar, nur wo muss das Javascript hin?
...im Head vom Template?

M.f.g.
Leo

just2b · 6. März 2007 07:57

nein einfach per TS mit page.headerData einbinden

georg

Unbekannter Benutzer · 6. März 2007 10:18

Könnte mir das jemand genauer erläutern?

THX!

Unbekannter Benutzer · 6. März 2007 10:50

Irgentwie komme ich leider nicht weiter...

Am liebsten hätte ich mein derzeitiges Menü,
und würde dies 'klappbar' machen! Wer kann helfen?

Mein derzeitiges Menü:

# ------------------------------------------------------------------MENU

subparts.menu = HMENU
subparts.menu {
  entryLevel = 0
     1 = TMENU
     1 {
        wrap = | 
        expAll = 1
        IFSUB = 1
        IFSUB.allWrap = <br>|<br>
        IFSUB.ATagParams = class="link"
        NO.linkWrap = <br>|<br>
        NO.ATagParams = class="link"
}
     2 = TMENU
     2 {
       wrap =  |
       expAll = 1
       IFSUB = 1
       IFSUB.allWrap = |
       NO {
          linkWrap = &nbsp;&nbsp;|<br>
          ATagParams = class="navi"
}          
RO = 1
             }
       }

      3 < .2
      4 < .2
      5 < .2
      6 < .2

M.f.g.
Leo

Unbekannter Benutzer · 6. März 2007 14:36

Hallo just2b!

Ich versuche mich hoffnungslos an deinem Script!
Villeicht hättest du die zeit un könntest mir beim einpflegen helfen?

1. die vertikal_JS.js mit chmod auf fileadmin/template_neu
2. Eingebunden mit: (nur wo?)

headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/template_neu/vertikal_JS.js"></script>

3. Einfügen der Menüführung:

marks.MENU = HMENU
marks.MENU {
	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB

	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}

Anschliessend mein TS Setup:

# ------------------------------------------------------------------SPRACHAUSWAHL

# SprachVariable L initialisieren 
config.linkVars = L 

# Standardsprache UID 0 -> German
config.sys_language_uid = 0 
config.language = de
config.locale_all = de_DE

# weitere Sprache UID 1 -> English
[globalVar = GP:L = 1] 
config.sys_language_uid = 1
config.language = en
config.locale_all = english
[global]

# ------------------------------------------------------------------MAIN

page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/template_neu/audiomobil.css
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/template_neu/template.htm
workOnSubpart = DOCUMENT_BODY

subparts.content < styles.content.get
subparts.content.select.orderBy = sorting
subparts.content_right < styles.content.getRight
subparts.content_right.select.orderBy = sorting
subparts.content_left < styles.content.getLeft
subparts.content_left.select.orderBy = sorting

subparts.lang_menu = PHP_SCRIPT
subparts.lang_menu.file = fileadmin/scripts/langmenu.php

# ------------------------------------------------------------------IMG HEADER1

subparts.IMGHEADER1 = COA
subparts.IMGHEADER1 {
  10 = IMAGE
  10.file.maxW = 145
  10.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/am.jpg
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 0
    }
  }
  10.wrap = |
}

# ------------------------------------------------------------------IMG HEADER2

subparts.IMGHEADER2 = COA
subparts.IMGHEADER2 {
  10 = IMAGE
  10.file.maxW = 492
  10.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/home-header.gif
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 1
    }
  }
  10.wrap = |
}

# ------------------------------------------------------------------IMG RIGHT1

subparts.IMGRIGHT1 = COA
subparts.IMGRIGHT1 {
  11 = IMAGE
  11.file.maxW = 145
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/dummy.gif
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 2
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------IMG RIGHT2

subparts.IMGRIGHT2 = COA
subparts.IMGRIGHT2 {
  11 = IMAGE
  11.file.maxW = 145
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/home-rechts.jpg
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 3
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------IMGCONTENT

subparts.IMGCONTENT = COA
subparts.IMGCONTENT {
  11 = IMAGE
  11.file.maxW = 492
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/content.gif
    cObject.override {
      required = 0
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 4
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------MENU

subparts.menu = HMENU
subparts.menu {
  entryLevel = 0
     1 = TMENU
     1 {
        wrap = | 
        expAll = 1
        IFSUB = 1
        IFSUB.allWrap = <br>|<br>
        IFSUB.ATagParams = class="link"
        NO.linkWrap = <br>|<br>
        NO.ATagParams = class="link"
}
     2 = TMENU
     2 {
       wrap =  |
       expAll = 1
       IFSUB = 1
       IFSUB.allWrap = |
       NO {
          linkWrap = &nbsp;|<br>
          ATagParams = class="navi"
}          
RO = 1
             }
       }

      3 < .2
      4 < .2
      5 < .2
      6 < .2

}

...und Jetzt die Bitte meinen CODE anzupassen! THX!

just2b · 6. März 2007 14:39

Hallo,

irgendwo in dein TS (nicht innerhalb von irgendwelchenm {} )ein

page {
headerData...
}

und statt marks.MENU kannst du subparts.MENU schreiben und dann brauchst halt noch den subpart in deinem template und das TS fürs MENnü gehört zur Definition deiner anderen subparts

georg

Unbekannter Benutzer · 6. März 2007 15:12

Meine Derzeitige Config:
(Leider klappt noch nichts ein od. aus!)

# ------------------------------------------------------------------SPRACHAUSWAHL

# SprachVariable L initialisieren 
config.linkVars = L 

# Standardsprache UID 0 -> German
config.sys_language_uid = 0 
config.language = de
config.locale_all = de_DE

# weitere Sprache UID 1 -> English
[globalVar = GP:L = 1] 
config.sys_language_uid = 1
config.language = en
config.locale_all = english
[global]

# ------------------------------------------------------------------MAIN
page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/template_neu/audiomobil.css
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/template_neu/template.htm
workOnSubpart = DOCUMENT_BODY

subparts.content < styles.content.get
subparts.content.select.orderBy = sorting
subparts.content_right < styles.content.getRight
subparts.content_right.select.orderBy = sorting
subparts.content_left < styles.content.getLeft
subparts.content_left.select.orderBy = sorting

subparts.lang_menu = PHP_SCRIPT
subparts.lang_menu.file = fileadmin/scripts/langmenu.php

# ------------------------------------------------------------------IMG HEADER1

subparts.IMGHEADER1 = COA
subparts.IMGHEADER1 {
  10 = IMAGE
  10.file.maxW = 145
  10.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/am.jpg
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 0
    }
  }
  10.wrap = |
}

# ------------------------------------------------------------------IMG HEADER2

subparts.IMGHEADER2 = COA
subparts.IMGHEADER2 {
  10 = IMAGE
  10.file.maxW = 492
  10.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/home-header.gif
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 1
    }
  }
  10.wrap = |
}

# ------------------------------------------------------------------IMG RIGHT1

subparts.IMGRIGHT1 = COA
subparts.IMGRIGHT1 {
  11 = IMAGE
  11.file.maxW = 145
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/dummy.gif
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 2
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------IMG RIGHT2

subparts.IMGRIGHT2 = COA
subparts.IMGRIGHT2 {
  11 = IMAGE
  11.file.maxW = 145
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/home-rechts.jpg
    cObject.override {
      required = 1
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 3
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------IMGCONTENT

subparts.IMGCONTENT = COA
subparts.IMGCONTENT {
  11 = IMAGE
  11.file.maxW = 492
  11.file.import {
    cObject = TEXT
    cObject.value = fileadmin/template_neu/img/content.gif
    cObject.override {
      required = 0
      data = levelmedia: -1 "slide"
      wrap = uploads/media/ |
      listNum = 4
    }
  }
  11.wrap = |
}

# ------------------------------------------------------------------MENU

page{
headerData = COA
headerData.11 = TEXT
headerData.11.value = <script type="text/javascript" src="fileadmin/template_neu/vertikal_JS.js"></script>
}

subparts.menu = HMENU
subparts.menu {
        1 = TMENU
        1 {
                expAll = 1
                wrap = <ul id="nav">|</ul>
                noBlur = 1
                NO = 1
                NO.wrapItemAndSub = <li>|</li>
 
                IFSUB = 1
                IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
                ACTIFSUB < .IFSUB
 
        }
        2 < .1  
        2.wrap = <ul>|</ul>
 
        3 < .2
        4 < .2
} 

}

just2b · 6. März 2007 15:20

man betone mein

irgendwo in dein TS (nicht innerhalb von irgendwelchen {} )ein

...

georg

Unbekannter Benutzer · 6. März 2007 16:36

Ups! *sorry*
Habs mittlerweile am laufen (!)

TOLLES MENÜ! RESPECKT!

Meine letzte Frage:
Wie muss dass css ausschauen, damit der aktieve Link gekennzeichnet wird?

THX!
Leo

thorty · 5. Februar 2008 08:51

Hallo just2b,

Habe auch mal das Beispiel aus deiner Seite verwendet. Allerdings funktioniert es bei mir im IE 6 nicht. Ich verwende extension-templates, die ich dann zu einem Template zusammen setzt.

Hier mal das TS zu meinem menü:

temp.menue = HMENU
temp.menue {
	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB

	}
	2 < .1	
	2.wrap = <ul>|</ul>

	3 < .2
	4 < .2
}

Hier mein main-template:

# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
    # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1
    # Select only the content between the <body>-tags
  workOnSubpart = DOCUMENT_BODY
    # Substitute the ###menue### subpart with dynamic menu:
  subparts.menue < temp.menue
    # Substitute the ###content### subpart with some example content:
  subparts.content < styles.content.get
}

# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
    # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1
    # Select only the content between the <head>-tags
  workOnSubpart = DOCUMENT_HEADER
}

# Default PAGE object:
page = PAGE
page {
	headerData = COA
	headerData.11 = TEXT
	headerData.11.value = <script type="text/javascript" src="fileadmin/includes/vertikal_JS.js"></script>
}
page.config.doctype = xhtml_trans
page.typeNum = 0
# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate
# Copying the content from TEMPLATE for <head>-section:
page.headerData.10  < temp.headTemplate

und hier was in der vertikal_JS.js steht:

function IEHoverPseudo() {
 
	var navItems = document.getElementById("nav").getElementsByTagName("li");
	
	for (var i=0; i<navItems.length; i++) {
		if(navItems[i].className == "menuparent") {
			navItems[i].onmouseover=function() { this.className += " over"; }
			navItems[i].onmouseout=function() { this.className = "menuparent"; }
		}
	}
 
}
window.onload = IEHoverPseudo;

die JS-Datei wird auch korrekt angesprochen, dies habe ich bereits im Quellcode des Browsers nachgesehen.
Kann mir hier bitte jemand helfen? ich komm nicht weiter.

Gruß,
thorty