Мы подготовили новую версию авто-листающегося меню сайта, улучшили и упростили код, сделав вариант полностью на jQuery и с переключением меню в зависимости от наведения мышки.
По сути это продолжение статьи Меню сайта, шаги или красивые табы, в которой был пример с немного сложным для новичка подключением. Теперь все просто, зацените.
Пример
Посмотреть пример на отдельной странице »
Как видите, плагин создан на основе mouseover, к тому же верхний блок теперь тоже кликабилен.
Как подключить на своем сайте
Свое верхнее меню поместите в див с классом steps, например так:
<div class="steps"> <a href="/1">ссылка 1</a> <a href="/2">ссылка 2</a> <a href="/3">ссылка 3</a> ... </div>
Свои нижние меню поместите в вложенные дивысайт источник http://yapro.ru Fri Nov 12 2010 11:34:35 GMT+0300 с классами stepsWrapper и stepsInner, например так:
<div class="stepsWrapper"><div class="stepsInner">
<div>Подменю 1</div>
<div>Подменю 2</div>
<div>Подменю 3</div>
...
</div></div>
Код плагина
Поместите следующий код в любое местосайт источник http://yapro.ru Fri Nov 12 2010 11:34:47 GMT+0300 своей страницы или в отдельный JavaScript-файл
<script type="text/javascript">
$(document).ready(function(){
var curStep = 0;
$(".steps A").each(function(i){
$(this).mouseover(function(){
$(".steps A").removeClass("mouseover");
$(this).addClass("mouseover");
var left_ = parseInt( $('.stepsWrapper').width() ) * ( i );
var term = ( 250 * Math.abs( i - curStep ) ) - ( 120 * Math.abs( i - curStep ) );// здесь можно отрегулировать скорость
$('.stepsInner').animate({left:-left_},term);
curStep = i;
});
});
$(".YAVIBRAN").trigger('mouseover');
});
</script>
Автопереключение на выбранное меню
Для этого нужной ссылке меню добавьте класс YAVIBRAN, например так:
<a href="/2" class="YAVIBRAN">ссылка 2</a>
все остальное скрипт сделает за Вас.
Красота
В примере есть ряд CSS-правил, которые корректно работают в IE8 и всех остальных нормальных браузерах, но наверняка Вы себе отверстаете что-то более симпатичное.
Всем красивых и удобных сайтов ;)
