Dropdown Animation/Textausrichtung

olaf2500 · 24. Mai 2018

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>

CSS

    select {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        width: 12.2vw;
        height: 1.2vw;
        border-radius: 0.3vw;
        border: 0.05vw solid gray;
        background: #6B7E85;
        color: white;
        cursor:pointer;
        outline:0;
        text-align: center;
        text-align-last:center;
        font-weight: bold;
    }

    select::-ms-expand {
        display:none;
    }

    select:focus::-ms-value {
      background-color: transparent;
    }

Alles anzeigen

Arne Drews · 24. Mai 2018

Eine Animation bekommst Du mit @keyframes hin

basti1012 · 24. Mai 2018

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

olaf2500 · 25. Mai 2018

Zitat von Arne Drews

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>

CSS

@keyframes optionsAppear {
      to {
        opacity: 1;
      }
    }
    .optionsStart {
      opacity: 0;
      animation: optionsAppear .5s ease-in 1 forwards;
    }
    .pause {
      animation-play-state: paused;
    }

Alles anzeigen

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.

Zitat von basti1012

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

Alles anzeigen

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

basti1012 · 25. Mai 2018

wie soll deine animation den aussehen ? Wenn du drauf klickst soll sie erscheinen oder wie ?

olaf2500 · 25. Mai 2018

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.

Arne Drews · 25. Mai 2018

Ich denke ohne selber bauen wird das nichts, hier mal ein Beispiel:

https://codepen.io/anon/pen/BxgwLO

olaf2500 · 25. Mai 2018

Okay, schade. Aber auch nicht tragisch dann werde ich es wohl so machen, immerhin kann ich dann auch den Text ausrichten wie ich es will.

Danke euch beiden

Dropdown Animation/Textausrichtung

Jetzt mitmachen!

Teilen