Zum Inhalt springen

Dynamisches horizontales Untermenü mit Ultimate Dropdown!

Erstellt am 17. Januar 2007 · 20 Antworten · letzte Antwort am 19. Februar 2007 · Seite 1 von 2

Tags: HTML & CSS, Frage

flashsilver ·

dann erscheint gar nichts mehr! muss also directoy benutzen, der quelltext sieht so aus:

<div id="subnavigation">
	<ul id="menu2"><li><a href="index.php?id=Seite3a" title="Seite3a" class = "aktuell">Seite3a</a></li><li><a href="index.php?id=Seite3b" title="Seite3b" class = "aktuell">Seite3b</a></li></ul>
</div>
just2b ·
flashsilver schrieb

dann erscheint gar nichts mehr! muss also directoy benutzen, der quelltext sieht so aus:

oder deine seitenstruktur ganz einfach umbauen

flashsilver ·

Was soll den an so einer Struktur falsch sein?

Seite1
Seite2
Seite3
-->Seite3a
---->Seite3a_1
---->Seite3a_2
---->Seite3a_3
-->Seite3b
---->Seite3b_1
---->Seite3b_2
Seite4
Seite5

Wie gesagt Seite3a und Seite 3b werden als Unternaviagtion von Seite3 angezeigt,
nur die 3 bzw. 2 Unterpunkte von Seite3a bzw. Seite3b halt nicht #paralyzed#

flashsilver ·

hab ich vergessen zu sagen ich gehe im moment von Seite3 aus sprich special.value = 4 bezeiht sich auf Seite3. Dort soll er anfangen, dann muss cih doch nur die erste und zweite ebene einfügen. is schon so richtig, nur die 2te wird die in erwägen gezogen . wenn ich id = 11 sprich Seite3a nehme, dann werden die seiten seite3a_1 etc angezeigt. deshalb kommt mir das ja alles so merkwürdig vor

Ich werd mich nachher bzw heut abned nochmal dran setzen, aber erstma dnke für deine hilfe

flashsilver ·

so hab mal wider einigees ausprobiert, hab es mal ohne special probiert, aber auch mal special = list gesetzt etc. half alles nix. Hab es dann mal mit entryLevel = -1 ausprobiert, funktioniert auch nicht. Leigt es am TemplateVoila? Ich benutze die aktuelle Version.
Hab jetzt den Seite1, Seite2 etc eine eeigene Template angelegt und da verscuht ein menü aufzubauen, aber auch hier komme ich über die erste Menüebene nicht hinaus, ich versteh nicht was am folgenden TS so flasch sein kann, hab jetzt schon hin und her probeirt und weiß da echt nicht mehr weiter...

lib.subnavi = HMENU
lib.subnavi {
	entryLevel = -1
	#special = list
	#special.value = 10, 11
	wrap = <ul id="menu2">|</ul>
	1 = TMENU
	1 {
		NO = 1
		NO.ATagTitle.field = title//subtitle
		NO.ATagParams = class = "aktuell"
		NO.wrapItemAndSub = <li>|</li>
		noBlur = 1
		collapse = 1
	}
	
	2 = TMENU
	2 {
		IFSUB = 1
		IFSUB {
			allWrap = <ul><span>|</span></ul>
			ATagTitle.field = title//subtitle
			wrapItemAndSub = <li>|</li>
		}
		ACTIFSUB < .IFSUB
		#wrap = <ul><span>|</span></ul>
		#NO = 1
		#NO.ATagTitle.field = title//subtitle
		#NO.wrapItemAndSub = <li>|</li>
	}
}

die id's 10, 11 sind Unterseiten von Seite3, die auch korrekt angezeigt werden, wie auch bei entryLevel, nur dessen Unterseiten werden nie angezeigt.
Hoffe mir kann da mal einer weiter helfen, die ideen vvon just2b hab ich alle ausprobiert

flashsilver ·

So hab es geschafft, dass das menü aufklappt 🙂
Nun wollte ich das ganze in eine Farbnavigation umändern, sprich wenn man

Seite1 Seite2 Seite3 Seite4 Seite5

