Dropdown Animation/Textausrichtung

  • Hallo zusammen,


    ich versuche gerade ein Dropdown Menü zu gestalten, prinzipiell bin ich ganz zufrieden aber es gibt einige Kleinigkeiten die mir nicht ganz gefallen:


    Zum einen habe ich es zwar hinbekommen, dass der Text in der Mitte ist, jedoch nur vom Menü selbst, die Optionen werden in aufgeklapptem zustand immer noch linksbündig angezeigt.

    Außerdem funktioniert die Textausrichtung nicht beim Internet Explorer.


    Ich hätte noch gerne eine kleine Animation beim aus- und einklappen der Optionen, das bekomme ich allerdings überhaupt nicht auf die Reihe.

    HTML
    <html>
      <head>
      </head>
      <body>
        <select>Dropdown<option>Option 1</option><option>Option 2</option><option>Option 3</option></select>
      </body>
    </html>
  • Beim Select Menü die unteren Schriftzüge in der Mitte zu setzten ist wohl nicht so einfach.

    Wir hatten das Thema letztens hier schon mal gehabt und keine richtige Lösung gefunden.

    Option Menü

    Bau dir einfach ein eigenes Menü dann kannst du es gestalten wie du willst.

    Oder mit Jqery min habe ich das auch schon mal gesehen und Bootstramp auch .

    Ich zumindest kenne jetzt keine einfachere Css anweisung die das mittig setzt .

    option{

    text-align:center;

    }

    geht aufjedenfall nicht so

  • Eine Animation bekommst Du mit @keyframes hin

    Ich habe das jetzt so versucht:

    HTML
    <select onclick="drop()">Dropdown<option class="optionsStart pause">Option 1</option><option class="optionsStart pause">Option 2</option><option class="optionsStart pause">Option 3</option></select>
    JavaScript
    function drop(){
          var x = document.getElementsByTagName("option");
          for (var i = 0; i<x.length;i++){
            x[i].classList.remove("pause");
          }
        }

    Das funktioniert allerdings nicht, scheinbar interessiert die einzelnen options auch nicht, wenn man ihnen eine opacity zuweist.


    Wird dann wohl doch etwas mehr Arbeit, aber das mit der Textgröße auslesen und dementsprechend anpassen werde ich mal versuchen, danke

  • Ich bin mir noch nichts sicher was für eine Animation genau es werden soll, z.B. ein langsameres (weniger abgehacktes) erscheinen der Optionen, oder ein nach unten ausfahren. Das hätte ich dann durch ausprobieren entschieden, aber ich schaffe es nicht, dass überhaupt eine Animation entsteht.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!