2

Есть такое многоуровневое меню:

$('.main>li, .up-1').hover(
  function(){
    $('.wrap').css({'width':'190px'});
  },
  function(){
    $('.wrap').css({'width':'190px'});
  }
);

$('.up-1>.drop, .up-2').hover(
  function(){
    $('.wrap').css({'width':'340px'});
  },
  function(){
    $('.wrap').css({'width':'340px'});
  }
);

$('.up-2>.drop, .up-3').hover(
  function(){
    $('.wrap').css({'width':'490px'});
  },
  function(){
    $('.wrap').css({'width':'490px'});
  }
);
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}
main {
  height: 3000px;
  background: #f5f5f5;
}

ul {
  padding-left: 1rem;
}

.box {
  width: 40px;
  height: 100px;
  background: #000;
  position: absolute;
  right: 0;
  top:0;
}

.main {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #ccc;
  display: flex;
}

.main>li {
  position: relative;
}

.main>li>a {
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  padding: .5rem 1rem;
}

.wrap {
  position: absolute;
  top:100%;
  left: 0;
  padding-right: 45px;
  height: 103px;
  min-width: 160px;;
  
  display: none;
  
  border-bottom: 3px solid orangered;
  box-shadow: 0px 10px 10px rgba(0,0,0,.5);
  background: #eee;
}

.wrap>ul {
  position: relative;
}

.main>li ul {
  position: absolute;
  z-index: 2;
  width: 120px;
  
  
  
}

.sub {
  display: none;
}

.wrap>ul ul {
  left: 100%;
  top:0;
  bottom:0;
}

.main>li ul a {
  color: #555;
  display: block;
  padding: .25rem .5rem;
}

.wrap:hover,
.main>li:hover .wrap {
  display: block;
}

.main li:hover>ul {
  display: block;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>


<ul class="main">
  <li>
    <a href="#">Link 1</a>

    <div class="wrap">
      <ul class="up-1">
        <li class="drop">
          <a href="#">sub 1.1</a>

          <ul class="sub up-2">
            <li class="drop">
              <a href="#">sub 2.1</a>

              <ul class="sub up-3">
                <li>
                  <a href="#">3.1</a>
                </li>
                <li>
                  <a href="#">3.2</a>
                </li>
                <li>
                  <a href="#">3.3</a>
                </li>
              </ul>
            </li>
            <li class="drop">
              <a href="#">sub 2.1</a>

              <ul class="sub up-3">
                <li>
                  <a href="#">3.1</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="drop">
          <a href="#">sub 1.2</a>

          <ul class="sub up-2">
            <li>
              <a href="#">sub 2.1</a>
            </li>
            <li>
              <a href="#">sub 2.1</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">sub 1.3</a>
        </li>
      </ul>

      <div class="box"></div>
    </div>
  </li>
  <li>
    <a href="#">Link 2</a>
  </li>
</ul>

<main></main>

При наведении на ссылки основного меню, появляется подменю .wrap с меню, блоком, тенью и обводкой.

Должно получится что-то вроде этого:

введите сюда описание изображения

Принцип работы при переходе с link --> sub 1... появляется меню 1-го уровня и ширина общего блока = ширине этого меню. Сейчас это не срабатыват.

При наведении на пункты <li class="drop"> появляется меню сл. уровня и ширина .wrap увеличивается на соответствующую ширину и т.д.

Вопрос: как корректно реализовать подобное меню, еще и выравнивать его по середине всего экрана, потому как при наведении на ITEM3 оно будет выходить за пределы экрана?

5
  • Есть идея, я сейчас занят просто, но суть думаю поймешь) В общем проблема я так понимаю с отображением вот этих самих блоков? Если да, то нужно что бы был родитель всех этих блоков, ему задаешь flex а у дочерних блоков списка justify-content: space-around; каждый дочерний блок оборачиваешь стилем, как и родительный, но в этом способе проблема, так как боковой блок тогда не вписывается в эту концепцию( 21 окт 2018 в 16:49
  • Если я правильно понимаю, то это хорошо когда подменю и идут рядом друг с другом колонками, а тут вложенности и получается, чтобы выровнять все эти вложенные меню в колонки обязательно нужно использовать position: absolut. Поэтому динамически нужно бы вычислять ширину обертку всего меню. ...
    – SVE
    21 окт 2018 в 16:52
  • ну да, не суди строго, это просто мысли вслух, может какая то из мыслей натолкнет на верное решение) Тут если и правда подумать, флекс не сильно подойдет, потому что он плохо будет работать с одним элементом, или с двумя. Разве что написать еще больше js-a при условии количества отображаемых блоков будет меняться стили, но для моего опыта звучит это уже не так просто) 21 окт 2018 в 16:56
  • @ПавелИгоревич, не сужу ... )) вроде опыта уже с разными меню, а тут уже второй день голову ломаю с таким
    – SVE
    21 окт 2018 в 16:57
  • но мне все-равно кажется, что лучше каждый список следующего уровня оборачивать в отдельный блок, по другому вряд-ли получится как минимум так вырисовать их 21 окт 2018 в 16:59

