Zum Inhalt springen

Breadcrumb-Menü mit Selectboxen

Erstellt am 26. Juni 2009 · 2 Antworten · letzte Antwort am 7. Juli 2009

Tags: Frage

ristic ·

Hi Leute,

versuche gerade ein Breadcrumb-Menü mit Selectboxen umzusetzen. Aufbauend auf dem Dropdownmenü-Beispiel von hier: #65143

Hab es ein wenig umgebaut, aber so funktioniert es leider nicht wirklich.

temp.breadCrumb= HMENU
temp.breadCrumb {
	entryLevel = 1
	expAll = 1
	
	1 = TMENU
	1 { 
	  wrap = <form action=""><select onchange="window.location=this.options[this.selectedIndex].value">|</select></form>

		NO {
			doNotLinkIt = 1
			stdWrap.cObject = COA
			stdWrap.cObject {
				10 = TEXT
				10 {
				  
					wrap = <option value="{getIndpEnv:TYPO3_SITE_URL}|">
					insertData = 1
					typolink {
						parameter.field = uid
						returnLast = url
					}
				}

				20 = TEXT
				20 {
					field = subtitle//title
					wrap =  |</option>
				}
 	 		}
		}

		CUR <.NO
	  CUR = 1
		CUR {	
			stdWrap.cObject.10.wrap = <option selected="selected" value="{getIndpEnv:TYPO3_SITE_URL}|"> 
		}
	}
}

falls ich die zweite Navigation vererbe spuckt er mir folgenden HTML-Code aus.

<form action="">
	<select onchange="window.location=this.options[this.selectedIndex].value">
    	<option value="url">LINK</option>
        <option selected="selected" value="url">LINKUNTERMENÜ</option>
        
        <form action="">
        	<select onchange="window.location=this.options[this.selectedIndex].value">
            	<option value="url">LINK</option>
                <option value="url">LINK</option>
             </select>
         </form>
         
         <option value="url">LINK</option>
         <option value="url">LINK</option>
     </select>
</form>

Was natürlich gar nicht geht. Eigentlich sollte die erste Selectbox mit allen Punkten ausgegeben werden und falls das LINKUNTERMENÜ ausgewählt wird, eine neue Selectbox daneben erscheinen, mit allen weiteren Navigationspunkten usw.

Noch mal zum Verständnis ein kleiner Screener.
Bild: release.techdivision.com/…/breadcrumb.jpg

Wäre super wenn ihr mir weiterhelfen könnt.

ristic ·

Bisher bin ich noch nicht viel weitergekommen. Aber ich denke auf dem richtigen Weg bin ich schonmal.

if.isTrue.numRows {
  table = pages
  select {
    pidInList.data = {page:uid}
  }
  # Falls eine Seite mit Unterseiten vorhanden, und diese aktiv ist, sollte eine neue Selectbox erzeugt werden
 }
}

Wo und wie ich das genau einbaue ist die Frage? #angry# Hab schon einiges Probiert.

Jedenfalls das Ganze dann mit diesem Splitmenü kombinieren...
http://www.typo3wizard.com/de/snippets/menus/menue-dynamisch-in-2-teile-aufteilen.html

Vielleicht wisst ihr mehr?

ristic ·

Hi Leute,

letztendlich konnte ich mir die Antwort wieder selbst geben.

Hier der Code vielleicht braucht ihn ja mal jemand. Und evtl. kann/will ihn ja noch jemand verkürzen. 😃 Ab Level 2 im Menü geht es los, was vom Kunden so gewünscht war.

temp.breadCrumb = COA
temp.breadCrumb {
  10 = HMENU
  10 {
    entryLevel = 1
    wrap = <form id="level1" action=""><p>|</p></form>
    
    1 = TMENU
    1 {
    	wrap = <select name="id" onChange="window.location=this.options[this.selectedIndex].value">|</select>
    	NO = 1
    	NO {
    		doNotLinkIt = 1
    		stdWrap.cObject = COA
    		stdWrap.cObject {
    			10 = TEXT
					10 {
						wrap = <option value="{getIndpEnv:TYPO3_SITE_URL}|">
						insertData = 1
						typolink {
							parameter.field = uid
							returnLast = url
						}
					}
					
    			20 = TEXT
					20 {
						field = subtitle//title
						wrap =  |</option>
					}
    		}
    	}
    	ACT < .NO
    	ACT {
    		stdWrap.cObject.10 {
    			wrap = <option selected="selected" value="{getIndpEnv:TYPO3_SITE_URL}|"> 
    		}
    	}
    }
  }
  20 < .10
  20 {
  	entryLevel = 2
  	wrap = <form id="level2" action=""><p>|</p></form>
  	
  	1 {
  		NO {
  			stdWrap.cObject {
  				10 = TEXT
					10 {
						wrap = <option value="{getIndpEnv:TYPO3_SITE_URL}|">
						insertData = 1
						typolink {
							parameter.field = uid
							returnLast = url
						}
					}
					20 = TEXT
					20 {
						field = subtitle//title
						wrap =  |</option>
					}
				}
  		}
  		ACT {
  			stdWrap.cObject.10 {
    			wrap = <option selected="selected" value="{getIndpEnv:TYPO3_SITE_URL}|"> 
    		}
  		}
  	}
  }
  30 < .10
  usw...
}

Eine "action" brauchen wir hier nicht, da das Ganze mit JavaScript passiert. "id="level1"" ist für die Ausrichtung mit CSS, das man die Geschichte auch Floaten kann. Voilà hat man eine schöne SelectBoxBreadcrumb wie auf dem Screenshot.