HTML/CSS Dropdown Menü mit animiertem Pfeil?

2 Antworten

Du kannst z.B. per JavaScript die Klasse des Elements ändern und so über css ein einen anderen Pfeil laden.

Dropdown Menü springt andauernd auf die erste Auswahl zurück - wie kann ich das verhindern?

Ich habe schon an mehreren Stellen nach einer Antwort gesucht, aber keiner konnte mir weiter helfen. Und zwar geht es um eine Software, die ich auf meinem Webspace verwende. Dort gibt es ein paar Dropdown Menüs mit Auswahlmöglichkeiten (Bearbeitungsbereich von einem Userprofil). Soweit, so gut. Wenn ich jetzt aber einen Punkt auswähle und auf "speichern" klicke, springt die Auswahl in dem Dropdown Menü zurück auf den ersten Punkt, sodass ich ihn auf die nächste Bearbeitung erneut auswählen muß. Das will ich aber nicht, denn auf Dauer wird das richtig nervtötend. Ich möchte, dass die zuletzt gesetzte Auswahl abgespeichert wird, sodass ich das bei der Bearbeitung nicht ständig vom neuen setzen muß.

Aber wo kann ich in der Programmierung den Befehl dafür setzen?

Bisher habe ich nur mit CSS Dropdown Menüs gearbeitet, aber soweit ich heraus gefunden habe, läuft dieses hier über JavaScript (hatte noch nie damit zu tun, ist - zumindest im Bereich Dropdown Menü - totales Neuland für mich). Dazu habe ich eine (die einzige) Datei gefunden, wo es einen Befehl dafür gibt, nur leider werde ich nicht so ganz schlau daraus. Vielleicht hat mir ja einer einen Rat dazu? Hier der Ausschnitt:

function(a){var c="dropdown",f="4.0.0",g="bs.dropdown",h="."+g,i=".data-api",j=a.fn[c],k={HIDE:"hide"+h,HIDDEN:"hidden"+h,SHOW:"show"+h,SHOWN:"shown"+h,CLICK:"click"+h,CLICK_DATA_API:"click"+h+i,KEYDOWN_DATA_API:"keydown"+h+i},l={BACKDROP:"dropdown-backdrop",DISABLED:"disabled",OPEN:"open"},m={BACKDROP:".dropdown-backdrop",DATA_TOGGLE:'[data-toggle="dropdown"]',FORM_CHILD:".dropdown form",

Ich bin für jede Hilfe dankbar! Denn so langsam verzweifle ich daran.

...zur Frage

Dropdown Menu Buttons nebeneinander?

Ich habe für meine Website ein Dropdown Menu gemacht,dass aus einem Button besteht,der,wenn man draufklickt eine neue Liste unterhalb des Buttons öffnet,die Links enthält.Um eine Navigtionsleiste zu erstellen,die übersichtlich ist,will ich mehrere Buttons nebeneinander positionieren.Das hat soweit auch geklappt und das erste Menü öffnet sich perfekt,wenn ich aber den anderen Button anklicke,öffnet sich nur das Menü des ersten Buttons.

Hier der Code,bestehend aus html,css und JavaScript (die entsprechende Stellen) :

HTML

<div class="dropdown">    <button onclick="myFunction()" class="dropbtn">Charaktere</button>    <div id="myDropdown" class="dropdown-content">      <a href="#">1</a>      <a href="#">2</a>      <a href="#">3</a>  </div> </div> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Charaktere</button> <div id="myDropdown" class="dropdown-content">  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a> </div>   </div>

CSS

/* Dropdown Button */ .dropbtn {    background-color: white;    color: black;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;    height: 70px;    width: 160px;    font-family: Trebuchet MS;    border: 1px solid darkturquoise; }

/* Button hovered*/ .dropbtn:hover, .dropbtn:focus {    background-color: darkturquoise;    font-family: Trebuchet MS; }

/* Platzierung des <div>*/ .dropdown {    position: relative;    display: inline-block;    font-family: Trebuchet MS; }

/* Dropdown Content */ .dropdown-content {    display: none;    position: absolute;    background-color: #f1f1f1;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    z-index: 1; }

/* Links im Menü */ .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block; }

/*Farbwechsel */ .dropdown-content a:hover {background-color: #ddd}

/* Das Droptdown Menü,wenn es aufklappt*/ .show {display:block;}

JavaScript

/* Dropdown Button */ .dropbtn {    background-color: white;    color: black;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;    height: 70px;    width: 160px;    font-family: Trebuchet MS;    border: 1px solid darkturquoise; }

/* Button hovered*/ .dropbtn:hover, .dropbtn:focus {    background-color: darkturquoise;    font-family: Trebuchet MS; }

/* Platzierung des <div>*/ .dropdown {    position: relative;    display: inline-block;    font-family: Trebuchet MS; }

/* Dropdown Content */ .dropdown-content {    display: none;    position: absolute;    background-color: #f1f1f1;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    z-index: 1; }

/* Links im Menü */ .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block; }

/*Farbwechsel */ .dropdown-content a:hover {background-color: #ddd}

/* Das Droptdown Menü,wenn es aufklappt*/ .show {display:block;}

...zur Frage

Was möchtest Du wissen?