Послушно-листающиеся табы или меню сайта

Автор: Aport Понедельник, Февраль 2nd, 2015 Нет комментариев

Рубрика: Уроки JavaScript

Послушно-листающиеся табы или меню сайта

Мы подготовили новую версию авто-листающегося меню сайта, улучшили и упростили код, сделав вариант полностью на 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 и всех остальных нормальных браузерах, но наверняка Вы себе отверстаете что-то более симпатичное.

Всем красивых и удобных сайтов ;)

 

Источник: yapro.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты

  • Похожие посты отсутствуют