0

Можно ли как-то реализовать такое многоуровневое меню, чтобы при разрешении 768px управление переходило на клики вместо наведения?

https://codepen.io/alexei-danilovich/pen/KBdjbp

HTML

<ul class="menu">
    <li class="menu-item">
        <a href="#">Пункт меню 1</a>
        <ul class="sub-menu">
            <li>
                <a href="#">Подпункт меню 1</a>
            </li>
            <li>
                <a href="#">Подпункт меню 2</a>
            </li>
            <li>
                <a href="#">Подпункт меню 3</a>
            </li>
        </ul>
    </li>
    <li class="menu-item">
        <a href="#">Пункт меню 2</a>
        <ul class="sub-menu">
            <li>
                <a href="#">Подпункт меню 1</a>
            </li>
            <li>
                <a href="#">Подпункт меню 2</a>
            </li>
        </ul>
    </li>
</ul>

CSS

.sub-menu {
height: 0; 
overflow: hidden; 
opacity: 0; 
transition: all 0.5s ease-in;
}

JS

var el = document.getElementsByClassName('menu-item');

for(var i=0; i<el.length; i++) {
  el[i].addEventListener("mouseenter", showSub, false);
  el[i].addEventListener("mouseleave", hideSub, false);
}

function showSub(e) {
    if(this.children.length>1) {
       this.children[1].style.height = "auto";
       this.children[1].style.overflow = "visible";
       this.children[1].style.opacity = "1";
    } else {
       return false;
    }
}

function hideSub(e) {
    if(this.children.length>1) {
      this.children[1].style.height = "0px";
      this.children[1].style.overflow = "hidden";
      this.children[1].style.opacity = "0";
    } else {
       return false;
    }
}

1 ответ 1

0

Можно ли как-то реализовать такое многоуровневое меню, чтобы при разрешении 768px управление переходило на клики вместо наведения?

Вот так можно:

var el = document.getElementsByClassName('menu-item');
// Дефолтная загрузка
if (window.innerWidth > 768) {
  setEvent(el);
} else {
  remEvent(el);
  setEvent(el, "dblclick", "click");
}
// Проверка если окно поменяло размер
window.addEventListener('resize', function(e) {

  console.log('Resized', this.innerWidth, this.innerHeight);
  if (this.innerWidth <= 768) { // Your size
    // удаляет события
    remEvent(el);
    //----------------------------------------------------------------
    // меняет события
    setEvent(el, "dblclick", "click");
  } else {
    setEvent(el);
  }
})

//----------------------------------------------------------------

function setEvent(elem, e1 = "mouseenter", e2 = "mouseleave", flg = false) {
  for (var i = 0; i < elem.length; i++) {
    elem[i].addEventListener(e1, showSub, flg);
    elem[i].addEventListener(e2, hideSub, flg);
  }
}

function remEvent(elem, e1 = "mouseenter", e2 = "mouseleave", ) {
  for (var i = 0; i < elem.length; i++) {
    // Remove 
    elem[i].removeEventListener(e1, showSub);
    elem[i].removeEventListener(e2, hideSub);

  }
}
//----------------------------------------------------------------

function showSub(e) {
  if (this.children.length > 1) {
    this.children[1].style.height = "auto";
    this.children[1].style.overflow = "visible";
    this.children[1].style.opacity = "1";
  } else {
    return false;
  }
}

function hideSub(e) {
  if (this.children.length > 1) {
    this.children[1].style.height = "0px";
    this.children[1].style.overflow = "hidden";
    this.children[1].style.opacity = "0";
  } else {
    return false;
  }
}
.sub-menu {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease-in;
}
<ul class="menu">
  <li class="menu-item">
    <a href="#">Пункт меню 1</a>
    <ul class="sub-menu">
      <li>
        <a href="#">Подпункт меню 1</a>
      </li>
      <li>
        <a href="#">Подпункт меню 2</a>
      </li>
      <li>
        <a href="#">Подпункт меню 3</a>
      </li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="#">Пункт меню 2</a>
    <ul class="sub-menu">
      <li>
        <a href="#">Подпункт меню 1</a>
      </li>
      <li>
        <a href="#">Подпункт меню 2</a>
      </li>
    </ul>
  </li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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