HTML/CSS Navbar mit ZWEI Unterebenen (Dropdown)

McMoneysack91 · 6. Juli 2022

Liebe Freunde,

bei W3School habe ich ein fantastisches Beispiel einer Top-Navbar gefunden

https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp

wo man die erste Unterebene per Dropdown beim Hovern über der Hauptebene anzeigen lassen kann. Ich habe diesen Code sogar logisch weitergedacht und auch den Punkt "News" zu einem Dropdownmenü gemacht.

Ebene Dropdown zeigt nun also die Unterebenen Link 1 Link 2 Link 3
Ebene News zeigt nun die Unterebenen Link 4 Link 5 Link 6

Der Code dazu sieht so aus:

<html>
<div class="navbar">
<a href="#home">Home</a>
<div class="dropdown">
<button class="dropbtn">News
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</html>

<style>
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
</style>

Mein Wunsch:

Die jeweils erste Unterebene soll wiederum eine zweite Unterebene mit Links aufklappen. Dann vorzugsweise zur Seite.

Also:

Unterebene Link 1 öffnet die Unterunterebene Link 1.1 Link 1.2 Link 1.3 etc
Unterebene Link 2 öffnet die Unterunterebene Link 2.1 Link 2.2 Link 2.3 etc
...
...

savuti · 6. Juli 2022

https://www.w3jar.com/editor/?fname=multi-level-dropdown-menu-with-pure-css

So?

McMoneysack91 · 6. Juli 2022

savuti schrieb:
So?

Ich werd irre. Exakt so!!!

savuti · 6. Juli 2022

Musste halt noch etwas umbauen:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Multi-Level Dropdown Menu with Pure CSS - W3jar.Com</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            font-family: sans-serif;
            margin: 0;
            padding: 10px;
        }

        .dropdown {
            margin: 0;
            padding: 0;
            list-style: none;
            width: fit-content;
            background-color: #0abf53;
              display:flex
            
        }

        .dropdown li {
            position: relative;
        }

        .dropdown li a {
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            display: block;
            padding: 10px;
        }

        .dropdown li ul {
            position: absolute;
            top: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
            display: none;
            line-height: normal;
            background-color: #333;
        }

        .dropdown li ul li a {
            text-align: left;
            color: #cccccc;
            font-size: 14px;
            padding: 10px;
            display: block;
            white-space: nowrap;
        }

        .dropdown li ul li a:hover {
            background-color: #0abf53;
            color: #ffffff;
        }

        .dropdown li ul li ul {
            left: 100%;
            top: 0;
        }

        ul li:hover>a {
            background-color: #0abf53;
            color: #ffffff !important;
        }

        ul li:hover>ul {
            display: block;
        }
    </style>
</head>

<body>
    <ul class="dropdown">
        <li><a href="#">Menu</a>
            <ul>
                <li><a href="">Nice Dropdown Menu</a></li>
                <li><a href="">Submenu - 1</a></li>
                <li><a href="#">Dropdown</a>
                    <ul>
                        <li><a href="">Submenu - 1</a></li>
                        <li><a href="">Submenu - 2</a></li>
                        <li><a href="#">Dropdown</a>
                            <ul>
                                <li><a href="">Submenu - 1</a></li>
                                <li><a href="">Submenu - 2</a></li>
                                <li><a href="">Submenu - 3</a></li>
                            </ul>
                        </li>
                        <li><a href="">Submenu - 3</a></li>
                    </ul>
                </li>
                <li><a href="">Submenu - 2</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul>
                <li><a href="">Nice Dropdown Menu</a></li>
                <li><a href="">Submenu - 1</a></li>
                <li><a href="#">Dropdown</a>
                    <ul>
                        <li><a href="">Submenu - 1</a></li>
                        <li><a href="">Submenu - 2</a></li>
                        <li><a href="#">Dropdown</a>
                            <ul>
                                <li><a href="">Submenu - 1</a></li>
                                <li><a href="">Submenu - 2</a></li>
                                <li><a href="">Submenu - 3</a></li>
                            </ul>
                        </li>
                        <li><a href="">Submenu - 3</a></li>
                    </ul>
                </li>
                <li><a href="">Submenu - 2</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="">Nice Dropdown Menu</a></li>
                <li><a href="">Submenu - 1</a></li>
                <li><a href="#">Dropdown</a>
                    <ul>
                        <li><a href="">Submenu - 1</a></li>
                        <li><a href="">Submenu - 2</a></li>
                        <li><a href="#">Dropdown</a>
                            <ul>
                                <li><a href="">Submenu - 1</a></li>
                                <li><a href="">Submenu - 2</a></li>
                                <li><a href="">Submenu - 3</a></li>
                            </ul>
                        </li>
                        <li><a href="">Submenu - 3</a></li>
                    </ul>
                </li>
                <li><a href="">Submenu - 2</a></li>
            </ul>
        </li>
    </ul>
</body>

</html>

Ergänzung (6. Juli 2022)

Die Klasse .dropdown ändern...
width: fit-content;
display: flex;

cnubby · 6. Juli 2022

Hier hab ich mir früher immer Hilfe geholt.

McMoneysack91 · 6. Juli 2022

Lieben Dank, das ist ja mal ein nettes Nachschlagwerk! Klasse

netzgestaltung · 6. Juli 2022

Klassischer Name: Suckerfish Menu

Suche

HTML/CSS Navbar mit ZWEI Unterebenen (Dropdown)

McMoneysack91

Gast

savuti

Lt. Commander

McMoneysack91

Gast

savuti

Lt. Commander

cnubby

Gast

McMoneysack91

Gast

netzgestaltung

Captain

Ähnliche Themen