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

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

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

Оцени публикацию:
  • 13,65
Оценили человек: 13
Теги : табы, меню, меню сайта, листающиеся табы, mouseover

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • (yea)
    09 апреля 2011, 16:07 коммент полезен : 0 # Гость
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » JavaScript »