Прошу помощи специалистов, так как новичок в данном деле.
Как сделать чтобы меню в зависимости от разрешения экрана выполняло свои функции?
Выше 768px:
1) Здесь интересует наведение мыши и клик. При наведении мыши или по клику на li.item открывалось его под меню.
2) При клике по li.item идет переход по ссылке, его необходимо отключить, переход по ссылке li должен быть только по подменю ul.subs li.
3) Под меню должно закрываться только при условии, если идет переход мыши или клик на следующее li.item или клик на закрытие окна на cross.
4) Если просто убрать мышь с поля меню, оно закрывается, а должно быть открыто, до тех пор, пока не выполнится условие в пункте 3.
Ниже 768px:
5) Здесь открытие меню должно быть только по клику, а закрытие по клику на крестик cross.
6) При клике по li.item идет переход по ссылке, его необходимо отключить, переход по ссылке li должен быть только по подменю ul.subs li.
PS:
1) По разрешению экрана интересует только метод matchMedia, не resize.
2) Только JavaScript.
3) Сейчас идет конфликт по закрытию меню на cross, потому как функция по click дублируется.
4) Не срабатывает сразу метод matchMedia, только после обновления экрана.
5) Не выполняется пункт 4, так как не знаю куда сувать)) e.preventDefault(), все уже перетыкал))).
6) Пункт 2 и 6 так же не выполняется, идет сразу переход по ссылке.
7) Если данный код еще можно уменьшить, это вообще супер! Так как переменную li приходится дублировать.
|
Код:
|
var dropdown = document.querySelectorAll('.menu-left>li');
var mediaQuery = window.matchMedia('(min-width: 768px)');
for(var i=0; i < dropdown.length; i++){
function handleTabletChange(e) {
if (e.matches) {
['mouseover', 'click'].forEach(e => {
dropdown[i].addEventListener(e, function(e) {
var li = e.target.closest('li.item');
li.classList.add('active');
});
});
dropdown[i].addEventListener('mouseout', function(e) {
var li = e.target.closest('li.item');
li.classList.remove('active');
});
} else {
dropdown[i].addEventListener('click', function(e) {
var li = e.target.closest('li.item');
li.classList.add('active');
});
}
}
mediaQuery.addListener(handleTabletChange);
handleTabletChange(mediaQuery);
}
var cross = document.querySelectorAll('.cross');
for(var i=0; i < cross.length; i++){
cross[i].addEventListener('click', function(e) {
var li = e.target.closest('li.item');
li.classList.remove('active');
});
}
<ul class="menu-left">
<li class="item"><a class="arrow" href="/test/test/">Пример</a>
<ul class="subs">
<span class="cross"></span>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
</ul>
</li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a>
<ul class="subs">
<span class="cross"></span>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
</ul>
</li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
</ul> |
