Show submenu upon hovering and make sure it remains visible

Is there a way to keep a submenu displayed and the background color changed even after moving the mouse away from the menu item onto the submenu?

This is my HTML:

<div class="shoplink"><a>Online Shop</a></div>
<div id="shop-menu">
            <ul>
                <li>Food</li>
                <li>Home & Living</li>
                <li>Personal Assistance</li>
                <li>Kids</li>
                <li>Musical Instruments</li>
                <li>Beauty & Wellbeing</li>
                <li>Outdoor</li>
                <li>Office & Stationery</li>
                <li>Cards & Gift Paper</li>
                <li><b>Browse All</b></li>
            </ul>
        </div> <!-- #shop-menu -->

Here is my current JS code:

$('#shop-menu').hide();
$('.shoplink').live('hover', function(e) {
    $(this).toggleClass('activeitem');
    $('#shop-menu').toggle();
});

I want the shop-menu to remain visible even when I move the mouse away from .shoplink onto the submenu. Any suggestions would be greatly appreciated. Thank you!

jquerycss

Answer №1

It appears that your toggles are responsible for displaying and hiding the menu. You can try the following code:

$('#shop-menu').hide();
$('.shoplink').live('hover', function(e) {
    $(this).addClass('activeitem');
    $('#shop-menu').show();
});

If you need to revert the changes, you can refer to @Madhu Rox's answer and follow these instructions:

$('#shop-menu').live('mouseleave', function(e) {
    $('.shoplink').removeClass('activeitem');
    $('#shop-menu').hide();
});

Another option is to use the unbind function to remove the hover event like this: $(this).unbind('hover');. However, keep in mind that if another action on the page closes the menu and you want to reopen it, you will have to rebind the hover event.

Answer №2

Consider placing the dropdown option within the menu item itself

<div class="shoplink">
     <a>Online Shop</a>
     <div id="shop-menu">
            <ul>
                <li>Food</li>
                <li>Home & Living</li>
                <li>Personal Assistance</li>
                <li>Kids</li>
                <li>Musical Instruments</li>
                <li>Beauty & Wellbeing</li>
                <li>Outdoor</li>
                <li>Office & Stationery</li>
                <li>Cards & Gift Paper</li>
                <li><b>Browse All</b></li>
            </ul>
     </div> <!-- #shop-menu -->
</div>

Demo: http://jsfiddle.net/cU629/

Answer №3

Revise your HTML by enclosing the entire submenu and menu item within the <div class="shoplink">

Here is how your code should look:

<div class="shoplink">
  menu item
    sub menu
</div>

Alternatively, you can update your JavaScript as suggested in the previous answer:

$('#shop-menu').hide();
$('.shoplink').live('hover', function(e) {
    $(this).addClass('activeitem');
    $('#shop-menu').show();
});

Don't forget to include the following code after that:

