Javascript-forum
Navigation verhält sich bei Breakpoint zu mobilen Ansicht suboptimal - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Javascript allgemeiner (https://javascript-forum.de/forumdisplay.php?fid=16)
+--- Forum: jQuery (https://javascript-forum.de/forumdisplay.php?fid=17)
+--- Thema: Navigation verhält sich bei Breakpoint zu mobilen Ansicht suboptimal (/showthread.php?tid=2805)

Navigation verhält sich bei Breakpoint zu mobilen Ansicht suboptimal - Mick62 - 14.03.2024

Hallo und Guten Tag
Hab hier Eine Navigation die ich mit Hilfe eines Tutorial erstellt habe. Ich habe mir das schön angepasst.
Doch wenn ich es im Browserfenster zusammen schiebe wird das Menue ab dem Breackpoint direkt aufgeklappt angezeigt.
Es soll sich aber erst nach Aufforderung öffnen. Ich selbst bin mit Javascript nur rudimentär vertraut

hier ist mal der gesamter code: Das script ist ganz unten
Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Nav</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      box-sizing: border-box;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    body::after {
      content: "Resize Viewport ↘";
      position: fixed;
      bottom: 1em;
      right: 1em;
      opacity: 0.5;
      font-size: 0.8em;
      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    }

    .top-navigation {
      width: 100%;
      float: left;
      background-color: darkcyan;
      position: fixed;
      z-index: 1000;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display: block;
      padding: 1em;
    }
    .logo img {
      display: block;
      width: 100%;

      max-width: 100px;
    }

    nav {
      display: flex;
      align-items: center;
    }

    nav ul {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    nav li {
      margin: 0 10px;
    }

    nav a {
      display: block;
      text-decoration: none;
      color: white;
      border-top: 1px solid rgba(0, 0, 0, 0.5);
      padding: 1em;
      white-space: nowrap;
    }

    nav a:hover {
      background: rgba(0, 0, 0, 0.2);
      color: white;
    }

    #toggle-nav {
      background: rgba(0, 0, 0, 0.2);
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      padding: 1.1rem;
      color: white;
      cursor: pointer;
    }

    #toggle-nav:hover {
      background: rgba(0, 0, 0, 0.4);
      color: white;
    }

    header {
      margin-top: 60px;
      width: 100%;
      min-height: 100vh;
      float: left;
    }
    h1 {
      font-size: 24px;
    }

    p {
      font-size: 16px;
    }

    .top-fix {
      display: flex;
      justify-content: start;
      align-items: center;
      min-height: 50vh;
      background-color: aquamarine;
    }

    .bottom-flex {
      display: flex;
      justify-content: start;
      align-items: center;
      min-height: 50vh;
      background-color: lightcoral;
    }

    @media screen and (min-width: 800px) {
      .top-navigation {
        flex-direction: row;
        align-items: center;
      }

      nav {
        float: right;
        width: auto;
        display: flex;
        align-items: center;
      }

      nav a {
        border: none;
      }

      nav li {
        width: auto;
        padding: 0;
      }

      #toggle-nav {
        display: none;
      }
    }

    @media screen and (max-width: 800px) {
      .top-navigation {
        flex-direction: column;
        text-align: center;
      }

      .logo {
        text-align: left;
        width: 100%;
        padding-left: 1em;
      }

      .logo img {
        max-width: 18%;
        height: auto;
      }

      nav {
        width: 100%;
      }

      nav ul {
        display: inline-block;
        padding: 0;
        text-align: center;
        width: 100%;
      }

      nav li {
        display: block;
        margin: 10px 0;
        width: 100%;
      }

      nav a {
        display: block;
        text-decoration: none;
        color: white;
        border-top: 1px solid rgba(0, 0, 0, 0.5);
        padding: 1em;
      }
    }
  </style>

  <body>
    <div class="top-navigation">
      <a href="#" class="logo"><img src="../images/logo" alt="Logo" /></a>
      <div id="toggle-nav">Menu</div>
      <nav>
        <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>
      </nav>
    </div>

    <header>
      <!-- Header-Inhalt -->
      <section class="top-fix">
        <h1>header teil 1</h1>
        <p>Mit öjähäjhi iupiuhgofogzpg.</p>
      </section>
      <section class="bottom-flex">
        <h1>header teil 2</h1>
        <p>Mit öjähäjhi iupiuhgofogzpg.</p>
      </section>
    </header>

    <script
      type="text/javascript"
      src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
    ></script>
    <script>
      $(document).ready(function () {
        $("html").addClass("js");

        var navToggle = ['<div id="toggle-nav">Menu</div>'].join("");
        $("header").append(navToggle);

        // Hinzugefügten Code
        $("nav a").on("click", function () {
          if (menu.is(":visible")) {
            menu.slideUp();
          }
        });
      });

      $(function () {
        var pull = $("#toggle-nav");
        menu = $("nav");
        menuHeight = menu.height();

        $(pull).on("click", function (e) {
          e.preventDefault();
          menu.slideToggle();
        });

        $(window).resize(function () {
          var w = $(window).width();
          if (w > 320 && menu.is(":hidden")) {
            menu.removeAttr("style");
          }
        });
      });
    </script>
  </body>
</html>