Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS Problem: Fixes Menu lässt sich mobil nicht scrollen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS Problem: Fixes Menu lässt sich mobil nicht scrollen

    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
    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
    CSS
    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;
        }
        }
    
    
    
    
    
    }
    Javacript
    Code:
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }

  • #2
    Bitte Quellcode hierhin! Nicht auf einen dubiosen Link, auf den nicht alle Browser Zugriff haben
    Gruss
    Michael

    Kommentar


    • #3
      Ist oben angepasst. PHPMann: Bitte zukünftig immer so verfahren, danke.
      Competence-Center -> Enjoy the Informatrix
      PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

      Kommentar


      • #4
        So ganz verstehe ich dich nicht. Aber so könnte ich mir das vorstellen


        CSS Problem: Fixes Menu lässt sich mobil nicht scrollen


        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">
        <style>
          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;
          height:2000px;
        }
        .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: 800px) {
          .topnav a:not(:first-child), .dropdown .dropbtn {
            display: none;
          }
          .topnav a.icon {
            float: right;
            display: block;
          }
        }
        @media screen and (max-width: 800px) {
          .topnav.responsive {position: relative;}
          .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
          }
              .w3-content{
            overflow-Y:scroll;
          height:auto;
                width:calc(100% + 15px);
                max-height:400px;
        }
          .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: 800px) {
            .column {
                width: 100%;
                height: auto;
            }
         }
        </style>
        <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
        <main>
          </main>
          <script>
            function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
          </script>
        </body>
        [/URL]
        Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
        Erreichbar in mein Javascript-Forum und in Facebook-Chat

        Kommentar


        • #5
          Gilt auch für Dich, basti1012
          Competence-Center -> Enjoy the Informatrix
          PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

          Kommentar

          Lädt...
          X