Hallo liebes Forum,
ich habe ein Problem, was vermutlich gar nicht sooo kompliziert ist, aber ich komme nicht weiter und hoffe jmd. von euch hat einen schlauen Hinweis für mich.
Ich habe ein accordeon-Menü erstellt. Es handelt sich um eine kleine Box (in der "Menü" steht), die beim hover ausklappt und die einzelnen Menü-Punkte als labels anzeigt. Das sieht vereinfacht so aus:
<div class="accordion">
<div class="single-accordion1">
<!-- MENU-Button -->
<h2 style="cursor: default;">Menü</h2>
<!-- MENU-Punkte -->
<!-- MENU-Punkt1 -->
<label for="rb1">Menüpunkt1</label>
<br>
<!-- MENU-Punkt2 -->
<label for="rb2">Menüpunkt2</label>
<br>
<!-- MENU-Punkt3 -->
<label for="rb3">Menüpunkt3</label>
<br>
<!-- MENU-Punkt4 -->
<label for="rb4">Menüpunkt4</label>
<br>
</div>
</div>
Alles anzeigen
In der CSS ist für das Accordeon eine kleine Ausgangsbreite definiert und eine größere Fläche, die ausklappt, wenn man den Menü-Button hovert:
.accordion {
width: 400px;
padding: 3px;
position: relative;
margin-left:5px;
margin-top:0px; z-index: 2;}
.single-accordion1 {
height: 55px;
width: 95px;
overflow: hidden;
background: #0095FF;
padding: 0px 20px;
-webkit-transition: all 0.1s;
/* Safari */
transition: all 0.1s;
}
.single-accordion1:hover {
height: 610px;
width: 295px;
border-radius: 30px;
background: #CCCCCC;
-webkit-transition: all 0.1s;
/* Safari */
transition: all 0.1s;
}
Alles anzeigen
Mein Problem: Die Elemente innerhalb der Box passen sich der Größe der Box an und das sieht man leider. Sprich, wenn die Box "wächst" rutschen die einzelnen Text-Elemente erst an ihre richtige Position. Gibt es die Möglichkeit, den Inhalten eine feste Position zu geben? Evtl. löst man das durch das "Erscheinen" der Menüpunkte NACHDEM die Box ausgeklappt ist (anstatt währenddessen)... nur wie?
Ich hab schon mit display und overflow rumgespielt aber bisher hat nichts zu dem gewünschten Ergebnis geführt.
Ich hoffe ich habe einigermaßen verständlich beschrieben, was das Problem ist. Ich freue mich über einen Tipp...
Danke und schönen Abend noch.
LG
Dori