Wie erstelle ich mit HTML eine Sticky Navbar mit Dropdown-Menü? ⇐ Php

[Anonymous]

Ich erstelle eine HTML-Webseite, die eine Sticky-Navigationsleiste mit Dropdown-Menü enthält. Als ich jedoch eines erstellt habe, funktioniert das Dropdown-Menü in der Sticky-Navigationsleiste nicht und umgekehrt. Unten ist der Screenshot des Ergebnisses der beiden Codes.
*Bild mit Dropdown-Menü, aber ohne Sticky-Navigationsleiste
*Bild mit Sticky-Navigationsleiste, aber ohne Dropdown-Menü
unten ist der Code für „Bild mit Dropdown-Menü, aber ohne Sticky-Navigationsleiste“

Code: Select all

    



[*]

body {margin:0;font-family:Arial}

.topnav {
overflow: hidden;
background-color: #333;
}

.topnav a {
list-style-type: none;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
position: sticky;
}

.active {
background-color: #04AA6D;
color: white;
}

.topnav .icon {
display: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.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;
}

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

.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}

.dropdown-content a:hover {
background-color: #ddd;
color: black;
}

.dropdown:hover .dropdown-content {
display: block;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}




Scroll Down
Scroll down to see the sticky effect.

[url=#home]Home[/url]
[url=#news]News[/url]
[url=#contact]Contact[/url]

Dropdown
[i][/i]


[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]


[url=#about]About[/url]
[url=javascript:void(0);]☰[/url]


Responsive Topnav with Dropdown
Resize the browser window to see how it works.
Hover over the dropdown button to open the dropdown menu.

Sticky Navigation Bar Example
The navbar will [b]stick[/b] to the top when you reach its scroll position.
[b]Note:[/b]  Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.


function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

unten ist der Code für „Bild mit Sticky-Navigationsleiste, aber ohne Dropdown-Menü“

Code: Select all

body {
font-size: 20px;
}
body {margin:0;}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px 20px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}

/*======================================================================*/

body {
background-color:white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #38444d;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.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;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

footer {
text-align: center;
padding: 3px;
background-color: DarkSalmon;
color: white;
}





Scroll Down
Scroll down to see the sticky effect.

[list]
[url=#home]Home[/url]
[*][url=#news]News[/url]
[*]
[url=javascript:void(1)]Dropdown[/url]

[url=#]Link 1[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]

[/list]

Sticky Navigation Bar Example
The navbar will [b]stick[/b] to the top when you reach its scroll position.
[b]Note:[/b] Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.
Some text to enable scrolling.


Author: Hege Refsnes

[url=mailto:[email protected]][email protected][/url]

Ich brauche bitte etwas Hilfe, da ich neu in HTML und CSS bin.