html ausklappbare Navigation?

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
EinAlexander
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
13.01.2020, 15:13
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
Danke721 
Beitragsersteller
 15.01.2020, 17:01

<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

EinAlexander  15.01.2020, 17:10
@Danke721
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>
Danke721 
Beitragsersteller
 15.01.2020, 17:12
@EinAlexander

sie wissen garnicht wie sehr sie mir geholfen haben!

Danke721 
Beitragsersteller
 15.01.2020, 17:18
@Danke721

kann man unter dieser ul auch noch einen untergrund machen also das diese auf weißem Grund stehen?

EinAlexander  15.01.2020, 17:23
@Danke721
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
}
Danke721 
Beitragsersteller
 15.01.2020, 16:57

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
germanils
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik
13.01.2020, 15:09

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:

https://css-tricks.com/solved-with-css-dropdown-menus/
Woher ich das weiß:Berufserfahrung – Entwicklung von Apps und Websites
Danke721 
Beitragsersteller
 13.01.2020, 15:10

Vielen dank, ich hoffe es funktioniert.