Меню с плавной инверсией цвета

Представляю вашему вниманию меню с плавной инверсией цвета при перетекании курсора.


image
Под катом сам плагин и немного о концепции.

Как это работает

Для меню создается его клон облаченный в контейнер.
При наведении пользователем на элемент меню, позиция контейнера смещается на этот элемент, и внутренний контент так же прокручивается к этому элементу.

Наглядно:

image
Благодаря этому и достигается нужный эффект.

Подключение

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" 
        type="text/javascript"></script>
        <script src="js/inji_inversion_menu.js" type="text/javascript"></script>
        <script>
            $(function() {
                $( '.menu' ).inji_inversion_menu({bg:'#444',font:'#fff'});
            });
        </script>

Опции

options = {
      bg: '#000', // бэкграунд
      font: '#fff', // цвет шрифта
      activeclass: 'active', //класс активного элемента
      cloneclass: 'inji_inversion_menu_clone', // класс клона меню
      navcursorclass: 'inji_inversion_menu_navcursor', // класс курсора
      speed: 500 // скорость курсора в миллисекундах
    }


Ссылки

Демо
Архив с плагином
github

P.S.

буду признателен за конструктивные замечания и предложения по улучшению

upd

chrome fix
Firefox fix
добавлена настройка скорости
ie8 fix
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 33

    +2
    Есть небольшое замечание: в горизонтальном меню при перемещении курсора текст дергается.
    А в остальном все хорошо.
    Спасибо, что поделились наработками.
      0
      можно узнать браузер в котором вы тестировали?
        0
        Так же — Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.79 Safari/537.1
          +1
          Да, пардон, забыл указать браузер.
          Google Chrome 21.
            0
            chrome исправлен
              0
              Тоже хром 21 и тоже дергается, в вертикальном только. в горизонтальном нормально
              www.youtube.com/watch?v=1fq0HKXfcj4
          +1
          — В Firefox 14.0.1 нельзя перейти на последний пункт горизонтального меню.
          — В Firefox 14.0.1 надписи в горизонтальном меню явно меняют свое положение.
          — В Chrome 21.0.1180.79 надписи в горизонтальном меню «колбасит» при анимации.
            0
            " В Chrome 21.0.1180.79 надписи в горизонтальном меню «колбасит» при анимации."
            Вы хотели сказать в вертикальном?
              0
              Да, перепутал.
              0
              fix
              +1
              Занимательно, что ещё никто не предложил залить на гитхаб (ну или на битбакет). Предлагаю :-)
                +1
                видим уже сами залили и себе присвоили =)
                спасибо за подсказку =)
                +3
                Спасибо, пристрою себе на сайт
                Если случайно задеть мышкой меню, контейнер дернется в ее сторону.
                Возможно кому-нибудь пригодится, наткнулся в сети на плагин, «ждущий, когда мышка остановится», перед тем как вызвать onHover

                cherne.net/brian/resources/jquery.hoverIntent.html
                  0
                  Еще одно замечание: если навести мышь на пункт меню, а потом убрать (вбок с вертикального, вниз с горизонтального), то выделение возвращается на пункт «Third».
                    0
                    если речь идет о возвращении выделения к изначально активному пункту меню, то это так и было задумано. ведь если пользователь просто пробежится по меню и не станет никуда переходить, то маркер ведь должен и дальше сообщать, в каком разделе сайта мы сейчас находимся. либо я не совсем понял ваш вопрос
                    0
                    С точки зрения юзера скажу что в каком-нибудь интернет-магазине подобного не потерпел-бы. Подсветка выбранного пункта меню теряет смысл, т.к. я нажму туда сразу и не стану ждать несколько секунд ползущий к курсору индикатор.

                    предложения по улучшению:
                    Как минимум добавьте настройку скорости. Тогда можно говорить о юзабельности. А пока что забавно, не более.
                      0
                      доезда курсора ждать необязательно.

                      добавил настройку скорости
                        +1
                        Я вижу, что необязательно =) Я о том, что подсветка в таком случае не несет функциональной нагрузки. Если юзер успевает нажать на ссылку до того, пока доедет подсветка, зачем она нужна вообще?
                          0
                          это лишь дополнение к оформлению. пользователь не всегда моментально нажимает на нужный пункт. я например когда читаю меню.провожу по нему мышкой и для меня этот эффект интересен
                      0
                      Автор, в IE 8 проверял работу?
                        +1
                        за неимением оного к сожалению нет.
                          0
                          Есть под рукой
                            0
                            fixed
                              0
                              Да, теперь всё хорошо в IE 8.
                          0
                          Делали в своё время что-то подобное)
                            0
                              0
                              Использование плагина «lavalamp» не означает: «делать что-то подобно»!
                            0
                            Хорошая штука. Недавно чуть подробнее проникся подобными эффектами, как плеер себе новый скачал, теперь тоже подумываю на паре сайтов использовать.

                              0
                              Что за плеер?
                                0
                                AIMP и скин PureWhite.
                              0
                              Меню поддерживает многоуровневое вложение подменю?
                                0
                                сейчас такой поддержки нет, но это было в планах и думаю в скором времени появится
                                0
                                Пора бы уже анимацию отдавать на откуп css.
                                Пример можно посмотреть тут ekaterinabrovko.com/, ие конечно не поддерживается, но сделать поддержку и анимировать только для его не так сложно будет сделать.

                                Only users with full accounts can post comments. Log in, please.