Ползунок, бегающий за мышкой в меню js
Сегодня мы научимся делать ползунок (полосочку, границу, шильдик, бздюшку - как хотите), который будет следовать по меню за курсором. Более того, если мышка отведена от пунктов меню, то наш бегунок вернется к выделенному пункту меню. На мой взгляд, довольно интересная штука, поэтому приступим.
Комментировать код я не буду - все понятно (да и лениво очень).
Структура нашего меню на html:
<div class="menu"> <ul> <li class="active">Первый пункт меню</li> <li>Второй</li> <li>Третий</li> <li>Четвертый самый длинный пункт меню</li> </ul> </div> <div id="border"></div>
Тут все очень легко и даже тривиально. Кстати, последний элемент с id="border" и есть наш бегунок. Перейдем к стилям:
body { margin:0; padding:0; } .menu ul { list-style:none; margin:0; padding:0; } .menu ul li { float:left; padding:10px; margin:0; cursor:pointer; } .menu ul li.active { background-color:green; } .menu ul li:hover { background-color:yellow; } #border { height:3px; background-color:red; position:absolute; }
Ничего сложного. Задаем оформление для меню и нашего бегунка. Фоновые цвета определены для визуального восприятия.
Теперь виновник торжества - скрипт, который все это дело оживит:
$(document).ready(function () { var style = 'easeOutExpo'; var default_left = Math.round($('.menu ul li.active').offset().left - $('.menu ul').offset().left); var default_top = $('.menu ul li.active').height()+30; /* 30 - отступ от пункта меню */ var default_width = $('.menu ul li.active').outerWidth(); $('#border').css({left: default_left, top: default_top, width: default_width}); $('.menu ul li').hover(function () { left = Math.round($(this).offset().left - $('.menu ul').offset().left); width = $(this).outerWidth(); $('#border').stop(false, true).animate({left: left, width: width},{duration:500, easing: style}); }).click(function () { $('.menu ul li').removeClass('active'); $(this).addClass('active'); }); $('.menu ul').mouseleave(function () { default_left = Math.round($('.menu ul li.active').offset().left - $('.menu ul').offset().left); default_width = $('.menu ul li.active').outerWidth(); $('#border').stop(false, true).animate({left: default_left, width: default_width},{duration:1500, easing: style}); }); });
Не забываем, что для работы скрипта, помимо основной библиотеки jQuery, нам понадобится библиотека query.easing.1.3.js. Можете скачать ее из архива ниже.
Важное в скрипте - это 30 - помечено в комментарии - отступ сверху от пункта меню (также можно задать через css.
Полный код страницы:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.easing.1.3.js"></script> <style> body { margin:0; padding:0; } .menu ul { list-style:none; margin:0; padding:0; } .menu ul li { float:left; padding:10px; margin:0; cursor:pointer; } .menu ul li.active { background-color:green; } .menu ul li:hover { background-color:yellow; } #border { height:3px; background-color:red; position:absolute; } </style> <script> $(document).ready(function () { var style = 'easeOutExpo'; var default_left = Math.round($('.menu ul li.active').offset().left - $('.menu ul').offset().left); var default_top = $('.menu ul li.active').height()+30; /* 30 - отступ от пункта меню */ var default_width = $('.menu ul li.active').outerWidth(); $('#border').css({left: default_left, top: default_top, width: default_width}); $('.menu ul li').hover(function () { left = Math.round($(this).offset().left - $('.menu ul').offset().left); width = $(this).outerWidth(); $('#border').stop(false, true).animate({left: left, width: width},{duration:500, easing: style}); }).click(function () { $('.menu ul li').removeClass('active'); $(this).addClass('active'); }); $('.menu ul').mouseleave(function () { default_left = Math.round($('.menu ul li.active').offset().left - $('.menu ul').offset().left); default_width = $('.menu ul li.active').outerWidth(); $('#border').stop(false, true).animate({left: default_left, width: default_width},{duration:1500, easing: style}); }); }); </script> </head> <body> <div class="menu"> <ul> <li class="active">Первый пункт меню</li> <li>Второй</li> <li>Третий</li> <li>Четвертый самый длинный пункт меню</li> </ul> </div> <div id="border"></div> </body> </html>