Подменю не отображается правильно при изменении размера экрана (и неожиданном поведении)

У меня есть 5 ссылок на мой вертикальный nav. При изменении размера экрана мой вертикальный навигатор становится горизонтальным навигатором с тремя (из этих 5 ссылок) и другой ссылкой под названием menu, которая отображает остальные две оставшиеся ссылки.

По какой-то причине при изменении размера экрана при появлении menu содержимое списка уже отображается, а затем, когда нажимается меню, он оставляет свойства наведения даже тогда, когда вы не нависаете над ним. Вот видеоролики:

1. При изменении размера экрана оно выглядит следующим образом:

2. При наведении курсора на меню:

Это нормально. Я хочу, чтобы ссылки отображались только при щелчке по ссылке меню, а не зависании. Но я не понимаю, почему menu обсуждает два пространства li.

3. При нажатии на меню:

Это нормально. Однако обратите внимание на то, что теперь меню li отлично выполнено.

4. После нажатия на menu и затем переместите мышь в сторону от ссылки:

Как уже упоминалось, я не знаю, что вызывает эти проблемы.

Вот мой текущий подход:

$(document).ready(function() {
  $(".show").click(function() {
    $(".subMenu").toggleClass("active");
    return false;
  });
});

.site-wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}


/* make divs appear below each other on screen resize */

@media screen and (max-width: 540px) {
  .site-wrapper {
    flex-direction: column;
  }
}

ul.subMenu {
  display: none;
}

.subMenu.active {
  display: flex;
  flex-direction: column;
}

li.show {
  display: none;
}

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.logo-holder {
  text-align: center;
}

.nav {
  text-align: justify;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  width: 100%;
  /* make div span div */
  padding: 0px;
}

.nav ul li {
  list-style-type: none;
}

.nav li:hover a {
  color: #f4f3f3;
}

.active {
  text-align: left;
  padding-left: 15px;
  text-decoration: none;
  background-color: #333;
  color: #f4f3f3;
}

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  .nav-container nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
  .socials {
    display: none;
  }
  .hide {
    display: none;
  }
  .show {
    display: inline-block !important;
  }
  .nav ul li {}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
  <div class="nav-container">
    <div class="logo-holder">
      <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
    </div>
    <div id="navigation-div">
      <nav class="nav">
        <ul>
          <li><a class="nav-link active" href="">Test 1</a></li>
          <li><a class="nav-link " href="">Test 2</a></li>
          <li><a class="nav-link" href="">Test 3</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
          <li class="show"><a class="nav-link" href="">Menu</a>
            <ul class="subMenu">
              <li><a class="nav-link" href="">Test 4</a></li>
              <li><a class="nav-link" href="">Test 5</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Ответ 1

Объяснение:

У тебя так много вещей испортилось. Самое главное отметить, что субэлементы наследуются от основных элементов. Например, если у нас есть следующий HTML:

<ul id="main_menu">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>
         <ul id="sub_menu">
             <li>sub list item 1</li>
         </ul>
    </li>
</ul>

И этот CSS:

#main_menu li {/* This styling will also be applied to sub_menu!! */
    color: red;
}

Итак, если вы хотите применить к только прямой li в главном меню, используйте >, что означает только прямые элементы, например:

#main_menu > li {/* This styling will be applied only to direct li, sub_menu li will not take this styling */
    color: red;
}

Фиксация проблемы:

1- Добавить! важно для подменю:

ul.subMenu {
    display: none !important;
}

2- Прокомментировать или удалить эту строку:

.nav li:hover a {
    /* color: #f4f3f3; */
}

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

.subMenu a.nav-link {
    background-color: #f4f3f3;
    color: #333;
}
.subMenu a.nav-link:hover {
    background-color: #333;
    color: #f4f3f3;
}
.subMenu.active {
    display: block !important;
}

Здесь демонстрация.

Ответ 2

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

Вы можете использовать функцию изменения размера jQuery, чтобы делать вещи при изменении размера.

Но я не понимаю, почему меню разворачивает два пространства li.

Меню занимает два пространства li, потому что в нем есть ul, ширина которого составляет два, что вынуждает его ширину. Добавление ширины к тегу привязки сделает ее немного лучше, поскольку она не наследует ширину от li. a.nav-link {width: 50px;}

После нажатия на меню и последующего перемещения мыши от ссылки.