$('#shop-menu').live('mouseleave', function(e) {
    $('.shoplink').removeClass('activeitem');
    $('#shop-menu').hide();
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The two <p> elements are being pushed to the right column, which is not their intended display

A snippet of less.css code is available at this link: #content { overflow: hidden; width: 100%; p { float: left; width: 465px; padding: 0px 25px 0px 35px; margin: 0px; br { line-height: 2. ...

htmlcsscss-floatless

Steps for importing a jQuery script into a Vue component

Looking to include a basic jQuery script in my Vue file. Attempted to import it using the following method: In the Vue file import {myScript} from "@/components/scripts/myScript.js" Then in the myScript.js file : export const myScript = { $('.cl ...

jqueryvue.js

The Jquery function is failing to activate when selecting an option

I am encountering an issue with triggering a jQuery function when selecting a value from a dropdown. The change event is not being fired, while the click event works but triggers twice. I specifically need only the change event to be triggered. <scri ...

jquery

Customizing Material UI: Adjusting the visibility of slider thumb upon user interaction and value changes in the slider

In my application, I have implemented a Material UI Slider and I am looking to keep the thumb invisible until the user interacts with it. Once the user changes the slider value, I want the thumb to remain visible at that specific value. By using the CSS pr ...

cssreactjsmaterial-uislider

What steps would you take to create a WCF service that can stream images to an iframe?

I am currently tackling a project that involves a collection of tiff images stored on a file server accessible only locally. The challenge lies in displaying these tiff images on a web browser, which has proven to be quite difficult. Here is the approach I ...

jqueryasp.netajaxwcfiframe

Activate the stripe button after successful bootstrap validation

My goal was to implement BootstrapValidator for validation on a couple of fields and enable the Stripe button only when both fields are valid. Currently, the button is enabled once any of the fields pass validation. The challenge lies in ensuring that the ...

javascriptjquerytwitter-bootstrap

Ways to adjust the size of an HTML fieldset?

Is there a way to decrease the space between the paragraph and the border of this fieldset? I attempted to adjust the margins in the following manner: fieldset { margin: 1px; margin-top: 2px; border-top-right-radius: 1px; } <fieldset> < ...

htmlcss

Disconnect the parent when the child is clicked in CSS

I am struggling to find a solution for this issue. Currently, I have a hover effect where when I click on a submenu li item, the parent li also gets highlighted. You can see the behavior in the image below: https://i.sstatic.net/Ie6Lb.png Is there any w ...

jquerycss

Adjust the text size of Twitter Bootstrap on mobile screens

I recently started using Twitter Bootstrap. I am currently hiding certain <tr> elements on phone screens by utilizing the class="hidden-phone". However, I am now looking to resize the displayed text to better fit the screen. Is there a way to adjus ...

htmlcsstwitter-bootstrapresponsive-design

Steps for adding a JSON object to an unordered list

After receiving data from a web server, I created a JSON object using the code obj = JSON.parse(data). This object contains information about dinosaurs such as their name, group, diet, and period. This is what the JSON object looks like: [{"name":"Stauri ...

javascriptjqueryjsonlistunordered

Difficulty with Bootstrap 4 mobile navbar dropdown feature

<div class="baslik baslik1 baslik2 "> <nav class="navbar bg-light navbar-light navbar-expand-sm sticky-top "> <a href="./index.html" class="navbar-brand"><img src="img/512x512logo.png" ...

javascriptcss

Troubleshoot jQuery in an ASP.NET application

Is there a way to intercept the jQuery function call in my Web app that displays a <div>? I want to identify exactly what triggers the appearance of that <div>. I am looking to display the same div using a different button, but the original bu ...

c#jqueryasp.net

Transferring Data from Mod_rewrite to PHP using HTML and JavaScript for the User Interface

My web application has two components: the front end built with HTML, JavaScript/jQuery, and the back end using PHP. In its previous state, it utilized unsightly URLs such as host/app/Page.php?userid=1... definitely not aesthetically pleasing! But with a ...

phpjavascriptjquerymod-rewrite

What is the best way to handle AJAX responses in an onchange event

I'm working on a form where the select option in the input (jurusan) is automatically filled based on the selected value. I need to know how to change the value that appears after selecting an option. For example, if I select option A, it displays th ...

javascriptjqueryajax

Utilizing jQuery's extend method for object inheritance in a function

I've been experimenting with using jquery extend to simulate inheritance, but it seems that it only works with objects based on my testing. My goal is to achieve the following: var baseDefinition = function() { var self = this; self.calc1 = ...

javascriptjquery

Guide to creating a toggle button

Can someone help me create a button that toggles between displaying block and display none when clicked? I've been trying to use Classlist.toggle with JavaScript, but I'm not sure if I have the correct classes targeted. let showCart = documen ...

javascripthtmlcss

How to use the window.confirm method to print the HTML tag in an AJAX post

Is there a way to display a confirmation window for users who want to delete data from the database without including HTML tags like <strong> or <br />? I am currently using the confirm() function as follows: var str = document.getElementById ...

javascriptjqueryajax

Learn how to refresh weather data based on a selected option value using Ajax POST requests

I have been attempting to retrieve weather information when the select value changes. I have referenced several posts, such as this one among others, but so far none have solved my issue. While it may appear straightforward, I am still struggling with it. ...

phpjqueryajax

Issue with Abide Validation Events not triggering in Reveal Modal for Foundation Form

Currently, I am developing a login/registration feature for a basic web application using Foundation. On the index page, users are presented with a login screen and a register button. When the user clicks on the register button, a Reveal Modal pops up cont ...

javascriptjqueryformsvalidationzurb-foundation

Learn the technique of hovering over an image to see it blur and reveal overlay text

Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome. <div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;"> <span class="text ...

javascriptjqueryhtmlcss