Is it possible to automatically close navigation dropdowns when the screen size changes?

Question

Is it possible to automatically close navigation dropdowns when the screen size changes?

I am using a bootstrap 4 navbar with dropdowns that open with CSS animation/fade-in on desktop, and a separate toggle button for mobile. Everything works fine, but when I open the dropdowns on mobile and then resize the window screen, they remain open which doesn't work well with the animation. Is there a way to automatically close the dropdowns when the window is resized or reaches the desktop breakpoint?

HTML:

<ul class="navbar-nav">
<li class="nav-item dropdown">
    <div class="nav-title-flex-container">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href=“home.html"
           id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline"> Home</span>
        </a>
        <span class="openNav"><i class="fa fa-angle-right"></i></span>
    </div>

    <div class="dropdown-menu dropdown-menu-nav-bottom"
         aria-labelledby="navbar-drop-downs">
        <a class="dropdown-item" href=“#”>Sub Page</a>
        <a class="dropdown-item" href=“#”>Sub page</a>
    </div>
</li>
<li class="nav-item dropdown">
    <div class="nav-title-flex-container">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="how-to-be-vocal.html"
       id="navbar-drop-downs"
       aria-haspopup="true" aria-expanded="false">
        <span class="underline”>About </span>
    </a>
        <span class="openNav"><i class="fa fa-angle-right"></i></span>
    </div>
    <div class="dropdown-menu dropdown-menu-nav-bottom"
         aria-labelledby="navbar-drop-downs">
        <a class="dropdown-item" href=“#”>Sub Page</a>
    </div>
</li>
</ul>

CSS:

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


@media (min-width: 1199px) {
  .dropdown:hover > .dropdown-menu {
    display: block;
    z-index: 100;
    position: absolute;
    animation: fadein .7s;
  }
}

JQuery: (toggling dropdowns/mobile)

  $openNavToggle.on('click', function () {
  $(this).parent().next('.dropdown-menu-nav-bottom').toggleClass('show');
  $(this).find('i').toggleClass('fa-angle-right--active');
});

javascript jquery html css

Answer 1

Answer №1

To utilize the jQuery resize event handler, follow these steps.

Ensure that you are removing classes instead of just toggling them; otherwise, the navigation may unexpectedly appear during resizing.

$openNavToggle.resize(function () {
  $(this).parent().next('.dropdown-menu-nav-bottom').removeClass('show');
  $(this).find('i').removeClass('fa-angle-right--active');
})

Add a debouncing mechanism to the resize function to ensure it only takes effect at the end of the resizing process:

let resizeEvent;
$openNavToggle.resize(function () {
  clearTimeout(resizeEvent);
  resizeEvent = setTimeout(() => {
    $(this).parent().next('.dropdown-menu-nav-bottom').removeClass('show');
    $(this).find('i').removeClass('fa-angle-right--active');
  }, 300);
})

Answer 2

To utilize the jQuery resize event handler, follow these steps.

Ensure that you are removing classes instead of just toggling them; otherwise, the navigation may unexpectedly appear during resizing.

$openNavToggle.resize(function () {
  $(this).parent().next('.dropdown-menu-nav-bottom').removeClass('show');
  $(this).find('i').removeClass('fa-angle-right--active');
})

Add a debouncing mechanism to the resize function to ensure it only takes effect at the end of the resizing process:

let resizeEvent;
$openNavToggle.resize(function () {
  clearTimeout(resizeEvent);
  resizeEvent = setTimeout(() => {
    $(this).parent().next('.dropdown-menu-nav-bottom').removeClass('show');
    $(this).find('i').removeClass('fa-angle-right--active');
  }, 300);
})

Answer 3

Answer №2

One way to handle changes in window size is to listen for the resize event:

window.addEventListener('resize', (e)=>{
    // Perform your show/hide functions here.
    // You can also check the new width and apply specific logic accordingly.
});

Answer 4

One way to handle changes in window size is to listen for the resize event:

window.addEventListener('resize', (e)=>{
    // Perform your show/hide functions here.
    // You can also check the new width and apply specific logic accordingly.
});

Answer 5

Answer №3

Here is a simple method to hide content:

function hideContent() {
   $(this).parent().next('.dropdown-menu-nav-bottom').toggleClass('hide');
   $(this).find('i').toggleClass('fa-angle-right--inactive');
}

Attach it to the resize event:

$(window).resize(hideContent);

Answer 6

Here is a simple method to hide content:

function hideContent() {
   $(this).parent().next('.dropdown-menu-nav-bottom').toggleClass('hide');
   $(this).find('i').toggleClass('fa-angle-right--inactive');
}

Attach it to the resize event:

$(window).resize(hideContent);

Answer 7

Answer №4

Yes, you have the option to utilize the window resize event for this purpose.

You can then verify if the size meets the necessary dimensions and take appropriate action.

To enhance performance, a commonly employed technique is using the debounce method in combination with it:

Answer 8

Yes, you have the option to utilize the window resize event for this purpose.

You can then verify if the size meets the necessary dimensions and take appropriate action.

To enhance performance, a commonly employed technique is using the debounce method in combination with it:

Is it possible to automatically close navigation dropdowns when the screen size changes?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I am encountering an issue with Angular where the following error message is displayed: "src/app/app.component.html:18:20 - error TS2339: Property 'DepScreen' does not exist on type 'AppComponent'"

Adjusting the array of buttons with various functions within the Header component

Guide on stacking two divs on each other in response to a decrease in screen width

Developing asynchronous DOM functions for optimal performance

Navigational menu that slides or follows as you scroll

Having trouble with clearing divs function not working as expected

Using ng-repeat within another ng-repeat allows elements to be displayed as siblings

Showing JSON response on an HTML page using AngularJS

Issue occurs when a circle element is not following a div element on mouse

No results found for the xpath within the <p> tag

When hovering over an element in Firefox, the mouse event triggers twice causing a flicker. Is there a solution to prevent this flickering issue?

How come my web page is not displaying the guages from guage.js?

Examining REST API functionality through the use of a Console, requiring an integer list as a parameter

Tips for submitting a form after a successful transaction with PayPal

Using a combination of radio buttons and JavaScript to adjust the color of a div element

Troubleshooting: Node.js not receiving data from HTML form

Using setTimeout with jQuery.Deferred

Unable to render the JSON data that was retrieved from a jQuery AJAX request

Add axios requests to the axios.all array

Align dropdown navigation menu/sorting dropdown in the same position as the button