JQuery выделяет элемент меню изображением, когда пользователь выбирает его и меняет цвет фона при наведении

0

JQuery/Javascript новичок здесь. Я создал меню. Когда пользователь наводит курсор на элемент в меню, я хочу изменить цвет фона. (Легко сделать с CSS.) Когда пользователь на самом деле выбирает элемент, я хочу, чтобы стрелка появлялась поверх имени элемента (например, эффект зависания с фоновым изображением). НО, в отличие от эффекта наведения, я хочу, чтобы стрелка оставалась пока пользователь не выберет другой пункт в меню. В принципе, я пытаюсь воссоздать то, что сделал Zappos здесь (см. Мини-плавающее меню слева от обуви): http://www.zappos.com/dr-scholls-jamie-black-dot?zfcTest=fcl% 3A0.

Я посмотрел на многие вопросы и ответы Stackoverflow о том, как выделить выбранный пункт меню, но ни один из них не совсем то, что я ищу, и это именно то, что делает плавающее меню Zappos.

Любая помощь будет принята с благодарностью!

anaanzi

Теги:

2 ответа

1
Лучший ответ

Посмотрите, что я здесь сделал в jsfiddle.

Сделать аналогичный эффект при zappos

$(document).ready(function() {

    $('ul li').hover(
        function() {
        if ( !$('div').hasClass('blue') ) {
            $(this).addClass('gray');
        }
        },
       function() {
           $(this).removeClass('gray');
       }
    );

    $('ul li').click( function() {
        $('ul li').removeClass('blue');
        $(this).addClass('blue');
    });
});

Изменение: вы можете добавить необходимый эффект стрелки, добавив фон со стрелкой в класс css. В зависимости от того, хотите ли вы стрелку при наведении (серый класс) или щелчок (синий класс)

Поделиться
  • 0
    Привет Рикардо. Это здорово, спасибо !! Есть ли причина, по которой вы выполняете функцию JQuery над тегом li вместо тега? Вот как я настроил это сейчас с тегом. Хотя из моего исследования я думаю, что это может вызвать проблемы с кодом JQuery, потому что в URL есть знак # (потому что они указывают на div с совпадающими идентификаторами.) Как бы я поменял местами синий квадрат для появления стрелки (изображение) (Как Zappos)?
  • 0
    Я смотрел не на ту коробку. Мой FF показал мне галерею фотографий, плавающую слева. Я проверил, используя приватный просмотр, и он показывал нужное поле со стрелкой. Код почти такой же. Только CSS меняется. Проверьте этот обновленный код .
Показать ещё 8 комментариев
0

Вы можете использовать css для эффекта наведения. Предполагая, что навигация является неупорядоченным списком с классом "nav", код будет выглядеть примерно так:

.nav li a:hover {
  background: #95ACC3;
}

Что касается эффекта щелчка, вы хотите использовать jQuery, чтобы добавить класс к любому элементу списка, который нажал. Например, приведенный ниже код сначала удаляет класс "активный" из всех элементов списка (это гарантирует, что только один элемент имеет активный класс за раз), затем он добавляет "активный" класс к любому элементу, который был нажат.

$('.nav li').click(function(){
  $('.nav li').removeClass('active');
  $(this).addClass('active');
});

Здесь jsfiddle с рабочим примером того, что я говорю: http://jsfiddle.net/8CMxG/

Поделиться
  • 0
    Это потрясающе, Тревис, спасибо, что нашли время! Когда пункт меню выбран, я бы хотел, чтобы появилось изображение стрелки (как в меню Zappos). Поэтому, когда пользователь нажимает на элемент меню, появляется изображение стрелки и остается до тех пор, пока не будет нажат другой элемент. Подскажите, пожалуйста, как это сделать?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню