CSS Dropdown

Simuletsplay

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

.sidenav {    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #1b222c;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}




.sidenav a,p {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 20px;
    color: #808893;
    display: block;
    transition: 0.3s;
    border-left: 3px solid #1b222c;
}




.sidenav a:hover {
    color: #5cbc7c;
    border-left: 3px solid #5cbc7c;
}

Alles anzeigen

Grevas

Meinst du sowas?

https://codepen.io/Grevas/pen/ZwZMzJ

Simuletsplay

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

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

Simuletsplay

Ich habe jetzt etwas probiert, aber es klappt nicht

HTML

<!DOCTYPE html><html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Start | gTimes.de</title>

    <link rel="stylesheet" href="styles/main.css">

</head>
<body>




 <div id="menü-div">
      <nav role="navigation">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a>
      <ul class="dropdown">
        <li><a href="#">Sub-1</a></li>
        <li><a href="#">Sub-2</a></li>
        <li><a href="#">Sub-3</a></li>
      </ul>
    </li>
    <li><a href="#">Three</a></li>
  </ul>
</nav>
   </div>








</body>
</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

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