Hello.

There is a task to make the menu. The menu will be on the one-page site, and the menu items will load the content on the page, so:

This type of menu: picture menu

The essence is this: Only when you hover on menu items (circles), a line must reach the line (by the way, it is a gradient from circle to circle), the line starts moving from the initial state, passing through the circle highlights it.

The line (connecting the circles) can also decrease if the 6th point has been chosen and we aim at the 3rd

"The line should sort of move to quench the mouse or light the points" "active 2nd point, and we point to the 6th, then the strip should go from 2nd to 6th, lighting all the circles along the way"

Tell me how to implement this ... I tried, for some reason, too much when for such a seemingly not difficult task

Tell me the algorithm, or a similar implementation where ... Thanks in advance for the answer.

reference to code

$(document).ready(function() { // получаем блок с меню var _root = $('.menu'); $(".menu__point").hover( function() { var _this = $(this), time = 0, _child = _root.children(); // пнукт, на котоырй навели _this.addClass('on-hover'); // проходя по всем потомкам, до того на котоырй навели(у него класс on-hover) // вешаем класс с задержкой, котоырй увеличивает плавно width $.each(_child, function(index, val) { if ($(val).hasClass('on-hover')) { setTimeout(function() { $(val).addClass('menu__point--red') }, time); return false; // дошли до пункта, на котоырй довели, дальше навешивать классы не нужно } else { if ($(val).hasClass('menu__line')) { setTimeout(function() { $(val).find('.menu__line--red') .addClass('menu__line--red--active') }, time); time += 300; } else { // кроме линии, еслт толко кружочек, для него свой класс (хз почему))) setTimeout(function() { $(val).addClass('menu__point--red') }, time); } } }); }, function() { var _this = $(this), time = 0, _child = _root.children().toArray().reverse(); // в цикле клас убираем в обратном порядке // когда убрали ховер, то проходим по всем детям и убираем класс активности с задержкой // опять же косяк, начинаем убирать с полседнего, а надо бы с того у которго класс on-hover (не доделал) $.each(_child, function(index, val) { $(val).removeClass('on-hover'); if ($(val).hasClass('menu__line')) { setTimeout(function() { $(val).find('.menu__line--red') .removeClass('menu__line--red--active') }, time); time += 300; } else { setTimeout(function() { $(val).removeClass('menu__point--red') }, time); } }); } // лапша ); }); 
 .menu{ width: 500px; height: 30px; margin: 10px auto; } .menu__point{ float: left; width: 28px; height: 28px; border-radius: 50%; border: 1px solid black; cursor: pointer; position: relative; overflow: hidden; } .menu__point.menu__point--red:before{ width: 100%; } .menu__point:before{ content: ''; display: block; top: 0px; left: 0px; position: absolute; height: 100%; background: red; width: 0%; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; -ms-transition: all .1s linear; -o-transition: all .1s linear; transition: all .1s linear ; } .menu__line--red{ display: inline-block; width: 0%; height: 5px; position: absolute; background: red; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear ; } .menu__line--red--active{ width: 100%; } .menu__line{ max-width: 60px; display: inline-block; float: left; width: 100%; height: 5px; background: #000; margin-top: 12px; position: relative; } .menu__line--first{ width: 30px; } .clearfix { display: block; } .clearfix:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; line-height: 0; } /* IE6 */ * html .clearfix { height: 1%; } /* IE7 */ *:first-child + html .clearfix { min-height: 1%; } 
 <!-- РАБОТАЕТ УЖАСНО ЕСЛИ БЫСТО ВОДИТЬ МЫШКОЙ ТО плохо АНИМАЦИЯ ТОЛЬКО LINEAR — тоже плохо ХОЧУ ПРОЩЕ из за setTIMEOUT, тоже каша получается - работает ужасно... --> <div class="menu clearfix"> <div class="menu__line menu__line--first"> <span class="menu__line--red"></span> </div> <div class="menu__point"></div> <div class="menu__line"> <span class="menu__line--red"></span> </div> <div class="menu__point"></div> <div class="menu__line"> <span class="menu__line--red"></span> </div> <div class="menu__point"></div> <div class="menu__line"> <span class="menu__line--red"></span> </div> <div class="menu__point"></div> <div class="menu__line"> <span class="menu__line--red"></span> </div> <div class="menu__point"></div> </div>

0