Vertikales CSS Menu

[junichs]

Hallo,

ja ich weiß, es gibt da sehr viele Anleitungen zu, bin trotzdem zu doof zu.

Wollte, wenn ich auf das DIV mit dem + klicke, dass er eine Unterkategorie aufmacht. Die erste Ebene macht er auch. Halt nur nicht die weiteren Ebenen.

Also hier mal was ich habe:
Ich generiere dynamisch Ein menu (Ausschnitt):

   <ul class="menu">
       <li>
          <div style="float:left; width:7%; text-align:center;">
           <a href="#1">+</a>
          </div>
          <div style="float:left; width:93%;">
            <a href="wiki.php?katid=1#0">Programmierung</a>
          </div>
          <div style="clear:left; width:0; height:0; "></div>
             <ul id="1" class="menu">
                <li>
                   <div style="float:left; width:7%; text-align:center;">
                     <a href="#3">+</a>
                   </div>
                   <div style="float:left; width:93%;">
                      <a href="wiki.php?katid=3#1">PHP</a>
                   </div>
                   <div style="clear:left; width:0; height:0; "></div>
                      <ul id="3" class="menu">
                 <li>
                  <div style="float:left; width:7%; text-align:center;">
                    <a href="#6">+</a>
                   </div>
                   <div style="float:left; width:93%;">
                      <a href="wiki.php?katid=6#3">Scripte</a>
                    </div>
                   <div style="clear:left; width:0; height:0; "></div>
                     <ul id="6" class="menu"></ul>
                    </li>
                     </ul>
                  </li>
               </ul>
            </ul> 

//Kann sein, dass da jetzt wegen den schließenden ul's/li's was nicht passt, weil ich jetzt nur ein Teil kopiert habe.

CSS:

ul{list-style: none;position: relative;}
li{overflow: hidden;display: block; background-color: #fff;padding: 2px;}
ul li a {color: #000;text-decoration: none;display: block;}

.menu :target
{
    display: block;
}

ul li ul
{
    margin-left: 10px;
    display: none;
}
ul li ul li ul li
{
    display: none;
}

.menu div
{
    height: 20px;
} 
.menu div:hover
{
    background: #F1DCC9;
} 

2 Anker gehen ja nicht. Nur wie rufe ich jetzt die Unterunterkategorie auf?
Das hatte auch versucht, nur das funktioniert so gar nicht.
.menu ul li div:target ul li ul li
{
display: block;
}

Vielleicht kann jemand ein Hinweis geben?

[Gast]

ich würde dir raten nicht inlinestyles und css-file zu mischen.
zudem halte ich die divs für unnötig.
bei menues nutze ich zudem eine fixe breite.
bei dem thread gabs es leztens glaub ich eine ähnliche disskussion:
http://www.php.de/php-einsteiger/109...und-css-2.html
und sowohl im forum als auch im netz gibt es unmengen von beispielen und generatoren.

[junichs]

die inlinestyles waren auch nur zu testzwecken drin.

Dein Link zielt auf hover ab, soweit ich das sehe, das bekomm ich auch hin. Aber ich will ja kein hover, sondern ein click.

[Gast]

<ul id="3" class="menu">

ist ja wohl leer, wie soll da was aufgehen?
und sorry, ich habs nicht geblickt mit dem klick.

[junichs]

Wieso leer? darunter sind <li>. Wie gesagt, die erste Ebene funktioniert ja so.
Oder was meinst du mit leer?

[Gast]

oh man, bin ich heute daneben.

vergiss alles was ich geposted habe!

[nikosch]

Klick == Javascript.

[junichs]

Es muss aber auch mit CSS gehen^^

[tkausl]

Ein- und Ausblenden von Teilen geht auch mit Checkboxen, Labeln und dem CSS Siblings-Selector, ist aber ziemliche fummelarbeit, vorallem bei mehreren verschachtelten Blöcken.

[Arne Drews]

Es muss aber auch mit CSS gehen

Ja, gehts auch...

Aber ich will ja kein hover, sondern ein click.

...und nu´ wirds wieder eingeschränkt!
Das Klick-Event lässt sich nunmal (noch) nicht zuverlässig über CSS steuern!

Die einzige Alternative, die mir adhoc einfallen würde, wäre die :target-Variante (CSS3!):

<ul>
    <li><a href="#submenu">MainItem</a>
        <ul id="submenu" class="toggable">
            <li>SubItem1</li>
            <li>SubItem2</li>
            <li>SubItem3</li>
        </ul>
    </li>
</ul>

.toggable {
    display:none;
}

.toggable:target {
    display:inline-block;
}

...ob das allerdings das Verhalten wiederspiegelt, was Du wirklich willst und ob alle Browser dies so umsetzen, weiß ich nicht!
Ich empfehle Dir den Fallback zu jQuery/JavaScript, das ist heutzutage völlig normal.

EDIT: Achso, Du nutzt :target ja bereits... Sorry, habe ich übersehen...

Der Vollständigkeit halber: http://jsfiddle.net/DPone/T7VbS/
Wenn ich richtig verstanden habe, was Du willst, sollte das weiterhelfen...

Vielleicht noch besser geeignet für das, was Du vorhast: http://jsfiddle.net/DPone/W8247/2/
ist im übrigen das Prinzip, daß tkausl erwähnt hat. Allerdings empfinde ich das nicht für allzu großes Gefummel. Deine ganzen DIVs brauchst Du jedenfalls gar nicht...

[Condor93]

Klick == Javascript.

Brauch man nicht unbedingt
Funktioniert auch wunderbar mit Checkboxen. Ist aber halt etwas komplizierter

[Arne Drews]

So kompliziert ist das gar nicht: http://jsfiddle.net/DPone/W8247/2/

[nikosch]

Ach kommt, Leute, das ist von hinten durch die Brust ins Auge. Zugegeben, es ist interessant, aber Ihr wollt das doch nicht ernsthaft als Klick via CSS Variante propagieren?

[Arne Drews]

Nene... Is lediglich ein Workaround und dirty dazu.
Ein Klick-Ereignis via CSS existiert nicht, darauf wurde ja ausreichend hingewiesen.