Sub-menu disappears upon resizing the screen

Currently, I am working on creating a unique responsive navigation system that transforms into a 100% width pulldown menu for mobile devices. To achieve this functionality, I have implemented some JavaScript code that hides any open sub-menu items when the window is resized to a new breakpoint (typically at 768px). However, I have encountered an issue where if a sub-menu is opened in the mobile view and then the window is suddenly resized, the hover effect stops working and the sub-menu items fail to appear on the larger screen size.

If you would like to see a simplified version of my navigation setup, you can check out this JSFiddle: https://jsfiddle.net/5h5bhwu4/2/

The section of JavaScript that I suspect may be causing the problem is as follows:

    if (w > 768) {
        $("#nav > li > ul").hide();
    }

When testing, I noticed that if I click on the first menu item in the small screen size, then resize the window, the same sub-menu fails to display when hovering over the parent item. However, if I start at a larger screen size or do not open the sub-menu in the small screen view, everything works correctly. It seems like there may be an issue with the JavaScript logic preventing the sub-menu from appearing properly.

javascriptjqueryhtmlcssresponsive-design

Answer №1

To achieve the hover effect, it's important to implement it using JavaScript rather than CSS.

One approach is to check the window size:

if (w > 768) {
    $("#nav > li > ul").hide();
    // Add hover functionality here
}

Enforcing the hover behavior requires utilizing JavaScript as opposed to CSS.

Answer №2

When utilizing the .hide() function, it inserts inline style display:none which consistently overwrites the existing styles. The recommended approach is to define a separate class and apply that class instead.

  if (w > 768) {
            $("#nav > li > ul").removeAttr('style'); // removing the inline style added by slideToggle
            $("#nav > li > ul").addClass('hidden');
        }

CSS

.hidden {
    display: none;
}

Check out the Fiddle Demo here

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

I'm facing an issue where TailwindCSS fails to stretch my VueJS application to full screen width

My components are all contained within a div with classes flex-row, w-screen, and content-center. However, when I switch to reactive/mobile mode on the browser, it only takes up about 2/3 of the screen and doesn't fill up the remaining space. Below i ...

javascripthtmlcssvue.jstailwind-css

Is there a way to programmatically emulate Firebug's inspect element feature using JavaScript?

Is there a straightforward method in JavaScript or any popular libraries like YUI or jQuery to allow users to interact with elements on a website, similar to the functionality of Firebug for developers? ...

jqueryyuifirebugjavascriptinspect

Can you tell me what is creating the space between the elements in this form?

For an example, take a look at this link: I am puzzled by the gap between the form-group and the button, as well as between the different form-groups. When using Bootstrap 4 with flexbox activated, all my elements (inputs and buttons) collapse without any ...

csstwitter-bootstrapgoogle-chrome-devtools

Pulling Specific HTML Element from External Website with PHP

<?php $info = file_get_contents('http://examplewebsite.com/data'); echo $info; ?> I am trying to extract specific information from a remote website using PHP, focusing only on certain tags. While I have found a script that allows me t ...

phphtmlhtml-parsing

``There seems to be an issue with the functionality of JSON.stringify

Upon attempting to use the JSON.stringify() method to convert an array of strings into a JSON object for passing to a PHP script, I encountered an issue where the method did not return any meaningful output. The code provided is the only one handling the ...

javascriptarraysjsonstringify

utilize JavaScript on every element that has a specific identifier

<a id="link" href="http://www.google.co.uk">link</a> <a id="link" href="http://stackoverflow.com">link</a> Is there a way to make the JavaScript code apply to all <a> tags with the id="link", instead of just the first one? A ...

javascriptjquery

JavaScript: Share module contents internally through exporting

When working with Java, there are 4 different visibility levels to consider. In addition to the commonly known public and private levels, there is also the protected level and what is referred to as the "default" or "package-local" level. Modifier Clas ...

javascriptnpmmoduleexportpackage-private

Utilize JQuery to extract data from JSON and populate form inputs

Working on a web project where I need to make use of AJAX and JQuery to update certain fields without refreshing the entire page. After testing, everything seemed to work fine with dummy data. However, when trying to parse actual JSON data generated from M ...

phpjquerymysqljsonajax

Steps for closing the menu by clicking on the link

My issue with the menu on the landing page is that it only closes when clicking the cross button. I want it to close when any link from the menu is clicked. I attempted to add code using querySelector, but it only worked for the home link and not the other ...

javascripthtmlcss

How can I stop MUI Button from automatically becoming fullWidth?

One of the challenges I encountered was styling a Button component from MUI: export const ButtonStyle = styled((props) => <Button {...props} />)(({ theme }) => ({ marginTop: 8, marginBottom: 8, width: 'auto', borderRad ...

cssreactjsmaterial-ui

JavaScript code to change an array into a stringified format

I have encountered a challenge with transforming an array. The original array looks like this: array = [ { "name": "name", "value": "Olá" }, { "name": "age" ...

javascriptarraysjsonstringify

Tips on specifying a default value when receiving data from an API

I am working with a dropdown list that is populated from an API call. Here is my code snippet: <label>User Code:</label> <select ng-options="c as c.User for c in userList" ng-model="selectedUser" id="search3"> </select> To fet ...

javascriptangularjs

Material UI React Autocomplete Component

I'm currently working on integrating an Autocomplete component using the Material UI library. However, I've encountered a challenge - I'm unsure of how to properly pass the value and onChange functions, especially since I have a custom Text ...

javascriptreactjstypescriptautocompletematerial-ui

The callback function does not get invoked when using JSONP

Learning jsonP has been a challenge for me as I am relatively new to it. I have done my research by reading various articles but when trying out a simple example, the callback function fails to execute. Surprisingly, there are no errors or exceptions logge ...

javascriptajaxjsonp

Access information from Google Sheets through an AJAX GET request

I am facing an issue with my code while trying to retrieve data from a Google spreadsheet that I have already published. I have set the share properties of the spreadsheet to 'anyone can edit' and provided the correct URL, but I am still encounte ...

javascriptjqueryajaxgetgoogle-sheets

Is it possible to dynamically alter the text and contrast of your entire website?

In the realm of MVC 4 and Visual Studio 2013: I am pondering over how to dynamically change the text on my website with the simple click of a button. The same goes for adjusting contrast. Are there any plugins or techniques that could facilitate this proc ...

htmlcssfont-size

Reading JSON documents in JavaScript through multiline strings

Having a JSON document with multiline string data is causing issues for me. I have attempted multiple options, but none of them have successfully solved the problem. For example: [ { "someString" : "A rather long string of English text, an error m ...

javascriptangularjsjson

Using .change(); in JavaScript code with jQuery does not trigger a function

Here we have a generic code example for a jQuery function: $(document).ready(function() { if (something) { // This does something } else if (something else) { // This does something else } else { // And this does somethin ...

javascriptjqueryfunctionasp.net-mvc-4

Symfony is unable to access uploaded files from an AngularJS interface

For the past 3 days, I've been grappling with uploading files via AJAX to my Symfony2 application using AngularJS. I'm utilizing my Symfony app as an API to deliver data to my Angular front end. While I can successfully post text and other data, ...

javascriptangularjsajaxsymfonyfile-upload

Creating a table of contents in jQuery without the need for additional

I am looking to create a table of contents for an HTML document using jQuery, without the use of any plugins. I am still in the process of learning and improving my jQuery skills. Input HTML: <div id="toc"></div> <h3><a name="constru ...

jqueryjquery-selectors