#javascript #html #menu #hover #jquery-animate
#javascript #HTML #меню #наведение #jquery-анимировать
Вопрос:
помогите мне реализовать меню наведения. Суть в том, что при наведении курсора мыши на пункт меню красный кружок плавно приближается к пункту при наведении курсора мыши. Когда курсор покидает точку, окружность плавно поднимается до своих координат. Заранее спасибо.
nav{
position: relative;
}
.circle{
height: 10px;
width: 10px;
display: inline-blick;
background-color: red;
border-radius: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.menu{
margin: 0;
padding: 0 0 0 30px;
height: audo;
width: 100%;
display: inline-blick;
list-style: none;
}
.menu li{
cursor: pointer;
}
<nav>
<div class="circle"></div>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
Комментарии:
1. Вы готовы использовать javascript или пытаетесь достичь этого с помощью чистого CSS?
2. извините, если я правильно понимаю, вы хотите, чтобы красная точка перемещалась к пункту меню при наведении курсора мыши на пункт меню?
3. Что означает —
the circle smoothly rises to its coordinates
? О каких координатах мы говорим?4. Мне нужно реализовать это в javascript, круг должен вернуться после удаления курсора из меню в исходное положение
Ответ №1:
Вы можете сделать это несколькими способами. Я создал несколько методов ниже. Вы также можете добавить анимацию в данный код. Я считаю, что div <div class="circle"></div>
не обязательно размещать перед <ul>
тегом
function chbg(elem,color) {
elem.firstChild.style.backgroundColor=color;
}
var circle = '<div class="circle" style="background-color: red;"></div>';
var menu = document.getElementsByClassName('menu2')[0];
for (var i = 0; i < menu.children.length; i ) {
menu.children[i].addEventListener("mouseout", function () {
this.innerHTML =this.innerHTML.replaceAll(circle,'')
});
menu.children[i].addEventListener("mouseover", function () {
if(this.innerHTML.indexOf(circle)==-1)
this.innerHTML =this.innerHTML circle
});
}
nav{
position: relative;
}
.circle{
float:left;
height: 10px;
width: 10px;
display: inline-blick;
border-radius: 50px;
top: 50%;
left: 0;
}
.menu, .menu2, .menu3{
margin: 0;
padding: 0 0 0 30px;
height: audo;
width: 100%;
display: inline-blick;
list-style: none;
}
.menu3 li:before {
opacity:0;
content: '';
background-color: red;
float:left;
height: 10px;
width: 10px;
display: inline-blick;
border-radius: 50px;
top: 50%;
left: 0;
}
.menu3 li:hover:before{
opacity:1;
}
<h1>method 1 using javascript</h1>
<nav>
<ul class="menu">
<li onmouseover="chbg(this,'red')" onmouseout="chbg(this,'white')"><div class="circle"></div>Menu 1</li>
<li onmouseover="chbg(this,'red')" onmouseout="chbg(this,'white')"><div class="circle"></div>Menu 2</li>
<li onmouseover="chbg(this,'red')" onmouseout="chbg(this,'white')"><div class="circle"></div>Menu 3</li>
</ul>
</nav>
<h1>method 2 using javascript</h1>
<nav>
<ul class="menu2">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
<h1>method 3 using CSS</h1>
<nav>
<ul class="menu3">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
Ответ №2:
Как работает этот скрипт:
Принимает все <li>
элементы в id="menu"
и устанавливает их в «Прослушиватель событий» для mouseover
и mouseout
При наведении курсора <li>
мыши на элемент скрипт занимает его положение сверху и по высоте. Эти координаты передаются #circle
элементу как встроенный стиль.
Когда курсор мыши находится mouseout
в <li>
элементах, встроенный стиль удаляется, а красная точка возвращается в исходное положение.
Вы можете изменить скорость перемещения с помощью CSS transition: 0.8s;
var menu = document.getElementById('menu');
var li = menu.getElementsByTagName('li');
var dot = document.getElementById('circle');
for (var i = 0; i < li.length; i ) {
li[i].addEventListener("mouseover", function () {
setAnimation(this);
});
li[i].addEventListener("mouseout", function () {
dot.setAttribute('style', '');
});
}
function setAnimation(el) {
var pos = el.offsetTop;
var h = el.offsetHeight;
dot.setAttribute('style', 'top:' (pos h / 2) 'px;');
}
nav {
position: relative;
}
#circle {
height: 10px;
width: 10px;
display: inline-blick;
background-color: red;
border-radius: 50px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
transition: 0.8s;
}
#menu {
margin: 0;
padding: 0 0 0 30px;
height: audo;
width: 100%;
display: inline-blick;
list-style: none;
}
#menu li {
cursor: pointer;
}
<nav>
<div id="circle"></div>
<ul id="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>