anklickt soll sich die Hintergrundfarbe des div-containers ändern
(siehe HTML-Code auf erste Seite

<div id="subnavigation"></div>

Diese hab ich per TemplaVoila angewählt, das dort das Menü eingesetzt werden
soll. Jetzt funktioniert das mit dem aufklappen nicht mehr, obwohl ich folgenden
TS-Code erfolgreich war, aber da hatte ich nicht den div-container, sondern direkt die unsortierte Liste angewählt, deshalb ist die einzige änderung im TS,
das ich per wrap = <ul id="menu2">|</ul> die unsortierte Liste eingefügt habe, sonst nix!
Hier das TS,was auch funzt:

lib.subnavi = HMENU
lib.subnavi {
	#
        special = directory
        special.value = 5
        ###Hier diese Zeile auskommentieren!!!###
        wrap = <ul id="menu2">|</ul>
        ### Hauptmenue
        1 = TMENU
        1 {
            #wrap = <ul> | </ul>
                expAll = 1
                noBlur = 1

                NO.ATagTitle.field = title//subtitle
                NO.ATagParams = class = "aktuell"
                NO.wrapItemAndSub = <li> | </li>
               
                IFSUB = 1
                IFSUB {
                        wrapItemAndSub = <li> | </li>
                        allWrap = | <!--<![endif]-->
                        linkWrap = |<!--[if IE 7]><!-->
                        ATagBeforeWrap = 1
                }
        }
        
        2 = TMENU
        2 {
                #wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE 6]></a><![endif]-->
		wrap = <ul><span> | </span></ul>
                expAll = 1
                noBlur = 1
                
                NO.ATagTitle.field = title//subtitle
                NO.wrapItemAndSub = <li> | </li>

                IFSUB = 1
                IFSUB {
                        wrapItemAndSub = <li> | </li>
                        allWrap = | <!--<![endif]-->
                        linkWrap = |<!--[if IE 7]><!-->
                        ATagBeforeWrap = 1
                }
        }
        3 < .2
        4 < .2
}
flashsilver ·

Die Farbnavigation hab ich mittlerweile hinbekommen, aber das Menü klappt nicht mehr auf, obwohl die Seiten im Quellcode stehen.

Scheiß IE 6 & 7, denn der Firefox macht es ganz brav 🙂
Habe auch ein javascript kopiert und eingebunden mit:

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.includeCSS {
	file1 = fileadmin/css/style.css
	file1.media = screen
	file2 = fileadmin/css/search.css
	file2.media = screen
	file3 = fileadmin/css/login.css
	file3.media = screen
}
page.headerData = COA
page.headerData.11 = TEXT
page.headerData.11.value = <script type="text/javascript" src="fileadmin/javascript/ie6hover.js"></script> 
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page

In der javascript steht folgendes, was offline auch funktioniert hat!

// JavaScript Document
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("menu2").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}

Der CSS-Code sieht für das Menü folgendermaßen aus:

/* Die Subnavigation */
div#subnavigation div{
clear:left;
}

  ul#menu2 {
    margin: 0; padding: 0;
    text-align: left;
    /*background-color:#9999FF;*/
  }

  ul#menu2 li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0; padding: 0;
  }
  * html ul#menu2 li {  /* Korrektur fuer den IE */
    margin-bottom: -0.4em;
  }

  ul#menu2 li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.9em; left: -0.8em;
    display: none;  /* Untermenu2 ausblenden */
  }
  * html ul#menu2 li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  ul#menu2 li:hover ul {
    display: block;  /* Untermenu2 in modernen Browsern einblenden */
  }
  ul#menu2 li ul li {
    float: none;
    display: block;
	margin-left:-1.2em;
	margin-bottom:0.2em;
	margin-top:-0.3em;
	border-top:1px solid #fff;
	width:180px;
  }
  
    ul#menu2 li ul li a:hover{
        background:#BFBFFF;
	width:180px;
  }

  ul#menu2 a, ul#menu2 span {
    display: block;
    width: 100%;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.1em 0em;
    text-decoration: none;
    color:#000000;
  }
  * html ul#menu2 a, * html ul#menu2 span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell f&uuml;r IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  ul#menu2 li a:hover {
    text-decoration:underline;
	color:#000000;
  }
  
  ul#menu2 span a:hover {
    /*background-color:#BFBFFF;*/
	text-decoration:none;
	color:#000000;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color:#000000;
    text-decoration:underline;	
  }
  ul#menu2 li ul span a{  /* aktuelle Unterseite kennzeichnen */
    
	width:180px;
	padding-left:10px;
  }

Mein TypoScript sieht so aus, um das Untermenü einzubinden:

