Здравствуйте!
Помогите, пожалуйста с эффектом "магическая полоска", которая бегает за мышкой, спрашивал на других форумах... идею подсказали, даже все тщательно описали, но нет идей, как довести до ума.
В общем, имеется такой код:
Меню:
<?php
session_start();
if($_GET['act']==="myfriends") $pp="active";
if($_GET['act']==="outbox") $vp="active";
if($_GET['act']==="inbox") $tp="active";
if($_GET['act']==="subscribers") $cht="active";
if($_GET['act']==="poisk") $pt="active";
if(isset($_SESSION['login'])){
$satira= '
<div id="all_friendss_users_class">
<div id="kostr_doipit">
<button class="menu-toggle" onclick="loaerj();">Меню</button>
<nav id="menu">
<ul id="super-list">
<li class="main-menu__item main-menu__item--0 '.$pp.'" ><a href="?act=myfriends">Мои друзья</a></li>
<li class="main-menu__item main-menu__item--1 '.$vp.'" ><a href="?act=outbox">Исходящие</a></li>
<li class="main-menu__item main-menu__item--2 '.$tp.'" ><a href="?act=inbox">Входящие</a></li>
<li class="main-menu__item main-menu__item--3 '.$cht.'" ><a href="?act=subscribers">Подписчики</a></li>
<li class="main-menu__item main-menu__item--4 '.$pt.'" ><a href="?act=findnew">Найти друзей</a></li>
</ul>
</nav>
</div>
</div>
';
}
?>
В этом PHP-коде меню записывается в переменную и выводится в нужном месте, но только для авторизованных пользователей.
Переключатель на чистом JSvar list = document.querySelectorAll('.main-menu__item');
for (var i = 0; i < list.length; i++) {
list[i].addEventListener('mouseover', startSwitchingElements, false);
}
function startSwitchingElements() {
var activeElement = document.querySelector('.main-menu__item.active');
var activeElementNumber = parseInt(activeElement.classList[1][17]);
var hoverElementNumber = parseInt(this.classList[1][17]);
if (activeElementNumber < hoverElementNumber) {
if (list[activeElementNumber + 1]) {
list[activeElementNumber].classList.remove('active');
list[activeElementNumber + 1].classList.add('active');
activeElementNumber++;
}
if (activeElementNumber < hoverElementNumber) {
var intervalSwitchingElements = setInterval(function () {
if (list[activeElementNumber + 1]) {
list[activeElementNumber].classList.remove('active');
list[activeElementNumber + 1].classList.add('active');
}
if (activeElementNumber + 1 == hoverElementNumber) {
clearInterval(intervalSwitchingElements);
}
activeElementNumber++;
}, 50);
}
}
// На случай, если нужно не идти вперёд по пунктам, а вернуться назад.
if (activeElementNumber > hoverElementNumber) {
if (list[activeElementNumber - 1]) {
list[activeElementNumber].classList.remove('active');
list[activeElementNumber - 1].classList.add('active');
activeElementNumber--;
}
if (activeElementNumber > hoverElementNumber) {
var intervalSwitchingElements = setInterval(function () {
if (list[activeElementNumber - 1]) {
list[activeElementNumber].classList.remove('active');
list[activeElementNumber - 1].classList.add('active');
}
if (activeElementNumber - 1 == hoverElementNumber) {
clearInterval(intervalSwitchingElements);
}
activeElementNumber--;
}, 50);
}
}
}
Настройка CSS :
#menu{
height: 70px;
margin-top: -15px;
z-index: -10;
float: left;
}
#menu ul{
list-style: none;
}
#menu>ul>li{
float: left;
width: 150px;
position: relative;
z-index: 9999;
}
#menu li a{
display: block;
background: #0004ff;
color: #FFF;
font-size: 20px;
padding: 8px;
text-align: center;
text-decoration: none;
transition: all 1s linear;
}
#menu li.active a {
transition: all 1s linear;
background: #ff8400;
border-bottom: 2px solid green;
}
#menu li a:hover{
transition: 1 s ease-in;
}
Проблема в том, что полоска появляется, когда произошла смена фона и полная активация элемента, а нужно что-бы полоска следовала за мышкой и оставалась на активном элементе . Буду рад любой помощи в этом вопросе!
