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

Мы подготовили новую версию авто-листающегося меню сайта, улучшили и упростили код, сделав вариант полностью на 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:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

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

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