lib.subnavi = HMENU
lib.subnavi {
	#
        special = directory
        special.value = 3
        wrap = <div class="fest"><ul id="menu2"> | </div></ul>
        ### Hauptmenue
        1 = TMENU
        1 {
            #wrap = <ul> | </ul>
                expAll = 1
                noBlur = 1

                NO.ATagTitle.field = title//subtitle
                NO.ATagParams = class = "aktuell"
                NO.wrapItemAndSub = <li> | </li>
               
                IFSUB = 1
                IFSUB {
                        wrapItemAndSub = <li> | </li>
                        allWrap = | <!--<![endif]-->
                        linkWrap = |<!--[if IE 7]><!-->
                        ATagBeforeWrap = 1
                }
        }
        
        2 = TMENU
        2 {
                #wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE 6]></a><![endif]-->
		wrap = <ul><span style="background-color:#fb9d00"> | </span></ul>
                expAll = 1
                noBlur = 1
                
                NO.ATagTitle.field = title//subtitle
                NO.wrapItemAndSub = <li> | </li>

                IFSUB = 1
                IFSUB {
                        wrapItemAndSub = <li> | </li>
                        allWrap = | <!--<![endif]-->
                        linkWrap = |<!--[if IE 7]><!-->
                        ATagBeforeWrap = 1
                }
        }
        3 < .2
        4 < .2
}

Tipp: In der wrap-zeile unter special.value binde ich die klasse ein, die die jeweiligen hintergrundfarbe des containers beinhaltet, z.B. für den Menüpunkt aus der ersten Ebene Feste.

Ist das ein Typo3 oder doch eher ein IE - Problem, warum das Menü nicht ausklappt? Wie gesagt im html-code stehen die Unterseiten bereit und wenn ich in der CSS-datei probehalber display:none in display:blockändere zeigt der IE es auch brav an, nur ich will es halt erst bei einem mouseover!

just2b ·

ehrlich gesagt nur überflogen, aber das ist mal falsch geschachtelt:

wrap = <div class="fest"><ul id="menu2"> | </div></ul>

besser wohl

wrap = <div class="fest"><ul id="menu2"> | </ul></div>

georg

flashsilver ·

danke für den hinweis :o , nach stunden des suchens ist mir dieser fehler gar nicht aufgefallen, aber es hat nix bewirkt, der IE weigert sich immer noch...

Es hat mal kurz funktioniert, aber da hatte ich über TemplaVoila den Punkt zum ersetzten direkt auf die <ul id="menu2">... gesetzt, jetzt sitzt der Einstiegspunkt auf dem div-container <div id="subnavigatio">... und seitdem funktioniert es im IE nicht mehr, abe am TV kann es nicht liegen, weil ja die Seiten die im dropdown-menü erscheinen sollen ja auch im quellcode stehen, als Beispiel die erste Menüebene Event, hat 2 Unterpunkte, die widerrum jeweils 3 Unterpunkte haben die dann in dem dropdown erschienen sollen, so spuckt der IE den Quellcode aus:

<div id="subnavigation"><div class="event"><ul id="menu2"><li><a href="index.php?id=anlaesse">Anlässe<!--[if IE 7]><!--></a><!--<![endif]--><ul><span><li><a href="index.php?id=marketingevent" title="Marketingevent">Marketingevent</a></li><li><a href="index.php?id=bestriebsfest" title="Betriebsfest">Betriebsfest</a></li><li><a href="index.php?id=sommerfest" title="Sommerfest">Sommerfest</a></li></span></ul></li><li><a href="index.php?id=eventmodule" title="Eventmodule" class = "aktuell">Eventmodule</a></li></ul></div></div>
flashsilver ·

habe es mittlerweile gelöst und zwar in dem ich bischen mit der doctype ganz oben in der ersten Zeile gespielt habe. Dadurch hat der Browser Schriften kleiner und das Layout teilweise anders dargtestellt, sowohl der IE6 & 7 und der FF.Naja dann klappte aber das aufklappen des Menüs auf anhieb, habe es alles rückgängig gemacht sprich oben im head hab ich folgendes stehen:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- 
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2006 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.com/ and http://typo3.org/
-->

	<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_756186eab4.css" />
	<link rel="stylesheet" type="text/css" href="fileadmin/css/style.css" title="Layout der Webseite" media="screen" />
	<link rel="stylesheet" type="text/css" href="fileadmin/css/search.css" title="Layout fpr die Suchfunktion" media="screen" />
	<link rel="stylesheet" type="text/css" href="fileadmin/css/login.css" title="Layout für Formulare" media="screen" />

<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script type="text/javascript" src="fileadmin/javascript/ie_plugin.js"></script><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><meta http-equiv="Content-Language" content="de" />
	<title>Startseite</title>
	<meta name="generator" content="TYPO3 4.0 CMS" />
	<script type="text/javascript" src="typo3temp/javascript_757c080409.js"></script>



</head>

Wie man sieht hab ich den standard-doctype wieder rein gelassen und siehe da es funktioniert alles wunderbar. Die Seite geht demnächst online, dann könnt ihr euch das mal anschauen, poste dann den link