html ausklappbare Navigation?
Hallo Leute,
kann mir jemand sagen wie man nur mithilfe von html und css in der Navigation im Header einen ausklappbare "ul" einbauen kann. Also wenn man über bspl. über Beispiel1. swipet klappt sich eine "ul" aus, die auch links besitzt.(Natürlich sollen die Links untereinander sein)
Vielen Dank vorraus!
2 Antworten
kann mir jemand sagen wie man nur mithilfe von html und css in der Navigation im Header einen ausklappbare "ul" einbauen kann.
So:
<!doctype html>
<title>Navigation</title>
<style>
nav > ul { display:none }
nav:hover > ul { display:block }
</style>
<nav>
<p>Menü</p>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</nav>
Alex
also nur bei Jahreszeiten soll eine ul ausklappen inden dan die Jahreszeiten stehen
geht so:
<!doctype html>
<title>Navigation</title>
<style>
nav ul ul { display:none }
nav ul > li:hover > ul { display:block }
</style>
<nav>
<ul>
<li>Punkt 1</li>
<li>Jahreszeiten
<ul>
<li>Frühling</li>
<li>Sommer</li>
<li>Herbst</li>
<li>Winter</li>
</ul>
</li>
<li>Punkt 3</li>
</ul>
</nav>
sie wissen garnicht wie sehr sie mir geholfen haben!
kann man unter dieser ul auch noch einen untergrund machen also das diese auf weißem Grund stehen?
Klar. Einfach das CSS ergänzen:
nav ul ul {
display:none;
background:white
}
Hallo Alexander.
wenn ich so mache sind alle Listitems im header erst sehbar wenn rüber swipt.
Ich möchte aber das nur wenn man nur über einen Teil der im header ist rüber swipt und sich eine ul öffnet
vielen dank im vorraus
Hier gibt es eine Anleitung/Beispiel: https://www.w3schools.com/css/css_dropdowns.asp
Da ist es mit DIVs gelöst, aber das Prinzip ist das selbe.
Hier noch ein ausführlicherer Artikel, wo es mit UL gelöst ist:
<header>
<div id="logo">
<a href="#"><img src="Startseite.jpg" alt="Startseite" /></a>
</div>
<nav>
<ul>
<li><a href="Startseite.html">Startseite</a></li>
<li><a href="Stundenplan/Stundenplan.html">Stundenplan</a></li>
<li><a href="Jahreszeiten/Jahreszeiten.html">Jahreszeiten</a></li>
<li><a href="Hobby/Hobby.html">Hobby</a></li>
<li><a href="Bundesliga/Bundesliga.html">Bundesliga</li>
<li><a href="#Kontakt1">Kontak</a></li>
</ul>
</nav>
</header>
also nur bei Jahreszeiten soll eine ul ausklappen inden dan die Jahreszeiten stehen