Почему значок гамбургера navs не отображается на мобильном телефоне? - PullRequest
Новая
       6

Почему значок гамбургера navs не отображается на мобильном телефоне?

1 голос
/ 06 января 2020

Я уже некоторое время возился с моим меню навигации, но безуспешно. Я не уверен, почему и был бы признателен за любое понимание. Я не думаю, что скрипт виноват, но я понятия не имею, почему он не показывает значок гамбургера, когда экран меньше. Я чувствую, что уже все перепробовал, это действительно начинает вызывать у меня головную боль. Это должно быть так просто, но оно отказывается работать.

Меню, как правило, должно отображать значок гамбургера на небольших экранах, и когда вы нажимаете на него, полное меню навигации сдвигается вниз.

Список навигации действительно исчезает, но значок гамбургера отсутствует, поэтому я не могу сделать так, чтобы он появлялся на меньших экранах.

ССЫЛКА НА МОЙ КОДЕПЕН: https://codepen.io/Pinchofginger/pen/eYmydBo

<div class="nav">
    <nav class="main-navigation">
        <a href="#"><img id="logo"src="https://www.vindrosen-huset.dk/media/zoo/images/Angstforeningen_29df0951c1c6886d2b89cb5249a05da4.png" alt="alt tekst"></a>
        <div class="menu-list">
          <a href="#">Hjem &nbsp;<i class="fas fa-home"></i></a></a>   

          <div class="subnav">
            <a href="www.angstforeningen.dk/index.php?page=hvorfor-en-angstforening">Emner på siden  &nbsp; <i class="fas fa-list"></i></a></div>
           <div class="subnav">
            <a href="www.angstforeningen.dk/uploads/tryksager/pjecer/Panikangst.pdf">Folder &nbsp;<i class="fas fa-file-download"></i></a></div>

           <div class="subnav">
            <a href="tegn-paa-smerte.html">Kontakt os &nbsp;<i class="fas fa-envelope"></i>

             </a></div>        

        <i id="mobile-menu" class="fas fa-bars"></i>
      </nav>

  </div></div>


    <!-- Ikon kit -->
    <script src="https://kit.fontawesome.com/52c7af8f48.js" crossorigin="anonymous"></script>

.nav {
  background-color: #144e75;
}

#logo {
  margin-top: -35%;
}

.main-navigation {
  letter-spacing: .1em; /* Rummet mellem bogstaver */
  height: 20px;
  display: flex; /* flexbox */
  justify-content: space-between; /* Distribuere delene ligeligt på pladsen */
}

.main-navigation img {
  height: 60px;
}

.main-navigation a {
  padding: 30px 10px;
  float: left;
  color: #f6933b;
  font-weight: bold;
  margin: 0 15px;
}

.main-navigation a:hover {
  color: white;
}

#mobile-menu {
  display: none;
  font-size: 25px;
  margin-right: 10px;
}

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

@media only screen and (max-width: 900px) {
  #mobile-menu {
    display: flex;
  }

  .main-navigation a {
    float: none;
  }

  .menu-list {
    display: none;
    position: absolute;
    left: 0;
    top: 80px;
    border-top: 5px solid #0072ce;
    border-bottom: 5px solid #0072ce;
    width: 100%;
    background-color: #fff;
  }

  .menu-list a {
    display: block;
    padding: 16px;
  }

  .subnav {
    float: none;
    display: inline;
  }
}

$("#mobile-menu").click(function() {
    $(".menu-list").slideToggle();

    $("a").click(function() {
        $(".menu-list").slideUp();
    });
});

Ответы [ 3 ]

2 голосов
/ 06 января 2020

в вашей структуре гамбургер является дочерним по отношению к div, у которого есть класс menu-list, и поскольку вы скрываете menu-list, вы также скрываете все дочерние элементы

, поэтому вам нужно вывести его на экран для отображения 

