Der Code meiner Website wird in Google Chrome nicht ausgeführt, obwohl er funktioniert, wenn ich ihn aus einem Dokument öffne

Question

Ich habe alle Änderungen auf meinen Webhosting-Dienst hochgeladen und meine Website (https://cecilia-fornes.tech/accueil.html) in Google Chrome sowie meinen Titel und meine Navigationsleiste (die beim Öffnen in ein Hamburger-Menü umgewandelt wird) überprüft ) Mobilgeräte) wird nicht wie erwartet funktionieren. Sie werden voraussichtlich in einem Block oben auf der Seite platziert, mit einem versteckten Menü für mobile Geräte und einem sichtbaren Menü für große Bildschirme. Allerdings werden zwei Menüs angezeigt und ich kann den Grund dafür nicht finden. Auch wenn ich versuche, die Seite aus einem Ordner auf meinem Computer zu öffnen, scheint alles in Ordnung zu sein. Ich denke, es ist ein Kompatibilitätsproblem, aber ich kann nicht herausfinden, woher ts kommt.

Das ist mein Code:

function showResponsiveMenu() {
  var menu = document.getElementById("topnav_responsive_menu");
  var icon = document.getElementById("topnav_hamburger_icon");
  var root = document.getElementById("root");
  if (menu.className === "") {
    menu.className = "open";
    icon.className = "open";
    root.style.overflowY = "hidden";
  } else {
    menu.className = "";                    
    icon.className = "";
    root.style.overflowY = "";
  }
}

/* CSS HEADER CODE */
.title{
  font-family: 'lemon_milkbold_italic', 'Times New Roman', 'Arial', serif;;
  font-size: 150%;
  text-shadow: 0.01rem 0.01rem $menu-color;
  color: white;
  background-color: $p-header-color;
  margin-top: -40px;
  margin-left: -8px;
  height: 85px;
  width: 100%;
  z-index: 1;
  position: absolute;
  display: block;
  overflow: hidden;

    &:before, &:after{
      content: '';
      position: absolute;
      top: 0; right: 0;
      height: 100%;
      z-index: 1;
      clip-path: polygon(35% 0, 100% 0%, 100% 100%, 0% 100%);
    }

    &:before {
      background-color: white;
      animation: showText 1200ms ease-in-out;
    }

    &:after {
      background-color: $menu-color;
      animation-delay: 500ms;
      animation: showText 1000ms ease-in-out;
    }

    h1{
      opacity: 0;
      animation: animateText 1000ms forwards;
    }
}

@keyframes animateText {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes showText{
  0% {
    width: 0;
    left: 0;
    transform: translateX(0);
  }
  50% {
    width: 100%;
    transform: translateX(12%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* CSS NAVBAR CODE */

nav {
  font-size: 2em;
  float: left;
  width: 185px;
  height: 100%;
  text-align: center;
  color: black;
}

nav a {
  background-color: $menu-color;
  text-decoration: none;
  color: black !important;
  transform: scale(1);
  transition-property: transform;
  transition: transform 400ms, background-color 400ms;
}

.menu {
  display: inline-block;
  flex-direction: column;
  position: relative;
  text-decoration-line: none;
  background-color: $menu-color;
  width: 100%;
  height: 100%;
  margin-left: -8px;
  margin-top: -27px;
  overflow: auto;
  text-align: center;
  top: 0;
  padding-top: 10%;
  list-style: none;
} 

.topnav {
  background-color: $p-header-color;
  display: flex;
  align-items: center;
  width: 100%;
}

.topnav_link {
  color: $menu-color;
  padding: 12px;
  text-decoration: none;
}

/* hide responsive menu */
#topnav_hamburger_icon,
#topnav_responsive_menu {
  display: none;
}

@media only screen and (max-width: 768px) {
  /* hide classic menu */
  #topnav_menu {
    display: none;
  }

  /* position home link at left and hamburger at right */
  #home_link {
    flex-grow: 1;
  }

  /* disable horizontal scrolling  */
  #root {
    position: relative;
    overflow-x: hidden;
  }

  /* show responsive menu and position at the right of the screen */
  #topnav_responsive_menu {
    display: block;
    position: absolute;
    margin: 0;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100vh;

    z-index: 99;

    transform-origin: 0% 0%;
    transform: translate(200%, 0);

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }

  #topnav_responsive_menu ul {
    display: flex;
    flex-direction: column;

    position: absolute;
    margin: 0;
    right: 0;
    top: 0;

    min-width: 50vw;
    height: 100vh;
    padding: 56px 0 0;

    text-align: center;

    background: $menu-color;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
  }

  #topnav_responsive_menu li {
    padding: 12px 24px;
  }

  #topnav_responsive_menu a {
    white-space: nowrap;
    color: #333;
    text-decoration: none;
  }

  /* And let's slide it in from the right */
  #topnav_responsive_menu.open {
    transform: none;
    position: fixed;
  }

  /* ******************** HAMBURGER ICON ******************** */
  /* define size and position of the hamburger link */
  #topnav_hamburger_icon {
    display: block;
    position: relative;
    margin: 16px;
    width: 33px;
    height: 28px;

    z-index: 100;

    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
  }

  /* define the style (size, color, position, animation, ...) of the 3 spans */
  #topnav_hamburger_icon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    margin-bottom: 5px;

    background: white;
    border-radius: 3px;

    z-index: 100;

    opacity: 1;
    left: 0;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }

  /* set the 3 spans position to look like a hamburger */
  #topnav_hamburger_icon span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
  }
  #topnav_hamburger_icon span:nth-child(2) {
    top: 12px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  #topnav_hamburger_icon span:nth-child(3) {
    top: 24px;
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
  }

  /* change color when opening the menu */
  #topnav_hamburger_icon.open span {
    background: #333;
  }

  /* the first span rotates 45° \ */
  #topnav_hamburger_icon.open span:nth-child(1) {
    width: 110%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  /* the second span disappears */
  #topnav_hamburger_icon.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  /* the last span rotates -45° / */
  #topnav_hamburger_icon.open span:nth-child(3) {
    width: 110%;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}

