Блог

Главная - Вопросы по программированию - Как мне свернуть меню в одностраничном макете?

Как мне свернуть меню в одностраничном макете?

#javascript #html #jquery #css #responsive-design

#javascript #HTML #jquery ( jquery ) #css — код #адаптивный дизайн #jquery #css

Вопрос:

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

Я знаю, это звучит запутанно, но позвольте мне показать вам тестовую страницу, которую я создаю, и, возможно, она будет более понятной (извините, что она не на английском языке) http://www.handig.dk/test/index.html

Когда вы находитесь на странице, наведите курсор на пункт под названием «Menukort». Вы заметили, что выпадающее меню отображается правильно? Попробуйте щелкнуть по одной из ссылок. Как только вы это сделаете, попробуйте снова навести курсор на «Menukort». Вы заметили, что выпадающее меню больше не отображается? Кроме того, если вы НАЖМЕТЕ «Menukort», вы вернетесь в начало страницы, чего я тоже не хочу.

Есть ли у вас какие-либо предложения по устранению этой проблемы?

Вот код для панели навигации.

HTML

     <section class="navigation">
  <div class="nav-container" id="myHeader">
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
        <li><a href="#">Forside</a></li>
        <li><a href="#om_os">Om os</a></li>
        <li> <a href="#">Menukort</a>
          <ul class="nav-dropdown">
            <li><a href="#frokost">Frokost</a></li>
            <li><a href="#aften">Aften</a></li>
            <li><a href="#drikke">Drikkevarer</a></li>
          </ul>
        </li>
        <li><a href="https://book.dinnerbooking.com/dk/da-DK/book/table/pax/1620/3">Bordbestilling</a></li>
        <li> <a href="#ud_af_huset">Mad ud af huset</a>
          <ul class="nav-dropdown">
            <li><a href="#take_away">Take Away</a></li>
            <li><a href="#festbuffet">Festbuffet</a></li>
            <li><a href="#brunch">Brunch</a></li>
            <li><a href="#reception">Receptionsmad</a></li>
          </ul>
        </li>
        <li><a href="#selskaber">Selskaber</a></li>
        <li><a href="#hotellet">Hotellet</a></li>
        <li><a href="#find">Find os</a></li>
      </ul>
    </nav>
  </div>
</section>

CSS

     .nav-container {
  display: flex;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
  background-color: #f1f1f1;
}
.navigation {
  display: flex;
  justify-content: center;
  height: 70px;
  background-color: #f1f1f1;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}
nav ul li {
  float: left;
  position: relative;
  background-color: #f1f1f1;
}
nav ul li a,
nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  color: #333;
  text-decoration: none;
  background-color: #f1f1f1;
}
nav ul li a:hover,
nav ul li a:visited:hover {
  color: #84a0a8;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: '';
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  background-color: #f1f1f1;
}
nav ul li:hover .nav-dropdown {
    display: block;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}

.sticky   .nav-container {
  padding-top: 102px;
}

/* Mobile navigation */
.nav-mobile {
  display: none;
  height: 35px;/* ???? */
  /*width: 25px;*/
}

@media only screen and (max-width: 798px) {
  .nav-mobile {
    display: block;
    position:relative;
  }
  nav {
    width: 100%;
    padding: 70px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}
@media screen and (min-width: 799px) {
  .nav-list {
    display: block !important;
  }
}
 #nav-toggle{
    position:relative;
    padding:10px 35px 16px;
    display:table;
    margin:-35px auto 0;
  }
#nav-toggle span{margin:auto;left:0;right:0;}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #333;
  position: absolute;
  display: block;
  content: "";
  transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before,
#nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

JavaScript (функция slideUp также по какой-то причине не работает. Я не могу закрыть меню после нажатия на ссылку в мобильном меню)

 (function($) { // Begin jQuery
  $(function() { // DOM ready
    // If a link has a dropdown, add sub menu toggle.
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      // Close one dropdown when selecting another
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    // Clicking away from dropdown will remove the dropdown class
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    // Toggle open and close nav styles on click
    $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });
    // Hamburger to X toggle
    $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    });
    $('.nav-dropdown li a').on("click", function(){
    $('#nav-toggle').slideUp();
});
  }); // end DOM ready
})(jQuery); // end jQuery

Комментарии:

1. Я должен представить, что проблема заключается в обработчике щелчков для всего документа ( html ). Я бы преобразовал выпадающую часть этого в CSS.

Ответ №1:

Вот в чем проблема:

 $('html').click(function() {
  $('.nav-dropdown').hide();
});

Когда вы помещаете .скрыть сделайте так, чтобы css скрывал элемент, и вы не можете видеть, как он заменяет его.

Ответ №2:

Я добавил функцию наведения, чтобы переключать меню так же, как щелчок. Прямо сейчас css предоставляет это правило, но перезаписывается jQuery после того, как он закрывает его. Используйте javascript:void(0) вместо #, чтобы избежать привязки к началу страницы.

Ручка: https://codepen.io/richiegarcia/pen/oNxmXGK

 
    (function($) { // Begin jQuery
      $(function() { // DOM ready
        //Hover shows submenu
        $('nav ul li a:not(:only-child)').hover(function(e) {
          $(this).children('.nav-dropdown').toggle();
          // Close one dropdown when selecting another
        });
        
        // If a link has a dropdown, add sub menu toggle.
        $('nav ul li a:not(:only-child)').click(function(e) {
          $(this).siblings('.nav-dropdown').toggle();
          // Close one dropdown when selecting another
          $('.nav-dropdown').not($(this).siblings()).hide();
          e.stopPropagation();
        });
        // Clicking away from dropdown will remove the dropdown class
        $('html').click(function() {
          $('.nav-dropdown').hide();
        });
        // Toggle open and close nav styles on click
        $('#nav-toggle').click(function() {
          $('nav ul').slideToggle();
        });
        // Hamburger to X toggle
        $('#nav-toggle').on('click', function() {
          this.classList.toggle('active');
        });
        $('.nav-dropdown li a').on("click", function(){
        $('#nav-toggle').slideUp();
    });
      }); // end DOM ready
    })(jQuery); // end jQuery