Добавьте класс к родительскому подменю с помощью jQuery, чтобы вы могли управлять стилем.

Вот код, надеюсь, что это поможет!

JQuery

$(document).ready(function() {
    $(".subMenu").addClass('hide');
    $(".show").click(function() {
        $(".show").toggleClass('active-parent');
    $(".subMenu").toggleClass("active");
    $(".subMenu").toggleClass("hide");
    return false;
  });
});
$(window).resize(function(){
    $(".subMenu").addClass('hide');
});

HTML

<div class="site-wrapper">
  <div class="nav-container">
    <div class="logo-holder">
      <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
    </div>
    <div id="navigation-div">
      <nav class="nav">
        <ul>
          <li><a class="nav-link active" href="">Test 1</a></li>
          <li><a class="nav-link " href="">Test 2</a></li>
          <li><a class="nav-link" href="">Test 3</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
          <li class="show"><a class="nav-link" href="">Menu</a>
            <ul class="subMenu">
              <li><a class="nav-link" href="">Test 4</a></li>
              <li><a class="nav-link" href="">Test 5</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

CSS

.site-wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}


/* make divs appear below each other on screen resize */

@media screen and (max-width: 540px) {
  .site-wrapper {
    flex-direction: column;
  }
}

ul.subMenu {
  display: none;
}

.subMenu.active {
  display: flex;
  flex-direction: column;
}

li.show {
  display: none;
}

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.logo-holder {
  text-align: center;
}

.nav {
  text-align: justify;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  width: 100%;
  /* make div span div */
  padding: 0px;
}

.nav ul li {
  list-style-type: none;
}

.nav li:hover a {
  color: #f4f3f3;
}

.active {
  text-align: left;
  padding-left: 15px;
  text-decoration: none;
  background-color: #333;
  color: #f4f3f3;
}

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  .nav-container nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
  .socials {
    display: none;
  }
  .hide {
    display: none;
  }
  .nav-container nav .hide{
      display: none;
  }
  .show {
    display: inline-block !important;
  }
  a.nav-link {
    width: 50px;
  }
  .active-parent a.nav-link {
    color: #ffffff;
    background: #333;
  }
  .nav ul li {}
}

Ответ 3

Нет 2.

Вы устанавливаете оба параметра ul для отображения в виде flex, измените его так, чтобы он был применен только к родительскому ul

  .nav-container nav>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

Косметика для ваших ссылок второго уровня при нажатии пользователем меню

.selected a,
.active a {
  background-color: #333;
  color: #f4f3f3;
}

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

$(this).toggleClass('selected');

(function($) {
  $(document).ready(function() {
    $(".show").click(function() {
      $(this).toggleClass('selected');
      $(".subMenu").toggleClass("active");
      return false;
    });
  });
})(jQuery);

.site-wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}


/* make divs appear below each other on screen resize */

@media screen and (max-width: 540px) {
  .site-wrapper {
    flex-direction: column;
  }
}

ul.subMenu {
  display: none;
}

.subMenu.active {
  display: flex;
  flex-direction: column;
}

li.show {
  display: none;
}

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.logo-holder {
  text-align: center;
}

.nav {
  text-align: justify;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  width: 100%;
  /* make div span div */
  padding: 0px;
}

.nav ul li {
  list-style-type: none;
}

.nav>li:hover a {
  color: #f4f3f3;
}

.active {
  text-align: left;
  padding-left: 15px;
  text-decoration: none;
  background-color: #333;
  color: #f4f3f3;
}

.selected a,
.active a {
  background-color: #333;
  color: #f4f3f3;
}

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  .nav-container nav>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
  .socials {
    display: none;
  }
  .hide {
    display: none;
  }
  .show {
    display: inline-block !important;
  }
  .nav ul li {}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
  <div class="nav-container">
    <div class="logo-holder">
      <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
    </div>
    <div id="navigation-div">
      <nav class="nav">
        <ul>
          <li><a class="nav-link active" href="">Test 1</a></li>
          <li><a class="nav-link " href="">Test 2</a></li>
          <li><a class="nav-link" href="">Test 3</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
          <li class="show"><a class="nav-link" href="">Menu</a>
            <ul class="subMenu">
              <li><a class="nav-link" href="">Test 4</a></li>
              <li><a class="nav-link" href="">Test 5</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>