Есть 2 раздела кода, первый для настольной версии, второй для мобильной версии. Первая версия работает корректно (первое изображение) введите здесь описание изображения , в мобильной версии появляется ошибка, при наведении курсора мыши на элемент списка эффект не работает, появляется цвет границы (background ( второе изображение)) введите здесь описание изображения , если подвести курсор к этой границе, наведение работает, но само поле начинает мигать. Если ввести в код мобильной версии размеры элемента списка, как в версии для больших мониторов, т.е. дублировать правила, то и поле, и курсор мигают. Как решить эту ситуацию, чтобы вместо появления цветной рамки был эффект зависания без мигания? Ниже html и css проблемного места, и только для javascript.
if ('ontouchstart' in window) { var click = 'touchstart'; }
else { var click = 'click'; }
$('div.burger').on('click', function () {
if (!$(this).hasClass('open')) { openMenu(); }
else { closeMenu(); }
});
$('div.menu ul li a').on('click', function (e) {
e.preventDefault();
closeMenu();
});
function openMenu() {
(document.getElementById("see").setAttribute("style", "display: block;"));
$('div.menu-bg').addClass('animate');
$('div.burger').addClass('open');
$('div.x, div.z').addClass('collapse');
setTimeout(function () {
$('div.y').hide();
$('div.x').addClass('rotate30');
$('div.z').addClass('rotate150');
}, 70);
setTimeout(function () {
$('div.x').addClass('rotate45');
$('div.z').addClass('rotate135');
}, 120);
}
function closeMenu() {
$('.menu li').removeClass('animate');
(document.getElementById("see").setAttribute("style", "display: none;"));
setTimeout(function () {
$('div.burger').removeClass('open');
$('div.x').removeClass('rotate45').addClass('rotate30');
$('div.z').removeClass('rotate135').addClass('rotate150');
$('div.menu-bg').removeClass('animate');
setTimeout(function () {
$('div.x').removeClass('rotate30');
$('div.z').removeClass('rotate150');
}, 50);
setTimeout(function () {
$('div.y').show();
$('div.x, div.z').removeClass('collapse');
}, 70);
}, 100);
}
body {
background: blue;
}
.nav {
height: 100vh;
position: relative;
outline: none;
}
.nav ul {
list-style: none;
padding: 0.5em 0;
margin: 0;
}
.nav ul li {
margin: 10px;
width: 300px;
height: 40px;
line-height: 40px;
background-color: white;
padding: 0.5em 1em 0.5em 1em;
font-size: 24px;
background-repeat: no-repeat;
background-position: left 15px center;
background-size: auto 40px;
transition: all 0.15s linear;
border-radius: 5px;
border: 1px solid black;
opacity: 0.75;
}
.nav img {
float: left;
}
.menu li:hover {
background-color: #ffffff;
opacity: 1;
}
@media screen and (max-width: 479px) {
.menu {
display: none;
}
div.burger {
height: 30px;
width: 40px;
position: absolute;
top: 11px;
left: 21px;
}
div.x,
div.y,
div.z {
position: absolute; margin: auto;
top: 0px; bottom: 0px;
background: #fff;
border-radius:2px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.x, div.y, div.z { height: 3px; width: 26px; }
div.y {top: 18px;}
div.z {top: 37px;}
div.collapse {
top: 20px;
-webkit-transition: all 70ms ease-out;
-moz-transition: all 70ms ease-out;
-ms-transition: all 70ms ease-out;
-o-transition: all 70ms ease-out;
transition: all 70ms ease-out;
}
div.rotate30 {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate150 {
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
-webkit-transition: all 50ms ease-out;
-moz-transition: all 50ms ease-out;
-ms-transition: all 50ms ease-out;
-o-transition: all 50ms ease-out;
transition: all 50ms ease-out;
}
div.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.rotate135 {
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
div.menu-bg {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background:#203d63;
opacity:0;
-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu-bg.animate{
opacity:0.9;
-webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
-o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
ul.menu {
padding-top: 5em;
}
ul.menu li {
width:300px;
margin: 0 auto;
}
ul.menu span {
text-align: right;
}
ul.menu li a {
background-color: white;
color:rgb(0, 0, 0);
opacity: 0.75;
}
section > div {
transition: transform 1s;
transform: translateX(0px);
}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav" role="navigation">
<div class="menu-bg"></div>
<ul class="menu" id="see">
<li class="home">
<a href="#"><img src="" alt="img" height="40px" /><span>Главная</span></a>
</li>
<li class="gallery">
<a href="#"><img src="" alt="img" height="40px" /><span>Галерея</span></a>
</li>
</ul>
<div class="burger">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
</nav>