CSS Dropdown

Simuletsplay · 20. Februar 2019

Hallo Zusammen!

Ich wollte fragen, wie ich das machen kann, wenn ich mein Menü (siehe unten) habe und das zu Dropdown machen möchte....

wie kann ich das in CSS umsetzen?

Code

<div id="mySidenav" class="sidenav">
<a href="#"><i class="fa fa-home"></i> Homepage</a>
<hr>
<p>Allgemeines</p>
<a href="/index.php" id="aktuell"><i class="fa fa-tachometer"></i> Dashboard</a>
<a href="/datenbank/index.php"><i class="fa fa-database"></i> Datenbank</a>
<a href="/server/index.php"><i class="fa fa-server"></i> Server</a>
<a href="/dokumente"><i class="fa fa-download"></i> Downloads</a>
<a href="/msg/"><i class="fa fa-envelope-o"></i> Nachrichten</a>
<a href="/user.php"><i class="fa fa-user"></i> Benutzerkonto</a>
<a href="/termine.php"><i class="fa fa-sliders"></i> Termine</a>
</div>

Alles anzeigen

Code

Alles anzeigen

Grevas · 20. Februar 2019

Meinst du sowas?

Simuletsplay · 22. Februar 2019

Ne eher nicht... eigentlich sowas, dass man den bereich öffnen und schließen kann

Aber das geht bestimmt nur mit JS oder?
Hat jemand ein template?

Bandit · 22. Februar 2019

google => css accordion menu => Ungefähr 1.220.000 Ergebnisse

Simuletsplay · 25. Februar 2019

Ich habe jetzt etwas probiert, aber es klappt nicht

HTML

Alles anzeigen

Code

/*<----======== FONTS ========---->*/@import url('https://fonts.googleapis.com/css?family=Anton');
@import url('https://fonts.googleapis.com/css?family=Chango');
@import url('https://fonts.googleapis.com/css?family=Bangers');
@import url('https://fonts.googleapis.com/css?family=Pontano+Sans');
@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');
/*<----======== FONTS ========---->*/
body {
margin: 0;
padding: 0;
font-family: verdana;
}
nav{
width: 100%;
margin: 0 auto;
background: #4C4B4B;
color: #397FDC;
}
nav ul a {
display: block;
}
nav ul {
width: 0 auto;
margin: 0 auto;
padding: 0 auto;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
nav ul li {
background: #4C4B4B;
display: block;
}
nav ul li :hover {
background: #30A8AF;
}
nav ul li a {
color: #fff;
text-decoration: none;
display:block;
padding: 15px;
font-size: 19px;
}
nav h2{
display: block;
background: #4C4B4B;
color: #fff;
text-decoration: none;
padding: 15px;
font-size: 18px;
margin: 0;
float: left;
}
#menü-div {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
ul li ul {
background: orange;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
align-items: center;
justify-content: center;
}
ul li ul li {
clear: both;
width: 100%;
}

Alles anzeigen

Bandit · 26. Februar 2019

Zitat von Simuletsplay

aber es klappt nicht

Du gibst dir ja richtig viel Mühe mit der Problembeschreibung.

Also wenn ich google mit den oben erwähnten Begriffen füttere, bekomme ich funktionierende Beispiele, warum du nicht?

Tags