Using JQuery to visually enhance the menu selection by displaying an image and altering the background color upon hovering

Question

Using JQuery to visually enhance the menu selection by displaying an image and altering the background color upon hovering

Hello fellow JQuery/Javascript beginners! I recently put together a menu and wanted to add some interactive elements. Specifically, I want the background color to change when a user hovers over an item (simple enough with CSS), but I also want to include an arrow that appears when an item is selected. This arrow should remain visible until another item on the menu is chosen, similar to what Zappos has achieved with their mini floating menu next to the shoes: .

I've already searched through numerous Stackoverflow posts on highlighting selected menu items, but none quite hit the mark like Zappos' implementation.

Any assistance or guidance would be immensely appreciated!

anaanzi

javascript jquery html css

Answer 1

Answer №1

Take a look at my work on JSFiddle here.

If you want to achieve a similar effect on Zappos, use the following code:

$(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');
    });
});

Edit: To add an arrow effect, include a background with an arrow in the CSS class. This can be triggered on hover (gray class) or on click (blue class).

Answer 2

Take a look at my work on JSFiddle here.

If you want to achieve a similar effect on Zappos, use the following code:

$(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');
    });
});

Edit: To add an arrow effect, include a background with an arrow in the CSS class. This can be triggered on hover (gray class) or on click (blue class).

Answer 3

Answer №2

To create a hover effect, you can utilize CSS. If your navigation is structured as an unordered list with the class "nav", your code might resemble the following:

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

For a click effect, jQuery can be used to add a class to the clicked list item. In the example below, the code removes the 'active' class from all list items and then adds it to the clicked item:

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

You can view a working example in this jsfiddle link: http://jsfiddle.net/8CMxG/

Answer 4

To create a hover effect, you can utilize CSS. If your navigation is structured as an unordered list with the class "nav", your code might resemble the following:

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

For a click effect, jQuery can be used to add a class to the clicked list item. In the example below, the code removes the 'active' class from all list items and then adds it to the clicked item:

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

You can view a working example in this jsfiddle link: http://jsfiddle.net/8CMxG/

Using JQuery to visually enhance the menu selection by displaying an image and altering the background color upon hovering

Answer №1

Answer №2

Similar questions

Mask the "null" data in JSON

Implementing CSS in Laravel 8

Why does the content not appear again when switching between tabs?

What is the most effective method for filtering a table using both column-specific and global filters?

Fetching data using Axios from a specified URL

Having trouble with `request.auth.session.set(user_info)` in HapiJS?

Attempting to implement the tagify plug-in in order to automatically fill a text field with dynamic labels

Obtain the text content in cases where the DOM is missing both the title and value fields

Low-quality CSS Gradient Design

Other options besides re-flowing and repainting

Here's a guide on how to retrieve the element type or tag type in Selenium using C#

Combining two Angular expressions

Converting Excel VBA code to Javascript for use in Google Sheets: A step-by-step guide

The tooltip is being truncated

Simple steps to change JSON Object to JavaScript array

Tips for resolving the React Hook Type Error issue

Using AJAX to showcase data from a table in a database using the <select> tag but with an unfinished submit process

Struggling to update the text within a div using HTML5 data attributes

Ways to retrieve property value from a component in Vue.js 2.0

Unable to insert an array within a function