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

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

  • #2
    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.

    Kommentar


    • #3
      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.

      Kommentar


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

        Kommentar


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

          Kommentar


          • #6
            oh man, bin ich heute daneben.

            vergiss alles was ich geposted habe!

            Kommentar


            • #7
              Klick == Javascript.
              [COLOR="#F5F5FF"]--[/COLOR]
              [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
              [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
              [COLOR="#F5F5FF"]
              --[/COLOR]

              Kommentar


              • #8
                Es muss aber auch mit CSS gehen^^

                Kommentar


                • #9
                  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.
                  [QUOTE=nikosch]Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.[/QUOTE]

                  Kommentar


                  • #10
                    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...
                    Competence-Center -> Enjoy the Informatrix
                    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                    Kommentar


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

                      Kommentar


                      • #12
                        So kompliziert ist das gar nicht: http://jsfiddle.net/DPone/W8247/2/
                        Competence-Center -> Enjoy the Informatrix
                        PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                        Kommentar


                        • #13
                          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?
                          [COLOR="#F5F5FF"]--[/COLOR]
                          [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                          [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                          [COLOR="#F5F5FF"]
                          --[/COLOR]

                          Kommentar


                          • #14
                            Nene... Is lediglich ein Workaround und dirty dazu.
                            Ein Klick-Ereignis via CSS existiert nicht, darauf wurde ja ausreichend hingewiesen.
                            Competence-Center -> Enjoy the Informatrix
                            PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                            Kommentar

                            Lädt...
                            X