Hallo,
ich habe nochmal eine Frage. Diesmal geht es um ein CSS Dropdown Menu.
Es funktioniert soweit auch ganz gut. Es muss noch ein bisschen angepasst werden. Allerdings habe ich das Problem, wenn man mobil das Menu aufruft, dass man dann nicht runter scrollen kann, wenn man das Dropdown Menu anklickt. Es handelt sich um ein Fixes Menu. Also das Menu bleibt immer oben, nur den Inhalt unter dem Menu kann man scrollen. Ich habe schon vieles versucht, aber nix hat funktioniert. Könnt ihr mir da weiter helfen? Wäre euch sehr dankbar!
HTML
CSS
Javacript
ich habe nochmal eine Frage. Diesmal geht es um ein CSS Dropdown Menu.
Es funktioniert soweit auch ganz gut. Es muss noch ein bisschen angepasst werden. Allerdings habe ich das Problem, wenn man mobil das Menu aufruft, dass man dann nicht runter scrollen kann, wenn man das Dropdown Menu anklickt. Es handelt sich um ein Fixes Menu. Also das Menu bleibt immer oben, nur den Inhalt unter dem Menu kann man scrollen. Ich habe schon vieles versucht, aber nix hat funktioniert. Könnt ihr mir da weiter helfen? Wäre euch sehr dankbar!
HTML
HTML-Code:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <body> <!-- Navbar --> <div class="w3-top"> <div class="w3-bar w3-red w3-card w3-left-align w3-large"> <div class="topnav" id="myTopnav"> <div class="w3-content"> <a href="#home">Menu 1</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="row"> <div class="column"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="#">Link 5</a> <a href="#">Link 6</a> <a href="#">Link 7</a> <a href="#">Link 8</a> <a href="#">Link 9</a> <a href="#">Link 10</a> <a href="#">Link 11</a> <a href="#">Link 12</a> </div> </div> </div> </div> <a href="#home">Menu 2</a> <a href="#home">Menu 3</a> <a href="#contact">Menu 4</a> <a href="#about">Menu 5</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> </div> </div> </div> <br><br><br> Hier kommt der Inhalt
Code:
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif} .w3-bar,h1,button {font-family: "Montserrat", sans-serif} .fa-anchor,.fa-coffee {font-size:200px} body {margin:0;font-family:Arial} .topnav { overflow: hidden; background-color: #6a5a4a; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 36px; text-decoration: none; font-size: 17px; } .active { background-color: #4CAF50; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: #6a5a4b; } .dropdown-content a { color: black; } .dropdown-content { display: none; position: absolute; background-color: #dddddd; width: 100%; left: 0; box-shadow: 0px 18px 26px 0px rgba(0,0,0,0.2); z-index: 1; border: 1px solid white; } .dropdown-content .header { background: red; padding: 16px; color: white; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 1000px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 1000px) { .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; } @media screen and (max-width: 600px) { .column { width: 100%; height: auto; } } }
Code:
function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }
Kommentar