0

Есть код

 
<html>
<head>
    <!-- Кодировка веб-страницы -->
    <meta charset="utf-8">
    <!-- Настройка viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Подключаем Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <style type="text/css">
    .menu {
        position: relative;
        width: 370px;
    }

    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .menu li {
        padding: 0.5em 0 0.5em 0.3em;
        cursor: pointer;
    }

    ul.level1 {
        border: 1px solid thistle;
    }

    ul.level1>li {
        background-color: #fff;
        border-bottom: 1px solid thistle;
    }

    ul.level1>li:last-child {
        border-bottom: none;
    }

    ul.level2 {
        position: absolute;
        top: 0;
        left: 100%;
        max-width: 559px;
        max-height: 1010px;
        background-color: #fff;
        border: 1px solid thistle;
        visibility: hidden;
        white-space: nowrap;
    }

    ul.level2>li {
        padding: 0.5em 0.3em 0.5em 0.3em;
        border-bottom: 1px solid #fff;
    }

    ul.level2>li.submenu {
        /* display: flex;
        flex-direction: row;
        justify-content: space-between; */
    
        padding: 25px;
    }

    ul.level2>li>ul:not(:first-child) {
        margin-top: 15px;
    }

    ul.level2>li>ul>li {
        padding: 0;
    }

    ul.level1>li:hover ul.level2 {
        visibility: visible;
    }

    .menu a {
        color: #333;
    }

    .alignblock {
        text-align: center;
        vertical-align: middle;
    }

    .submenu__title {
        margin-bottom: 5px;
    }
    .submenu__title a {
        display: block;
        color: black;
        font: 13px Roboto, Tachoma, Arial, sans-serif;
        /* line-height: 1.5; */
        text-decoration: none;
        padding: 3px 5px;
    }

    .submenu__item {
        /* margin-bottom: 0px; */
    }
    .submenu__item a {
        display: block;
        color: gray;
        font: 13px Roboto, Tachoma, Arial, sans-serif;
        text-decoration: none;
        padding: 3px 5px;
    }
    </style>
</head>
<body>
    <div class="mainwrap">
        <div class="mainmenu">
            <span>
                <span>
                    <button data-toggle="dropdown" data-target="#menu" class="hamburger animated fadeInLeft noclose is-open" type="button">
                    <span class="hamb-top"></span>
                    <span class="hamb-middle"></span>
                    <span class="hamb-bottom"></span>
                    </button>
                </span>
                <span><div class="label menu-label" id="myelement">КАТАЛОГ ТОВАРОВ</div></span>
            </span>

            <nav class="menu">
                <ul class="level1">
                    <li id="l1">
                        <div class="alignblock">Бытовая техника для кухни</div>
                        <ul class="level2">
                            <li class="submenu">
                                <ul>
                                    <li class="submenu__title">
                                        <a href="#">Крупная бытовая техника</a>
                                    </li>
                                    <li class="submenu__item">
                                        <a href="#">Холодильники</a>
                                    </li>
                                    <li class="submenu__item">
                                        <a href="#">Морозильные камеры</a>
                                    </li>
                                    <li class="submenu__item">
                                        <a href="#">Морозильные лари</a>
                                    </li>
                                    <li class="submenu__item">
                                        <a href="#">Плиты газовые </a>
                                    </li>
                                </ul>

                                <ul>
                                    <li class="submenu__title">
                                        <a href="#">New title</a>
                                    </li>
                                    <li class="submenu__item">
                                        <a href="#">Холодильники</a>
                                    </li>
                                    <li class="submenu__item">
                                        <a href="#">Морозильные камеры</a>
                                    </li>
                                    <li class="submenu__item">
                                        <a href="#">Морозильные лари</a>
                                    </li>
                                    <li class="submenu__item">
                                        <a href="#">Плиты газовые </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li id="l2">
                        <div class="alignblock">Item 2</div>
                    </li>
                    <li id="l3">
                        <div class="alignblock">Item 3 +</div>
                        <ul class="level2">
                          <li>Sub-Item 3-1</li>
                          <li>Sub-Item 3-2</li>
                          <li>Sub-Item 3-3</li>
                          <li>Sub-Item 3-4</li>
                          <li>Sub-Item 3-5</li>
                          <li>Sub-Item 3-6</li>
                          <li>Sub-Item 3-7</li>
                          <li>Sub-Item 4-8</li>
                        </ul>
                    </li>
                    <li id="l2">
                        <div class="alignblock">Item 4</div>
                    </li>
                    <li id="l2">
                        <div class="alignblock">Item 5</div>
                    </li>
                    <li id="l2">
                        <div class="alignblock">Item 6</div>
                    </li>
                </ul>
            </nav>
        </div>

        <script src="jquery-3.5.1.min.js"></script>
        <script src="https://unpkg.com/@popperjs/core@2"></script>
        <!-- Подключаем Bootstrap JS -->
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </div>
</body>
</html>

Как добиться двухколоночности выпадающего меню (как на https://positronica.ru/)?

2 ответа 2

2

Смотрите, оно?

Мы сейчас для ul.level2 добавляем column-count: 2;

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

.menu {
  position: relative;
  width: 370px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 0.5em 0 0.5em 0.3em;
  cursor: pointer;
}

ul.level1 {
  border: 1px solid thistle;
}

ul.level1>li {
  background-color: #fff;
  border-bottom: 1px solid thistle;
}

ul.level1>li:last-child {
  border-bottom: none;
}

ul.level2 {
  position: absolute;
  top: 0;
  left: 100%;
  max-width: 559px;
  max-height: 1010px;
  padding: 0.5em 0.3em 0.5em 0.3em;
  background-color: #fff;
  border: 1px solid thistle;
  visibility: hidden;
  white-space: nowrap;
  column-count: 2;
}

ul.level2>li {
  padding: 0;
  border-bottom: 1px solid #fff;
}

ul.level2>ul>li {
  padding: 0;
}

ul.level2>li>ul>li {
  padding: 0;
}

ul.level1>li:hover ul.level2 {
  visibility: visible;
}

.menu a {
  color: #333;
}

.alignblock {
  text-align: center;
  vertical-align: middle;
}

.submenu__title {
  margin-bottom: 5px;
}

.submenu__title a {
  display: block;
  color: black;
  font: 13px Roboto, Tachoma, Arial, sans-serif;
  /* line-height: 1.5; */
  text-decoration: none;
  padding: 3px 5px;
}

.submenu__item {
  /* margin-bottom: 0px; */
}

.submenu__item a {
  display: block;
  color: gray;
  font: 13px Roboto, Tachoma, Arial, sans-serif;
  text-decoration: none;
  padding: 3px 5px;
}
<div class="mainwrap">
  <div class="mainmenu">
    <span>
                <span>
                    <button data-toggle="dropdown" data-target="#menu" class="hamburger animated fadeInLeft noclose is-open" type="button">
                    <span class="hamb-top"></span>
    <span class="hamb-middle"></span>
    <span class="hamb-bottom"></span>
    </button>
    </span>
    <span><div class="label menu-label" id="myelement">КАТАЛОГ ТОВАРОВ</div></span>
    </span>

    <nav class="menu">
      <ul class="level1">
        <li id="l1">
          <div class="alignblock">Бытовая техника для кухни</div>
          <ul class="level2">
            <li class="submenu">
              <ul>
                <li class="submenu__title">
                  <a href="#">Крупная бытовая техника</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Холодильники</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные камеры</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные лари</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Плиты газовые </a>
                </li>
              </ul>

              <ul>
                <li class="submenu__title">
                  <a href="#">New title</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Холодильники</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные камеры</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Морозильные лари</a>
                </li>
                <li class="submenu__item">
                  <a href="#">Плиты газовые </a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="l2">
          <div class="alignblock">Item 2</div>
        </li>
        <li id="l3">
          <div class="alignblock">Item 3 +</div>
          <ul class="level2">
            <li>Sub-Item 3-1</li>
            <li>Sub-Item 3-2</li>
            <li>Sub-Item 3-3</li>
            <li>Sub-Item 3-4</li>
            <li>Sub-Item 3-5</li>
            <li>Sub-Item 3-6</li>
            <li>Sub-Item 3-7</li>
            <li>Sub-Item 4-8</li>
          </ul>
        </li>
        <li id="l2">
          <div class="alignblock">Item 4</div>
        </li>
        <li id="l2">
          <div class="alignblock">Item 5</div>
        </li>
        <li id="l2">
          <div class="alignblock">Item 6</div>
        </li>
      </ul>
    </nav>
  </div>

</div>

4
  • я ж уже дал такой ответ )) 24 фев 2021 в 11:18
  • @Sevastopol' на данный момент New title расположено выше, чем должно бы быть (должно быть на уровне Крупная бытовая техника)
    – goodsoft
    24 фев 2021 в 16:20
  • @Sevastopol' также есть смежный вопрос ru.stackoverflow.com/questions/1247792/… Почему возникает такая ситуация, по идее должно отображаться одинаково (в смысле на приведенной в комментарии ссылки)
    – goodsoft
    24 фев 2021 в 16:34
  • @Sevastopol' да так.А как быть на ru.stackoverflow.com/questions/1247792/… если бы я знал почему возникает такая проблема, я бы не задавал бы этот вопрос.Вопрос не в том какое меню возникает в последней ссылке, а почему приведенные изменения кода приводят не к ожидаемому ре
    – goodsoft
    24 фев 2021 в 16:45
2

С помощью column-count: 2; например:

ul {
  column-count: 2;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Ваш ответ

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

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