Issue with menu height persisting while resizing screen

Question

Issue with menu height persisting while resizing screen

For my responsive design project, I am implementing a menu that switches to a menu button when the width is less than or equal to 768px.

Currently, I am using jQuery to dynamically adjust the height of the menu when the menu button is clicked. The jQuery script adds style="height: 152px;" to the nav element, while CSS3 with

transition: height 0.35s ease 0s;

ensures smooth sliding animation.

Everything works smoothly until I resize the window while the menu is displayed. When the width > 768px, the menu items are floated horizontally on the same line instead of stacking vertically below each other.

The issue arises from the fact that even though the menu is no longer needed, it maintains a height of 152px, creating unnecessary space below it.

I have attempted to find a listener that can detect when the menu button becomes hidden (display: none;) so that I can remove the inline style, but so far, I have not been successful.

If anyone has a straightforward solution to this problem, any help would be greatly appreciated.

Here is a link to my fiddle

// CSS
.nav-collapse {
  overflow: hidden;
  transition: height 0.35s ease 0s;
}

@media (max-width: 768px){
  .collapse { height:0; }
}

// JS
$('.btn-navbar').click(function(){
var nav = $('.nav-collapse');

if($(nav).hasClass('collapse')){
$(nav).height($(nav).find('ul').height());
$(nav).removeClass('collapse');
} else {
$(nav).attr('style','');
$(nav).addClass('collapse');
}
});

// HTML
<nav class="nav-collapse collapse">
  <ul>
    <li> menu items </li>
  </ul>
</nav>

jquery css responsive-design

Answer 1

Answer №1

To achieve the desired behavior of the menu uncollapsing itself when the viewport increases in size and having the height automatically calculated by the browser, you can simply listen to the window resize event and take appropriate action if the screen size exceeds a certain threshold (in this case, set at 600px in your fiddle):

$w.resize(function () {
    // Uncollapse navigation when viewport gets bigger
    if ($w.width() > 600) {
        $nav.css({
            height: "auto"    // Adjusts nav height to auto
        });
    }
});

It is recommended to declare the $nav variable earlier in the code for better organization, like in this example:

var $nav = $('.nav-collapse'), // Using $var for objects to maintain clarity
    $w = $(window),            // The $(window) object
    threshold = 600;            // Define the threshold value

// Listen for click event
$('.btn-navbar').click(function () {

    // Modify $(nav) to $nav for consistency
    if ($nav.hasClass('collapse')) {
        $nav.height($nav.find('ul').height()); // Necessary for transition effect
        $nav.removeClass('collapse');
    } else {
        $nav.attr('style', ''); // Needed for transition effect
        $nav.addClass('collapse');
    }
});

// Listen for resize event
$w.resize(function () {
    // Uncollapse navigation when viewport gets bigger
    if ($w.width() > threshold) {
        $nav.css({
            height: "auto"    // Adjusts nav height to auto
        });
    }
});

Answer 2

To achieve the desired behavior of the menu uncollapsing itself when the viewport increases in size and having the height automatically calculated by the browser, you can simply listen to the window resize event and take appropriate action if the screen size exceeds a certain threshold (in this case, set at 600px in your fiddle):

$w.resize(function () {
    // Uncollapse navigation when viewport gets bigger
    if ($w.width() > 600) {
        $nav.css({
            height: "auto"    // Adjusts nav height to auto
        });
    }
});

It is recommended to declare the $nav variable earlier in the code for better organization, like in this example:

var $nav = $('.nav-collapse'), // Using $var for objects to maintain clarity
    $w = $(window),            // The $(window) object
    threshold = 600;            // Define the threshold value

// Listen for click event
$('.btn-navbar').click(function () {

    // Modify $(nav) to $nav for consistency
    if ($nav.hasClass('collapse')) {
        $nav.height($nav.find('ul').height()); // Necessary for transition effect
        $nav.removeClass('collapse');
    } else {
        $nav.attr('style', ''); // Needed for transition effect
        $nav.addClass('collapse');
    }
});

// Listen for resize event
$w.resize(function () {
    // Uncollapse navigation when viewport gets bigger
    if ($w.width() > threshold) {
        $nav.css({
            height: "auto"    // Adjusts nav height to auto
        });
    }
});

Answer 3

Answer №2

Avoid directly setting the height using inline styles. Instead, utilize jQuery to assign a class that specifies the desired height, ensuring that this class only takes effect within the max-width: 768px media query. When this media query is no longer in use, the fixed height will no longer be enforced.

Answer 4

Avoid directly setting the height using inline styles. Instead, utilize jQuery to assign a class that specifies the desired height, ensuring that this class only takes effect within the max-width: 768px media query. When this media query is no longer in use, the fixed height will no longer be enforced.

Issue with menu height persisting while resizing screen

Answer №1

Answer №2

Similar questions

Storing information in a database using Ajax in the Yii Framework

Using Page.ResolveClientUrl in JavaScript or jQuery allows for easy resolution of client

Creating CSS styles for fluid width divs with equal height and background images

The min-height property in CSS appears to be ineffective on Jelly Bean

Modifying attributes for individual components in Vue.js classes

Interactive JavaScript Slider for Customizing Selection

ReactStrap: Transparency issue with DropDown items on mobile devices

Have you ever wondered how to disable a tooltip in React Material UI after clicking on it? Let

Need help with styling for disabled autocomplete? Check out the attached image

How to Use JQuery to Identify Duplicate IDs in a JSON Array

HTML TABS: Make the first TAB automatically selected

Inserting a crisp white divider between items in breadcrumb navigation in the form of arrowheads

Combining PHP JQuery Dialog with Datatables results in a sleek design loss

Dynamic header following the scroll position

What is the most recommended jQuery version to utilize?

What could be causing the span class data to not be retrieved by the getText method

Customize and format the text of options in a select element using the jQuery Chosen plugin

Run the js.erb code only when a certain condition is met

Modifying CSS stylesheet does not alter the background color

Creating a standalone static page in Wordpress showcasing the header, sidebar, and footer of the twenty fourteen template