<header>
  <div id="root">
  <div id="topnav" class="topnav">
    <a id="homelink" class="topnav_link" href="accueil.html"><h1>CECILIA FORNES GUECHI<br>
      DEVELOPPEUSE WEB FULLSTACK</h1></a>

    <nav role="navigation" id="topnav_menu" class ="menu">
        <ul class="list-unstyled">
          <li><a class="topnav_link" href="accueil.html">Accueil</a></li>
          <li><a class="topnav_link" href="experiences.html">Expériences</a></li>
          <li><a class="topnav_link" href="benevolat.html">Bénévolats</a></li>
          <li><a class="topnav_link" href="formations.html">Formations<a></li>
          <li><a class="topnav_link" href="certif.html">Certifications</a></li>
          <li><a class="topnav_link" href="competences.html">Compétences</a></li>
          <li><a class="topnav_link" href="loisirs.html">Loisirs</a></li>
          <li><a class="topnav_link" href="contact.html">Contact</a></li>
        </ul>
    </nav>

    <a id="topnav_hamburger_icon" href="javascript:void(0);" onclick="showResponsiveMenu()">
      <!-- Some spans to act as a hamburger -->
      <span></span>
      <span></span>
      <span></span>
    </a>

    <nav role="navigation" id="topnav_responsive_menu">
      <ul class="list-unstyled">
        <li><a href="accueil.html">Accueil</a></li>
        <li><a href="experiences.html">Expériences</a></li>
        <li><a href="benevolat.html">Bénévolats</a></li>
        <li><a href="formations.html">Formations<a></li>
        <li><a href="certif.html">Certifications</a></li>
        <li><a href="competences.html">Compétences</a></li>
        <li><a href="loisirs.html">Loisirs</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>

  </div>
  </div>
</header>

Ich habe versucht, mir einige Selektoren, Werte und Eigenschaftskompatibilität anzusehen, habe aber nichts gefunden, es sah aus, als würde ich nach der Nadel im Heuhaufen suchen.

Answer 1

我用 Chrome 查了一下...

看起来工作正常！

桌面：

打开菜单的移动设备：