Ankündigung

Einklappen
Keine Ankündigung bisher.

Vertikales CSS Menu

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • junichs
    hat ein Thema erstellt Vertikales CSS Menu.

    Vertikales CSS Menu

    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):
    PHP-Code:
       <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:
    PHP-Code:
    ul{list-stylenone;positionrelative;}
    li{overflowhidden;displayblockbackground-color#fff;padding: 2px;}
    ul li a {color#000;text-decoration: none;display: block;}

    .menu :target
    {
        
    displayblock;
    }

    ul li ul
    {
        
    margin-left10px;
        
    displaynone;
    }
    ul li ul li ul li
    {
        
    displaynone;
    }

    .
    menu div
    {
        
    height20px;

    .
    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?

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

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    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?

    Einen Kommentar schreiben:


  • Arne Drews
    antwortet
    So kompliziert ist das gar nicht: http://jsfiddle.net/DPone/W8247/2/

    Einen Kommentar schreiben:


  • Condor93
    antwortet
    Zitat von nikosch Beitrag anzeigen
    Klick == Javascript.
    Brauch man nicht unbedingt
    Funktioniert auch wunderbar mit Checkboxen. Ist aber halt etwas komplizierter

    Einen Kommentar schreiben:


  • Arne Drews
    antwortet
    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!):
    Code:
    <ul>
        <li><a href="#submenu">MainItem</a>
            <ul id="submenu" class="toggable">
                <li>SubItem1</li>
                <li>SubItem2</li>
                <li>SubItem3</li>
            </ul>
        </li>
    </ul>
    Code:
    .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...

    Einen Kommentar schreiben:


  • tkausl
    antwortet
    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.

    Einen Kommentar schreiben:


  • junichs
    antwortet
    Es muss aber auch mit CSS gehen^^

    Einen Kommentar schreiben:


  • nikosch
    antwortet
    Klick == Javascript.

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    oh man, bin ich heute daneben.

    vergiss alles was ich geposted habe!

    Einen Kommentar schreiben:


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

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    Code:
    <ul id="3" class="menu">
    ist ja wohl leer, wie soll da was aufgehen?
    und sorry, ich habs nicht geblickt mit dem klick.

    Einen Kommentar schreiben:


  • junichs
    antwortet
    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.

    Einen Kommentar schreiben:


  • Gast-Avatar
    Ein Gast antwortete
    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.

    Einen Kommentar schreiben:

Lädt...
X