Ankündigung

Einklappen
Keine Ankündigung bisher.

css Pulldown Menü

Einklappen

Neue Werbung 2019

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

  • css Pulldown Menü

    ich habe eben mein pulldown css etwas bearbeitet:

    Code:
    nav, ul {padding: 0; margin: 0; font-family: "Calibri", sans-serif;}
    nav li {list-style-type: none; float: left; position: relative;}
    nav a {text-decoration: none;color: #000;padding: 5px 10px;float: left;}
    nav a:hover {background: #eee;border-radius: 5px;}
    nav ul ul {display: none; position: absolute; top: 100%;left: 0;}
    nav ul li:hover > ul {display: block;}
    nav ul ul ul {top: 0;left: 100%;}
    http://jsfiddle.net/u1qdqgpb/

    Ich denke, dass das eine der kürzesten Varianten ist, hat einer noch eine Idee wie es kürzer geht?

  • #2
    Schön knackig gecodet, gefällt mir. Hätteste nicht so ne komprimierte Codewurst fabriziert, hätt ich nen diff gepostet in git/svn tuste dich deutlich leichter, wenn du jede CSS-Regel und jede Style-Anweisung in eine eigene Zeile packst. Spart Arbeitszeit, weil du es auch viel schneller überblicken kannst.

    http://jsfiddle.net/u1qdqgpb/1/

    Den float hab ich durch inline-block ersetzt (alternativ clearen) + list-style ohne -type
    Allen :hover Elementen würde ich noch :focus mitgeben (touch geräte + accessibility) und allen Aktionselementen ein tabindex=0 Attribut verpassen (accessibility).

    Viele Grüße

    Basti
    I like cooking my family and my pets.
    Use commas. Don't be a psycho.
    [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

    Kommentar


    • #3
      Klasse, hast ja noch etwas rausgeholt. Vielen Dank für die Anregung.
      Unter /2/ habe ich mal einen etwas anderen Ansatz für´s handy versucht. Was meinst Du denn dazu.

      Kommentar


      • #4
        http://jsfiddle.net/u1qdqgpb/3/ - dein code nach tidyup + update

        PHP-Code:
        nav:before {
            
        content:"Hauptmenü"
        Texte würde ich nie in CSS packen.

        Hauptmenü würde ich zentriert ausrichten, bottom-border oder irgendwas zum abgrenzen fehlt. Die übergeordneten Menüpunkte würde ich auf jeden Fall noch optisch abgrenzen. Für touch-Geräte fehlen :focus-Anweisungen, die Links sollten alle höher sein (wenn ich mich recht erinnere 33px minimum laut Microsoft, Apple spricht von 44px Mindesthöhe für Links).

        PHP-Code:
        nav ul li a:focus ul 
        Schließt diesmal den IE8 aus (evtl wichtig), den Selektor finde ich auch bissl zu spezifisch. Variante 2 würde ich allerdings als Besucher lieber benutzen.
        I like cooking my family and my pets.
        Use commas. Don't be a psycho.
        [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

        Kommentar


        • #5
          Vielen Dank für die Tipps. Hier kommt anstelle des Hauptmenü ein svg Hamburger rein. Mir ging es darum den zur Zeit kursierende label for selectbox hack zu umgehen. Deswegen die etwas speziell. Selektoren.
          Für Schönheitsreparaturen ist ja Platz genug...

          Kommentar


          • #6
            Hier noch eine kleine Ergänzung - Pfeile nach unten und rechts, wenn Submenü vorhanden ist. Sonst müsste ich diesen Elementen eigene Klassen geben...

            http://jsfiddle.net/u1qdqgpb/4/

            Code:
            nav ul li > a:after{ margin-left: 10px; content: '\25BC'; font-size:12px;}
            nav ul ul li > a:after {content: '\25BA';}
            nav li > a:only-child:after { margin-left: 0; content: '';}

            Kommentar


            • #7
              http://css-tricks.com/dropdown-menus...ovement-paths/
              I like cooking my family and my pets.
              Use commas. Don't be a psycho.
              [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

              Kommentar


              • #8
                Schöne Geschichte.

                Kommentar

                Lädt...
                X