$("#mobile-menu").click(function() {
    $(".menu-list").slideToggle();

    $("a").click(function() {
        $(".menu-list").slideUp();
    });

});
.nav { background-color: #144e75;}
#logo {margin-top: -35%;}
.main-navigation {
  letter-spacing: 0.1em; /*Rummet mellem bogstaver*/
  height: 20px;
  display: flex; /*flexbox*/
  justify-content: space-between;/*Distribuere delene ligeligt på pladsen*/
 }
  .main-navigation img {
    height: 60px;
  }
  .main-navigation a {
    padding: 30px 10px;
    float: left;
   color: #f6933b;
    font-weight: bold;
    margin: 0 15px;
  }
  .main-navigation a:hover {
    color: white;  }

  #mobile-menu {
    display: none;
    font-size: 25px;
    margin-right: 10px;   }

  .subnav {
    float: left;
    overflow: hidden;   }
  
  @media only screen and (max-width: 900px) {
    #mobile-menu { display: flex;flex-direction:row-reverse; }
    .main-navigation a { float: none; }
    
    .menu-list {
      display: none;
      position: absolute;
      left: 0;
      top: 80px;
      border-top: 5px solid #0072ce;
      border-bottom: 5px solid #0072ce;
      width: 100%;
      background-color: #fff;
    }
    .menu-list a { display: block;
      padding: 16px; }
    
    .subnav {
      float: none;
      display: inline;
    }   }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
    <nav class="main-navigation">
        <a href="#"><img id="logo"src="https://www.vindrosen-huset.dk/media/zoo/images/Angstforeningen_29df0951c1c6886d2b89cb5249a05da4.png" alt="alt tekst"></a>
        <div class="menu-list">
          <a href="#">Hjem &nbsp;<i class="fas fa-home"></i></a></a>   
          
          <div class="subnav">
            <a href="www.angstforeningen.dk/index.php?page=hvorfor-en-angstforening">Emner på siden  &nbsp; <i class="fas fa-list"></i></a></div>
           <div class="subnav">
            <a href="www.angstforeningen.dk/uploads/tryksager/pjecer/Panikangst.pdf">Folder &nbsp;<i class="fas fa-file-download"></i></a></div>
      
           <div class="subnav">
            <a href="tegn-paa-smerte.html">Kontakt os &nbsp;<i class="fas fa-envelope"></i>
              
             </a></div>        
          
        
      </nav>

  </div>
<i id="mobile-menu" class="fas fa-bars"></i>
</div>


    <!-- Ikon kit -->
    <script src="https://kit.fontawesome.com/52c7af8f48.js" crossorigin="anonymous"></script>
1 голос
/ 06 января 2020

Я просто перемещаю #mobile-menu за пределы .menulist div.

Причина, по которой он не отображается, .menu-list уже не отображает ничего, а значок гамбургера внутри .menu-list, поэтому он не отображается. 

$("#mobile-menu").click(function() {
    $(".menu-list").slideToggle();

    $("a").click(function() {
        $(".menu-list").slideUp();
    });

});
.nav { background-color: #144e75;}
#logo {margin-top: -35%;}
.main-navigation {
  letter-spacing: 0.1em; /*Rummet mellem bogstaver*/
  height: 20px;
  display: flex; /*flexbox*/
  justify-content: space-between;/*Distribuere delene ligeligt på pladsen*/
 }
  .main-navigation img {
    height: 60px;
  }
  .main-navigation a {
    padding: 30px 10px;
    float: left;
   color: #f6933b;
    font-weight: bold;
    margin: 0 15px;
  }
  .main-navigation a:hover {
    color: white;  }

  #mobile-menu {
    display: none;
    font-size: 25px;
    margin-right: 10px;   }

  .subnav {
    float: left;
    overflow: hidden;   }
  
  @media only screen and (max-width: 900px) {
    #mobile-menu { display: flex; }
    .main-navigation a { float: none; }
    
    .menu-list {
      display: none;
      position: absolute;
      left: 0;
      top: 80px;
      border-top: 5px solid #0072ce;
      border-bottom: 5px solid #0072ce;
      width: 100%;
      background-color: #fff;
    }
    .menu-list a { display: block;
      padding: 16px; }
    
    .subnav {
      float: none;
      display: inline;
    }   }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
    <nav class="main-navigation">
        <a href="#"><img id="logo"src="https://www.vindrosen-huset.dk/media/zoo/images/Angstforeningen_29df0951c1c6886d2b89cb5249a05da4.png" alt="alt tekst"></a>
        <div class="menu-list">
          <a href="#">Hjem &nbsp;<i class="fas fa-home"></i></a></a>   
          
          <div class="subnav">
            <a href="www.angstforeningen.dk/index.php?page=hvorfor-en-angstforening">Emner på siden  &nbsp; <i class="fas fa-list"></i></a></div>
           <div class="subnav">
            <a href="www.angstforeningen.dk/uploads/tryksager/pjecer/Panikangst.pdf">Folder &nbsp;<i class="fas fa-file-download"></i></a></div>
      
           <div class="subnav">
            <a href="tegn-paa-smerte.html">Kontakt os &nbsp;<i class="fas fa-envelope"></i>
              
             </a></div>        
          
      </nav>

  </div>

        <i id="mobile-menu" class="fas fa-bars"></i>

</div>


    <!-- Ikon kit -->
    <script src="https://kit.fontawesome.com/52c7af8f48.js" crossorigin="anonymous"></script>
1 голос
/ 06 января 2020

В вашем Codepen #mobile-menu находится внутри #menulist с display: none. Уберите его, и оно станет видимым

...