Zum Inhalt springen

CSS Dropdown menü

Erstellt am 23. September 2008 · 1 Antwort · letzte Antwort am 23. September 2008

Tags: Frage

spielmann ·

Wie setze ich ein derartiges Menu in TS um?
javascript:emoticon('#angry#')
Ich komme einfach nicht weiter, als HTML eingefügt funktioniert es einwandfrei, doch dynamisch wird es kompliziert.

<ul id="navigation-1">

<li><a href="seite1.html" title="seite1"> seite1 |</a>
        	<ul class="navigation-2">
            <li><a href="seite1_1.html" title="seite1_1">seite1_1</a></li>
            <li><a href="seite1_2.html" title="seite1_2">seite1_2 <span>»</span></a>
       		  		<ul class="navigation-3">
					<li><a href="seite1_2_1.html" title="seite1_2_1">seite1_2_1</a></li>
					</ul>            
     		</li>  
            </ul>

</li>

<li><a href="seite2.html" title="seite2"> seite2 |</a></li>
<li><a href="seite3.html" title="seite3"> seite3 </a></li>        

</ul>
page.10 {

subparts.NAVIGATION = HMENU
subparts.NAVIGATION {
	special = directory
	special.value = 1
	1 = TMENU
  1 {
	  expAll = 0
    wrap = <ul id="navigation-1">|</ul>
      NO = 1
      NO {
        linkWrap = <li>| </li>
      }
    IFSUB = 0
    IFSUB {
      wrapItemAndSub = <ul id="navigation-2">|</ul>
      linkWrap = <li>|</li>
      
    }
  }
	2 < .1
  2 {
    wrap = <ul id="navigation-2">|</ul>
	IFSUB = 0
    	IFSUB {
      after = |*||*| <span>»</span>
      wrapItemAndSub = <ul id="navigation-2">|</ul>
      linkWrap = <li>|</li>
      #ATagParams = class="daddy"
    }
  }
	3 < .2
   3 {
    wrap = <ul id="navigation-3">|</ul>
	IFSUB = 0
    	IFSUB {
        wrapItemAndSub = <ul id="navigation-2">|</ul>
        linkWrap = <li>|</li><br />
      #ATagParams = class="daddy"
    }
  }
}

}

ul#navigation-1
{ margin:0; padding:0px 0; list-style:none; width:100%; height:13px; font:normal 9px verdana, arial, helvetica;}

ul#navigation-1 li
{ margin:0; padding:0 0 0 0px; display:block; float:left; position:relative;}
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:left; text-decoration:none; background:#8C3F17; color:#eeeeee; /*width:148px;*/ height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:left; text-decoration:none; background:#9D4F18; color:#ffffff; /*width:146px;*/ height:13px; border-left:0px solid #ffffff; border-right:0px solid #ffffff; }

ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0 1px; list-style:none; display:none; background:#9D4F18; /*width:146px;*/ position:absolute; top:21px; left:0px; border:0px; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:156px; clear:left;}

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#CB6C44; padding:4px 0; width:156px; border:none; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#DB7C45; padding:4px 0; width:156px; border:none; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:155px; top:-1px; padding:0px 1px 0 1px; border:none;/*:none; border-top: 1px solid #9D4F18;*/ z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#DC7D55; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#DD8D66; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:142px; font-size:12pt; color:#333333; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:142px; font-size:12pt; color:#ffffff; }

[/quote] #angry# #angry#

SLAng ·

Oh Gott... :o

Was soll denn daran kompliziert sein?

Das hier generiert dir das Menü:

subparts.NAVIGATION = HMENU
subparts.NAVIGATION {
        1 = TMENU
	1 {
		expAll = 0
		wrap = <ul id="navigation-1">|</ul>
		NO = 1
		NO {
			wrapItemAndSub = <li>|</li>
		}
	}
        2 < .1
	2 {
		wrap = <ul id="navigation-2">|</ul>
	}
        3 < .2
	3 {
		wrap = <ul id="navigation-3">|</ul>
	}
}

Deinen ganzen IFSUB Kram hab ich rausgeschmissen, denn dass hast du ja sowies mit 0 deaktiviert oder was hast du da vor???
Außerdem kannst du doch nicht in nem Menüzustand nochmal nen ul definieren...
List Menüs können nicht mit linkWrap erstellt werden, wenn es mehere Ebenen hat, da sonst die Listenpunkte nicht korrekt geöffnet und geschlossen werden.