TransWikia.com

Как сделать необычное выпадающее мегаменю?

Stack Overflow на русском Asked by Cheizer on January 1, 2021

пожалуйста, помогите решить нестандартную задачку.

ЧТО ИМЕЕМ: Есть обычное верхнее, горизонтальное меню с подменю, оно лежит в рабочей области сайта равной 1000px по ширине, но засада в том, что нужно чтобы при клике на любой пункт меню, выпадали сразу все подменю, но, разная высота блоков подменю делает некрасивым общий вид подменю. Сами блоки подменю в position absolute сейчас. Это важно. fixed верхнего не годиться.

ВОПРОС: как средствами CSS (без js) сделать заливку-подложку фон, под эти все блоки подменю? Учитывая их высоту, которая неизвестна, высота по контенту. И ширина подложки не должна ограничиваться рабочей областью сайта, в котором лежит все меню. Не мог понять как это сделать 🙁 пробовал псевдоэлементами, но они ограничиваются шириной рабочей области меню. В общем не хватает ума это провернуть.

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

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

Вот живой пример

  //top-nav
  $('.mega-menu').on('click', '.top-list__item > a', function () {
    $('.mega-menu').find('.top-list__item__link').removeClass('active');
    $(this).parent().addClass("active");
    if ($('.header__menu').hasClass('open')) {
      $('.header__menu').removeClass('open');
    } else {
      $('.header__menu').addClass('open');
    }
  });
.flex-container{
  display: flex;
  width:100%;
      padding: 0px;
      list-style: none;
}
.container{
max-width:1000px;
 width:100%;
  margin:0 auto;
}
.mega-menu{
  width: 1000px;
      margin: 0 auto;
      position: relative;
}
.header__menu {
    z-index: 2;
    font-size: 18px;
    background-color: #333;
  color:#fff;
}
.top-list__item{
  flex:1;
  width:100%;
}
.top-list__item a{
  color:#fff;
      padding: 0 30px 0 0;
}
.header__menu, .mega-menu {
    position: relative;
}
.top-list__sublist {
    display: none;
        top: 100%;
    padding-bottom: 54px;
  padding-right: 30px;
      position: absolute;
    background: #333;
}
.open .top-list__sublist {
    display: block;
}
.top-list__sublist a{
  padding:0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header__menu">
<div class="mega-menu flex-container">
    <ul class="top-list flex-container">
        <li class="top-list__item">
            <a href="#">1 пункт</a>
            <ul class="top-list__sublist">
                <li><a href="#">подпунк мегаменю</a></li>
                <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
            </ul>
        </li>
   
           <li class="top-list__item">
               <a href="#">2 пункт</a>
            <ul class="top-list__sublist">
                 <li><a href="#">подпунк мегаменю</a></li>
                <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
                <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
            </ul>
        </li>
   
           <li class="top-list__item">
               <a href="#">3 пункт</a>
            <ul class="top-list__sublist">
                 <li><a href="#">подпунк мегаменю</a></li>
                <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
            </ul>
        </li>
     
           <li class="top-list__item">
                   <a href="#">4 пункт</a>
            <ul class="top-list__sublist">
                 <li><a href="#">подпунк мегаменю</a></li>
                <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
            </ul>
        </li>
   
           <li class="top-list__item">
               <a href="#">5 пункт</a>
            <ul class="top-list__sublist">
                 <li><a href="#">подпунк мегаменю</a></li>
                <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
               <li><a href="#">подпунк мегаменю</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>

<div class="container">
  <p>
  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</p>
<p>
  Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</p>
</div>
csshtml

One Answer

Присваивайте position: absolute не для .top-list__sublist, а для всего .header__menu, при клике у вас будут отображаться или скрываться .top-list__sublist.

$(".top-list__item").click(() => {
    $('.sublist').toggleClass('sublist-showed')
  })
html,
body {
  margin: 0;
  padding: 0;
}

.container,
.mega-menu {
  max-width: 1000px;
  margin: 0 auto;
}

.header {
  height: 60px;
  font-size: 18px;
  background: #333
}

.mega-menu {
  position: relative;
}

.top-list {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  justify-content: space-between;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 500;
}


.top-list:after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 100%;
  background: #333;
  left: calc(50% - 50vw);
}

.top-list__link {
  line-height: 60px;
}

.top-list__link,
.sublist__link {
  color: #fff;
}

.sublist {
  display: none;
}

.sublist-showed {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <div class="mega-menu">
    <ul class="top-list">
      <li class="top-list__item">
        <a class="top-list__link" href="#">1 пункт</a>
        <ul class="sublist">
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
        </ul>
      </li>

      <li class="top-list__item">
        <a class="top-list__link" href="#">2 пункт</a>
        <ul class="sublist">
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
        </ul>
      </li>

      <li class="top-list__item">
        <a class="top-list__link" href="#">3 пункт</a>
        <ul class="sublist">
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
        </ul>
      </li>

      <li class="top-list__item">
        <a class="top-list__link" href="#">4 пункт</a>
        <ul class="sublist">
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
        </ul>
      </li>

      <li class="top-list__item">
        <a class="top-list__link" href="#">5 пункт</a>
        <ul class="sublist">
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
          <li><a class="sublist__link" href="#">подпунк мегаменю</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="container">
  <p>
    Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
    Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х
    годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
  </p>
  <p>
    Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя
    Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х
    годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
  </p>
</div>

Correct answer by xydope on January 1, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP