TransWikia.com

Наведение на подменю через скроллбар

Stack Overflow на русском Asked by HamSter on August 30, 2021

Есть такая разметка (именно такая):

jsbin

var $window = $(window);
$window.on('load resize', function() {
  console.log('load resize');

  if ($(window).width() > 576) {
    console.log('>576');

    $('.navbar-light.navbar .navbar-nav .menu-item .dropdown-menu').outerWidth($('.container').width() - 300);

    var timeout = null;


    $('.menu-item').mouseenter(function() {
      var $this = $(this);

      console.log('mouseenter');

      clearTimeout(timeout);

      // timeout = setTimeout(function(){            

      if (!$this.hasClass('active')) {
        $this.addClass('active').siblings().removeClass('active');
        $('.dropdown-toggle-split').attr('aria-expanded', 'false');
        $this.find('.dropdown-toggle-split').attr('aria-expanded', 'true');

      } else {
        $this.removeClass('active');
        $this.find('.dropdown-toggle-split').attr('aria-expanded', 'false');
      }


      if (!$this.find('.d-flex').next().hasClass('show')) {
        $this.parents('.dropdown-menu').first().find('.show').removeClass('show');
      }

      var $subMenu = $(this).find('.d-flex').next('.dropdown-menu');
      $subMenu.addClass('show');

      //}, 100);

    });

    $('.menu-item').mouseleave(function() {
      var $this = $(this);

      console.log('mouseleave');

      $this.removeClass('active');
      $this.find('.dropdown-toggle-split').attr('aria-expanded', 'false');

      clearTimeout(timeout);


      var $subMenu = $this.find('.d-flex').next('.dropdown-menu');
      $subMenu.removeClass('show');

    });
  }
});
.navbar {
  padding: 0px 0px;
  margin: 0px;
  border-radius: 0px;
  border: none;
  display: block;
  position: relative;
  background: #fff;
  transition: all .2s ease-in-out;
}

.navbar-brand {
  padding: 0;
  margin: 0;
  font-weight: 500;
  font-size: 40px;
  line-height: 40px;
  display: block;
  color: #1A2263 !important;
  text-decoration: none;
}

.navbar-brand:hover {
  color: #1A2263;
  text-decoration: none;
}

.navbar-nav .nav-link {
  font-weight: 500;
  transition: all .2s ease-in-out;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-left: 0px;
  padding-right: 0px;
}

.navbar-expand-lg .navbar-nav .nav-item {
  margin-right: 2rem;
}

.navbar-light .navbar-nav .nav-link {
  color: #000;
}

.navbar-light .navbar-nav .dropdown .nav-link:after {
  border: none;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='7' viewBox='0 0 13 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6.5 6L12 1' stroke='%23000'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: 100%;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5px;
}

.collapse-toggle-split,
.dropdown-toggle-split {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 2rem;
  line-height: 2rem;
  text-align: center;
  margin-left: auto;
  z-index: 2;
  background: #FAFAFA;
  color: #000;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.dropdown-toggle-split[aria-expanded="true"] .icon {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.menu-item>.d-flex {
  width: 100%;
}

.collapse-toggle-split:hover {
  color: #000;
}

.dropdown-toggle-split:after {
  content: none;
}

.collapse-toggle-split .icon,
.dropdown-toggle-split .icon {
  width: 12px;
  height: 12px;
}

.navbar-light .navbar-nav-login .nav-link {
  color: #909599;
}

.navbar-light .navbar-toggler {
  border: none;
  width: 22px;
  height: 20px;
  padding: 0px;
  margin: 0px;
}

.navbar-light .navbar-toggler .icon {
  width: 100%;
  height: 100%;
}

.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: calc(95vh - 275px);
  overflow-y: auto;
}

.menu-item .dropdown-item {
  margin-bottom: 0px;
  line-height: 2rem;
  display: block;
  padding-top: .5rem;
  padding-bottom: .5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.navbar-light.navbar .navbar-nav .catalog-toggle>.dropdown-menu {
  max-width: 280px;
  width: 100%;
  min-width: 280px;
  height: calc(95vh - 275px);
}

.dropdown-toggle-back {
  display: none;
}

.navbar-light.navbar .navbar-nav .menu-item .dropdown-menu {
  left: 280px !important;
  top: 0 !important;
  margin-top: 0;
  width: 900px;
  max-width: 940px;
  padding-left: 15px;
  padding-right: 15px;
  height: calc(95vh - 275px);
}

.menu-item {
  display: flex;
  align-items: center;
  border-right: 1px solid #EFF1F4;
}

.menu-item+.menu-item {
  border-top: 1px solid #EFF1F4;
}

.menu .section-title,
.menu h3 {
  color: #1A2263;
  margin: 0 0 20px;
}

.menu .section-head .link {
  margin-bottom: 20px;
  line-height: 2.5rem;
}

.menu h3 {
  font-size: 1.25rem;
  line-height: 2.5rem;
}

.menu-col-title {
  color: #1A2263;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.menu-col-title:hover {
  color: #1A2263;
  text-decoration: underline;
}

.menu-item>.dropdown-item {
  color: #000;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.menu-item>.dropdown-item:hover {
  color: #1A2263;
}

.menu-col {
  margin-bottom: 2rem;
}

.menu-col .dropdown-item {
  padding: 0;
  margin: 0;
}

.menu-icon {
  height: 1rem;
  width: 1rem;
  margin-right: .5rem;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
  margin-right: .5rem;
  margin-left: 1rem;
}

.menu-icon .icon,
.menu-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


<header class="page-header navbar navbar-expand-sm navbar-light">
  <div class="container">
    <ul class="navbar-nav">
      <li class="nav-item dropdown catalog-toggle">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Каталог товаров</a>

        <div class="dropdown-menu p-0" aria-labelledby="navbarDropdown1">

          <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

          <ul class="menu ">
            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 1
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row">
                    <div class="col-sm-9">
                      <div class="section-head justify-content-start">
                        <h2 class="section-title mr-4">
                          Item 1
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Телефоны и гаджеты
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol1" role="button" aria-expanded="false" aria-controls="collapseCol1">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol1">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 2
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row ">
                    <div class="col-xl-9">
                      <div class="section-head justify-content-start">

                        <h2 class="section-title mr-4">
                          Компьютеры и периферия
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Планшеты, ноутбуки, читалки
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol21" role="button" aria-expanded="false" aria-controls="collapseCol21">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol21">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 3
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row ">
                    <div class="col-xl-9">
                      <div class="section-head justify-content-start">

                        <h2 class="section-title mr-4">
                          Офисная техника и мебель
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol31" role="button" aria-expanded="false" aria-controls="collapseCol31">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol31">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>

                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Периферия и аксессуары
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol32" role="button" aria-expanded="false" aria-controls="collapseCol32">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol32">
                              <a href="#" class="dropdown-item">
                                  Умные часы
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>

                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Манипуляторы и устройства ввода
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol33" role="button" aria-expanded="false" aria-controls="collapseCol33">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol33">
                              <a href="#" class="dropdown-item">
                                  Духовые инструменты
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>

                            </div>
                          </div>
                        </div>

                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Компьютеры
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol34" role="button" aria-expanded="false" aria-controls="collapseCol34">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol34">

                              <a href="#" class="dropdown-item">
                                  Цифровые плееры
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 4
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row ">
                    <div class="col-xl-9">
                      <div class="section-head justify-content-start">

                        <h2 class="section-title mr-4">
                          Авто и Мототовары
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol41" role="button" aria-expanded="false" aria-controls="collapseCol41">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol41">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 5
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row ">
                    <div class="col-xl-9">
                      <div class="section-head justify-content-start">

                        <h2 class="section-title mr-4">
                          Бытовая техника
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol51" role="button" aria-expanded="false" aria-controls="collapseCol51">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol51">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>
                              <a href="#" class="dropdown-item">
                                  Спортивные браслеты
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 6
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row ">
                    <div class="col-xl-9">
                      <div class="section-head justify-content-start">

                        <h2 class="section-title mr-4">
                          Товары для дома
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol61" role="button" aria-expanded="false" aria-controls="collapseCol61">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol61">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</header>

Левое основное меню ограничено по высоте и имеет скроллбар. При наведении на пункт меню отображается подменю справа.

Как должно быть: Item 1 —> scroll –> submenu. Как сейчас: Item 1 —> scroll –> …

Вопрос: Как при наведении на пункт основного меню отображать и спокойно (через скроллбар) переходить на подменю (справа) ?

javascriptjquery

2 Answers

Подход с таймаутом выглядит верным:

  1. Откладывать на некоторое время убирание активных классов с элементов
  2. При наведении мыши, если элемент уже активен сбрасываем таймер.

Например:

var $window = $(window);
$window.on('load resize', function() {
  if ($(window).width() > 576) {
    console.log('>576');

    $('.navbar-light.navbar .navbar-nav .menu-item .dropdown-menu').outerWidth($('.container').width() - 300);

    var timeout = null;
    $('.menu-item').mouseenter(function() {
      var $this = $(this);
      if (!$this.hasClass('active')) {
        $this.addClass('active').siblings().removeClass('active');
        $('.dropdown-toggle-split').attr('aria-expanded', 'false');
        $this.find('.dropdown-toggle-split').attr('aria-expanded', 'true');

      } else {
        clearTimeout(timeout);
      }

      if (!$this.find('.d-flex').next().hasClass('show')) {
        $this.parents('.dropdown-menu').first().find('.show').removeClass('show');
      }

      var $subMenu = $(this).find('.d-flex').next('.dropdown-menu');
      $subMenu.addClass('show');
    });

    $('.menu-item').mouseleave(function() {
      timeout = setTimeout(() => {
        var $this = $(this);
        $this.removeClass('active');
        $this.find('.dropdown-toggle-split').attr('aria-expanded', 'false');
        var $subMenu = $this.find('.d-flex').next('.dropdown-menu');
        $subMenu.removeClass('show');
      }, 100);
    });
  }
});
.navbar {
  padding: 0px 0px;
  margin: 0px;
  border-radius: 0px;
  border: none;
  display: block;
  position: relative;
  background: #fff;
  transition: all .2s ease-in-out;
}

.navbar-brand {
  padding: 0;
  margin: 0;
  font-weight: 500;
  font-size: 40px;
  line-height: 40px;
  display: block;
  color: #1A2263 !important;
  text-decoration: none;
}

.navbar-brand:hover {
  color: #1A2263;
  text-decoration: none;
}

.navbar-nav .nav-link {
  font-weight: 500;
  transition: all .2s ease-in-out;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-left: 0px;
  padding-right: 0px;
}

.navbar-expand-lg .navbar-nav .nav-item {
  margin-right: 2rem;
}

.navbar-light .navbar-nav .nav-link {
  color: #000;
}

.navbar-light .navbar-nav .dropdown .nav-link:after {
  border: none;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='7' viewBox='0 0 13 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6.5 6L12 1' stroke='%23000'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: 100%;
  background-size: 100%;
  position: absolute;
  top: 50%;
  margin-top: -5px;
}

.collapse-toggle-split,
.dropdown-toggle-split {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: 2rem;
  line-height: 2rem;
  text-align: center;
  margin-left: auto;
  z-index: 2;
  background: #FAFAFA;
  color: #000;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.dropdown-toggle-split[aria-expanded="true"] .icon {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.menu-item>.d-flex {
  width: 100%;
}

.collapse-toggle-split:hover {
  color: #000;
}

.dropdown-toggle-split:after {
  content: none;
}

.collapse-toggle-split .icon,
.dropdown-toggle-split .icon {
  width: 12px;
  height: 12px;
}

.navbar-light .navbar-nav-login .nav-link {
  color: #909599;
}

.navbar-light .navbar-toggler {
  border: none;
  width: 22px;
  height: 20px;
  padding: 0px;
  margin: 0px;
}

.navbar-light .navbar-toggler .icon {
  width: 100%;
  height: 100%;
}

.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: calc(95vh - 275px);
  overflow-y: auto;
}

.menu-item .dropdown-item {
  margin-bottom: 0px;
  line-height: 2rem;
  display: block;
  padding-top: .5rem;
  padding-bottom: .5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.navbar-light.navbar .navbar-nav .catalog-toggle>.dropdown-menu {
  max-width: 280px;
  width: 100%;
  min-width: 280px;
  height: calc(95vh - 275px);
}

.dropdown-toggle-back {
  display: none;
}

.navbar-light.navbar .navbar-nav .menu-item .dropdown-menu {
  left: 280px !important;
  top: 0 !important;
  margin-top: 0;
  width: 900px;
  max-width: 940px;
  padding-left: 15px;
  padding-right: 15px;
  height: calc(95vh - 275px);
}

.menu-item {
  display: flex;
  align-items: center;
  border-right: 1px solid #EFF1F4;
}

.menu-item+.menu-item {
  border-top: 1px solid #EFF1F4;
}

.menu .section-title,
.menu h3 {
  color: #1A2263;
  margin: 0 0 20px;
}

.menu .section-head .link {
  margin-bottom: 20px;
  line-height: 2.5rem;
}

.menu h3 {
  font-size: 1.25rem;
  line-height: 2.5rem;
}

.menu-col-title {
  color: #1A2263;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.menu-col-title:hover {
  color: #1A2263;
  text-decoration: underline;
}

.menu-item>.dropdown-item {
  color: #000;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.menu-item>.dropdown-item:hover {
  color: #1A2263;
}

.menu-col {
  margin-bottom: 2rem;
}

.menu-col .dropdown-item {
  padding: 0;
  margin: 0;
}

.menu-icon {
  height: 1rem;
  width: 1rem;
  margin-right: .5rem;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
  margin-right: .5rem;
  margin-left: 1rem;
}

.menu-icon .icon,
.menu-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


<header class="page-header navbar navbar-expand-sm navbar-light">
  <div class="container">
    <ul class="navbar-nav">
      <li class="nav-item dropdown catalog-toggle">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Каталог товаров</a>

        <div class="dropdown-menu p-0" aria-labelledby="navbarDropdown1">

          <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

          <ul class="menu ">
            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 1
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row">
                    <div class="col-sm-9">
                      <div class="section-head justify-content-start">
                        <h2 class="section-title mr-4">
                          Item 1
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Телефоны и гаджеты
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol1" role="button" aria-expanded="false" aria-controls="collapseCol1">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol1">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 2
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row ">
                    <div class="col-xl-9">
                      <div class="section-head justify-content-start">

                        <h2 class="section-title mr-4">
                          Компьютеры и периферия
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Планшеты, ноутбуки, читалки
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol21" role="button" aria-expanded="false" aria-controls="collapseCol21">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol21">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 3
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row ">
                    <div class="col-xl-9">
                      <div class="section-head justify-content-start">

                        <h2 class="section-title mr-4">
                          Офисная техника и мебель
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol31" role="button" aria-expanded="false" aria-controls="collapseCol31">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol31">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>

                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Периферия и аксессуары
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol32" role="button" aria-expanded="false" aria-controls="collapseCol32">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol32">
                              <a href="#" class="dropdown-item">
                                  Умные часы
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>

                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Манипуляторы и устройства ввода
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol33" role="button" aria-expanded="false" aria-controls="collapseCol33">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol33">
                              <a href="#" class="dropdown-item">
                                  Духовые инструменты
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>

                            </div>
                          </div>
                        </div>

                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Компьютеры
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol34" role="button" aria-expanded="false" aria-controls="collapseCol34">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol34">

                              <a href="#" class="dropdown-item">
                                  Цифровые плееры
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 4
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row ">
                    <div class="col-xl-9">
                      <div class="section-head justify-content-start">

                        <h2 class="section-title mr-4">
                          Авто и Мототовары
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol41" role="button" aria-expanded="false" aria-controls="collapseCol41">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol41">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 5
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row ">
                    <div class="col-xl-9">
                      <div class="section-head justify-content-start">

                        <h2 class="section-title mr-4">
                          Бытовая техника
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol51" role="button" aria-expanded="false" aria-controls="collapseCol51">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol51">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>
                              <a href="#" class="dropdown-item">
                                  Спортивные браслеты
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <li class="menu-item">
              <div class="d-flex align-items-center">

                <a href="#" class="dropdown-item">
                    Item 6
                  </a>

                <button type="button" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                  </button>
              </div>

              <div class="dropdown-menu ">
                <a class="dropdown-toggle-back" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Назад</a>

                <div class="w-100 h-100 mCustomScrollbar">
                  <div class="row ">
                    <div class="col-xl-9">
                      <div class="section-head justify-content-start">

                        <h2 class="section-title mr-4">
                          Товары для дома
                        </h2>

                        <a href="#" class="link">
                            Все категории
                          </a>
                      </div>

                      <div class="row grid">
                        <div class="col-lg-6 col-xl-4 grid-item">
                          <div class="menu-col">
                            <div class="d-flex align-items-center">
                              <a href="#" class="menu-col-title">
                                  Оргтехника
                                </a>

                              <a class="collapse-toggle-split" data-toggle="collapse" href="#collapseCol61" role="button" aria-expanded="false" aria-controls="collapseCol61">
                                <svg class="icon icon-dd"><use xlink:href="#icon-dd"></use></svg>
                              </a>
                            </div>

                            <div class="collapse show" id="collapseCol61">
                              <a href="#" class="dropdown-item">
                                  Смартфоны
                                </a>

                              <a href="#" class="dropdown-item link">
                                  Все категории
                                </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</header>

Correct answer by Grundy on August 30, 2021

Наверное глупый вариант, но можно "прикрутить" его к данной задаче.

$('.menu').on({
  'mousemove': function(e) {
    if($(e.target).hasClass('item')) {
      let data = $(e.target).attr('data-c');
      $('.menu .right').css('background', data);
    }
  },
  'mouseleave': function() {
    $('.menu .right').css('background', 'transparent');
  }
});
.menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  background: gray;
  height: 100px;
}

.menu .left {
  display: block;
  width: 30%;
  max-height: 100%;
  background: green;
  overflow: hidden auto;
}

.menu .left>div {
  display: block;
  padding: 5px;
  background: #999;
  margin-bottom: 5px;
}

.menu .right {
  display: block;
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu">
  <div class="left">
    <div class="item" data-c="red">red</div>
    <div class="item" data-c="blue">blue</div>
    <div class="item" data-c="green">green</div>
    <div class="item" data-c="yellow">yellow</div>
    <div class="item" data-c="violet">violet</div>
  </div>
  <div class="right"></div>
</div>

Answered by De.Minov on August 30, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

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