CSS Akkordeon/Baum-Menü mit 100% Breite Teiler

ich ein CSS/JS Akkordeon-Menü erstellen möchten, mit HTML wie folgt:CSS Akkordeon/Baum-Menü mit 100% Breite Teiler

<ul> 
    <li><a href="#">First Link</a> 
     <ul> 
      <li><a href="#">Child One</a></li> 
      <li><a href="#">Child Two</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Second Link</a></li> 
    <li><a href="#">Third Link</a></li> 
</ul>

Die nav Struktur kann N Ebenen tief erhalten, und jedes Kind-Menü wird von seinem Elternteil eingerückt sein. Ich möchte, dass es einen Rahmen gibt, der 100% der Breite zwischen allen nav-Elementen einschließlich der n-ten Ebene Kind Elemente umfasst. Wie folgt aus:

alt text http://files.getdropbox.com/u/64548/nested-nav.png

Ich kann nicht für das Leben von mir Figur einen einfachen Weg, dies zu tun, ohne JavaScript zu verwenden, aber es fühlt sich an wie etwas, das möglich sein sollte. (Ich werde JS verwenden, um den Navigationsbaum zu erweitern/zu reduzieren).

Quelle

2009-07-13 ironkeith

Ich hatte ein Tiling bg Bild für die Teiler Reihen betrachtet verwenden, aber dann wird der Text nicht die Größe wird (soweit ich weiß ...) – ironkeith

Das Tiling-Hintergrundbild für die Teilerzeilen widerspricht nicht der Größenanpassung (sollte zumindest nicht mit vernünftigen CSS-Renderern).

Quelle

2009-07-13 16:47:39

Ich glaube, er auf einer sagt Nur-Text-Zoom, der Effekt wird unterbrochen, weil das Bild nicht skaliert wird. Der Seitenzoom zeigt natürlich keine Probleme. – jonwd7

Das ist ziemlich schlampig für meinen Geschmack, aber im Grunde ist es erfordert text-indent statt padding oder margin die Verschachtelung zu erreichen. Aber dann, um ein Sprite-Bild als die Kugel für die <a> zu verwenden, müssen Sie am Ende nehmen Sie die aktuelle text-indent für die Ebene und stoßen das Sprite-Bild über diese viele px, minus der Sprite Bildbreite.

Ich habe es geändert padding-left auf dem anchor stattdessen zu verwenden, aber dann erfordert dies overflow: hidden auf der übergeordneten div die zusätzliche Grenze zu verbergen, die auf der rechten Seite mit jeder Verschachtelung geschoben wird.

Und natürlich, visualisieren Sie irgendwelche der Sachen wie .two_deep, .expanded, etc. als getan mit jQuery, und nicht hardcoded in die CSS. Es sollte ziemlich einfach sein, eine Tiefe von ul im Menü zu erhalten.

<html> 
<head>  
    <style> 
     body {font: normal 11px Arial;} 

     a:link, a:visited {color: #888; text-decoration: none;} 
     a:hover, a:active {color: #000; text-decoration: none;} 

     div {width: 250px; border-top: 1px solid #888; overflow: hidden;} 

     ul { 
      width: 100%; 
      margin: 0; padding: 0; 
      list-style-type: none; 
     } 

     li { 
      padding: 5px 0; 
      border-bottom: 1px solid #888; 
     } 

     li a { 
      display: block; 
     } 

     .two_deep li a { 
      padding-left: 25px; 
     } 

     .three_deep li a { 
      padding-left: 50px; 
     } 

     .four_deep li a { 
      padding-left: 75px; 
     } 

     .expanded { 
      display: block; 
      width: 100%; 
      border-bottom: 1px solid #888; 
      margin: -5px 0 5px; 
      padding: 5px 0; 
     } 

     li > ul {margin: -5px 0 -6px;} 
    </style> 
</head> 
<body> 
    <div> 
    <ul> 
     <li><a class="expanded" href="#">First Link</a> 
      <ul class="two_deep"> 
       <li><a href="#">Child One</a></li> 
       <li> 
        <a class="expanded" href="#">Child Two</a> 
        <ul class="three_deep"> 
         <li> 
          <a class="expanded" href="#">Child One of Child Two</a> 
          <ul class="four_deep"> 
           <li><a href="#">Child One of . . .</a></li> 
           <li><a href="#">Child Two of . . .</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Child Two of Child Two</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Second Link</a></li> 
     <li><a href="#">Third Link</a></li> 
    </ul> 
    </div> 
</body> 
</html>

Aber ehrlich gesagt, vielleicht würden Sie lieber verwenden nur ein Hintergrundbild, und haben es hässlich aussehen/gebrochen, wenn der Text geändert wird. Das CSS ist ein bisschen "hack-y" für meinen Geschmack, vor allem alle Padding-Kompensation benötigt, weil die anchor und li Geschwister sein müssen.

Ich habe dies in Firefox 3.5, Safari 4 und Opera 9.6 getestet. Ich habe momentan keinen Zugang zu etwas anderem, also ist es wahrscheinlich nicht einmal sehr hübsch.

Unnötig zu sagen, es ist wahrscheinlich ein komplettes Wrack in allen IE-Versionen. Entschuldigung ... Es war nur mein eigener kleiner Test, um zu sehen, ob ich der Aufgabe gewachsen bin!

Edit: Es stimmt nicht mit Seite Zoom und Text Resize arbeiten, aber auch hier IE Unterstützung ...

Quelle

2009-07-14 10:52:43 jonwd7

Sie müssen die Grenze und Polsterung auf den <a> haben, die auch auf display:block eingestellt werden muss (?). Dies gibt einen zusätzlichen Bonus, da es die ganze <li> Region klickbar macht.

Es ist kein extra Markup in der Ul erforderlich. Definieren Sie einfach die maximale Anzahl von Unterlisten in Ihrem CSS.

Example here

a {text-decoration:none;} 
ul {width:240px;padding:0;list-style:none;border-top:1px solid #000;} 
ul ul, ul ul ul {border-top:0;} 
li a {border-bottom:1px solid #000;display:block;padding-left:0px;} 
li li a {padding-left:40px;} 
li li li a {padding-left:80px;} 


<ul> 
    <li><a href="#">First Link</a> 
     <ul> 
      <li><a href="#">Child One</a></li> 
      <li><a href="#">Child Two</a> 
       <ul> 
       <li><a href="#">Child Two One</a></li> 
       <li><a href="#">Child Two Two</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Second Link</a></li> 
    <li><a href="#">Third Link</a></li> 
</ul>

Quelle

2009-07-14 11:08:00 Emily

CSS Akkordeon/Baum-Menü mit 100% Breite Teiler

Antwort

Verwandte Themen