1 ответ 1

0

Помог метод e.stopPropagation();:

$('.main>li, .up-1').hover(
  function(e){
    e.stopPropagation();
    
    $('.wrap').css({'width':'190px'});
  },
  function(e){
    e.stopPropagation();
    
    $('.wrap').css({'width':'190px'});
  }
);

$('.up-1>.drop, .up-2').hover(
  function(e){
    e.stopPropagation();
    
    $('.wrap').css({'width':'340px'});
  },
  function(e){
    e.stopPropagation();
    
    $('.wrap').css({'width':'340px'});
  }
);

$('.up-2>.drop, .up-3').hover(
  function(e){
    e.stopPropagation();
    
    $('.wrap').css({'width':'490px'});
  },
  function(e){
    e.stopPropagation();
    
    $('.wrap').css({'width':'490px'});
  }
);
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}
main {
  height: 3000px;
  background: #f5f5f5;
}

ul {
  padding-left: 1rem;
}

.box {
  width: 40px;
  height: 100px;
  background: #000;
  position: absolute;
  right: 0;
  top:0;
}

.main {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #ccc;
  display: flex;
}

.main>li {
  position: relative;
}

.main>li>a {
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  padding: .5rem 1rem;
}

.wrap {
  position: absolute;
  top:100%;
  left: 0;
  padding-right: 45px;
  height: 103px;
  min-width: 160px;;
  
  display: none;
  
  border-bottom: 3px solid orangered;
  box-shadow: 0px 10px 10px rgba(0,0,0,.5);
  background: #eee;
}

.wrap>ul {
  position: relative;
}

.main>li ul {
  position: absolute;
  z-index: 2;
  width: 120px;
  
  
  
}

.sub {
  display: none;
}

.wrap>ul ul {
  left: 100%;
  top:0;
  bottom:0;
}

.main>li ul a {
  color: #555;
  display: block;
  padding: .25rem .5rem;
}

.wrap:hover,
.main>li:hover .wrap {
  display: block;
}

.main li:hover>ul {
  display: block;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
<ul class="main">
  <li>
    <a href="#">Link 1</a>

    <div class="wrap">
      <ul class="up-1">
        <li class="drop">
          <a href="#">sub 1.1</a>

          <ul class="sub up-2">
            <li class="drop">
              <a href="#">sub 2.1</a>

              <ul class="sub up-3">
                <li>
                  <a href="#">3.1</a>
                </li>
                <li>
                  <a href="#">3.2</a>
                </li>
                <li>
                  <a href="#">3.3</a>
                </li>
              </ul>
            </li>
            <li class="drop">
              <a href="#">sub 2.1</a>

              <ul class="sub up-3">
                <li>
                  <a href="#">3.1</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="drop">
          <a href="#">sub 1.2</a>

          <ul class="sub up-2">
            <li>
              <a href="#">sub 2.1</a>
            </li>
            <li>
              <a href="#">sub 2.1</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">sub 1.3</a>
        </li>
      </ul>

      <div class="box"></div>
    </div>
  </li>
  <li>
    <a href="#">Link 2</a>
  </li>
</ul>

<main></main>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.