Having trouble with the Slide Toggle menu closing unexpectedly?

$('span.nav-btn').click(function () {
        $('ul#menu').slideToggle();
    })  
$(window).resize(function () {
    if ( $(window).width() > 900) {
        $('ul#menu').removeAttr('style')
    }
});

$('span.sub-btn').click(function () {
        $('ul#sub').slideToggle();
        $(this).toggleClass('active'); return ('false');
    })

$(window).resize(function () {
    if ( $(window).width() > 900) {
        $('ul#sub').removeAttr('style')
    }
}); 

http://codepen.io/anon/pen/Hnhea

Good day! I am facing an issue with my code. When the browser window is resized to around 900px, clicking on "MENU" and other items hides the submenu when the mouse moves elsewhere, making it appear as if it's only visible on hover.

Does anyone have a solution for keeping the submenu visible even when the mouse moves away?

Thank you.

Answer №1

To ensure your website looks good on different screen sizes, make sure to organize your style rules for each viewport.

Check out an example at http://codepen.io/anon/pen/pFtuh

You may need to clean it up a bit as well.

Here's an example*:

#menu ul {
  /*opacity: 0;*/
  /*visibility: hidden;*/
  display: none;
}

#menu li:hover > ul {
  display: block;
  /*opacity: 1;*/
  /*visibility: visible;*/
}

@media screen and (max-width:900px) {
  #menu ul {
    position: relative;
    ...
  }
  #menu li:hover > ul {
     display: none;
  }
...

*These are the only modifications that have been made.

Make sure to adjust for mobile viewports where you don't want hover effects on dropdowns and may need to change positioning to relative.

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

Configuring webpack for live reloading and Hot Module Replacement on static pages

The title of this post may not be very clear, but I appreciate your patience. I am currently in the process of setting up React for an older Rails application that uses static ERBs. Due to the size of the project, I am gradually transitioning towards a Si ...

What is the best way to implement nested iterations in Jade?

ul li a(href='') menu1 li a(href='') menu2 ul li a(href='') sub-menu2 li a(href='') menu3 ul li a(href=&apos ...

A step-by-step guide on changing an image

Is it possible to change an image when the user clicks on a link to expand its content? <ul class="accor"> <li> Item 1 <img src="../plus.png"> <p> Lorem ipsum dolor sit amet</p> </li> </ul> $(' ...

The see-through background causes my text to blend in seamlessly as well

While creating a text box with a black transparent background, I encountered an issue where the text also became transparent. Can someone please point out where I went wrong? style.css #headertxt { position: absolute; right: 20px; bottom: 100px; backgr ...

Error: Headers cannot be set once they have already been sent. I am perplexed as to why this is occurring

I can't seem to pinpoint the source of the problem...After researching the meaning of this error, it appears that I may be either sending a request or response twice somewhere in my code. However, I have thoroughly reviewed my code and cannot find any ...

Why isn't the Full Calendar loading automatically within a Bootstrap Tab?

I have been working on a travel website and incorporated a bootstrap tab feature. In the first tab, I have some content, while in the second tab, I've added a full calendar with JavaScript. Everything seems to be functioning correctly when the full ca ...

Image fails to download on Safari and iPhones in PHP

Can anyone help me figure out why images are opening in a new window instead of downloading inside Chrome and Firefox on my iPhone? ...

What is the best way to eliminate excess white space on the right side in WordPress for a mobile perspective?

Is there a quick way to identify which element has shifted beyond the border? It seems like there is excess margin. How can I pinpoint the issue? The link to the broken page on mobile is I applied this style * {border: 2px solid red;} and no elements shif ...

Why does my Node.js server-hosted site get downloaded as a file by IE9, Opera, and older versions of Safari?

I'm feeling completely stuck. This whole situation just doesn't make any sense to me. Even though I'm new to HTML5, CSS, and Javascript, I've put together what I think is a decent (albeit unfinished) website design and a simple (also u ...

Why would triggering an input event have any effect if it doesn't appear to be utilized anywhere?

We have developed a custom Vuetify 3 component known as FilterPanel. Here is a simplified version: <template> <div> <v-container> <v-row> <v-col cols="3"> <v-select v-model="fiel ...

MVC3 does not support JQuery UI

Just recently, I had all my jquery-ui elements functioning perfectly. However, now it seems that none of the jquery-ui features are working anymore. In my Site.Master page, I have included the following code... <link href="../../Content/Site.css" rel=" ...

Tips on maintaining the parent's scope in CoffeeScript while making an AJAX call

I need to iterate through an object in CoffeeScript and make an AJAX call for each item in the object using jQuery. However, I'm facing an issue with losing the reference to the initial context in the callback function of the AJAX call. The context al ...

Adjusting a PHP variable based on the specific link that was clicked

I have implemented a loop to display a page with a list of users: foreach ($mytaxonomies as $mytaxonomy) : setup_postdata($mytaxonomy); echo $mytaxonomy->name; // display the user's name echo '<a>Send email</a>'; endfore ...

What is the best way to implement a sub-menu using jQuery?

After successfully implementing a hover effect on my menu item using CSS, I am now struggling to make the sub-menu appear below the menu item upon hovering. Despite my efforts to search for jQuery solutions online, I have not been successful. Are there a ...

Design and styling with HTML5 and CSS

Having a small issue with my code as I venture back into coding after a long hiatus, resulting in me forgetting some basics. Currently, I am attempting to create a simple HTML layout. Upon inspecting the page, I noticed that it appears slightly longer tha ...

Using Flexbox to center items is leading to content overlapping

After attempting to utilize flexbox for centering items, I am encountering issues with content overlapping and misalignment. Link to the code snippet .footer_3 { position: relative; display: flex; align-items: top; justify-content: center; top: ...

Activate AngularJS autocomplete when populating the input field using JavaScript

I'm currently facing an issue with updating the value of an input field on a website using JavaScript. Although I can successfully update the input field's value, I find that I am unable to trigger the autocomplete feature. Interestingly, when ...

What sets $vm.user apart from $vm.$data.user in Vuejs?

When you need to retrieve component data, there are two ways to do so: $vm.user and $vm.$data.user. Both methods achieve the same result in terms of setting and retrieving data. However, the question arises as to why there are two separate ways to access ...

Exporting Rendered HTML from a v-html Component in Vue

Utilizing the library sheetjs, I am generating HTML from an Excel range by utilizing the function sheet_to_html(). This generated HTML is then used to display a table using the v-html directive. Users can interact with the table by adding or removing class ...

What are the circumstances in which it is not advisable to develop a jQuery plugin?

What is the best approach for building a plugin: combining data, logic, and view within the plugin like a black box or separating them into individual components? ...