Adaptable menu bar that adjusts with window resize

Looking for tips on optimizing window resize functionality, particularly in relation to a responsive navigation bar. Currently, I have a setup where if the screen width is less than 480px, the navigation is toggled to minimize and the display is set to hidden. The issue arises when expanding the screen beyond 480px as the navigation remains hidden. To address this, I've implemented a window resize function that resets the list to its default state whenever the screen size is larger than 480px. However, I believe there may be room for improvement in terms of performance optimization.

<div class = "dropdown">
        <div class = "icon">
            <img src ="menu.png" class = "text" align = "right">
        </div>
        <ul class = "header-li"> 
            <li><a href ="#1">1</a></li>
            <li><a href ="#2">2</a></li>
            <li><a href="#3">3</a></li>
            <li><a href="#4">4</a></li>
        </ul>
    </div>  


$(".icon").click(function(){
    $(".header-li", ".dropdown").slideToggle(); 
});


$(window).on('resize',function(event){
    var windowSize = $(this).width();

    if (windowSize > 480){
        $(".header-li").css('display','');
    }
}); 

Media query max 480px

display icon
list display:none;

Answer №1

Your implementation of the window.resize function is correct, but it would be beneficial to include an else condition to reset the style when the window size reverts back.

Alternatively, using a media query would be a more efficient solution as it can be purely achieved with CSS styling.

Feel free to try out the code snippet below by clicking "Full Screen" and resizing your browser window to observe the demonstration in action:

/* Default styling for mobile devices */
.header-li {
  background: red;
  width: 50px;
  height: 50px;
}

/* Styling for wider screens (min-width: 480px) */
@media only screen and (min-width: 480px) {
  .header-li {
    background:green;
  }
}
<div class="header-li"> </div>

For more information on Media Queries, visit this informative guide from W3Schools.

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 animation is disrupted by multiple clicks in jQuery

Here is a basic form example: <form id="form" action="file.php" method="POST"> <input class="form-control" type="number" name="p" value="0"> <label for="p">Text</label> <input class="form-control" type="number" name=" ...

When scrolling, the fixed menu bar at the top of the page is making the content below jump

I am attempting to create a fixed submenu that sticks to the top of the page when scrolling, but I am encountering some issues. The current code I have is as follows: $(window).scroll(function () { if ($(window).scrollTop() > 175) { $('#loca ...

What is the best way to detect a checkbox click event inside a nested container?

I've created a list of divs, each with a corresponding pair containing more details. When you click on the "intro" div, the detailed pair opens and the intro is hidden. Each div also has a checkbox. I encountered an issue where clicking the checkbox i ...

What is the best way to use jQuery to filter data in a table by clicking on a specific table row?

My website contains a table with player names and servers, but I want to make them clickable for filtering purposes. For instance, clicking on a player name should reload the leaderboards to show which servers that player plays on, and clicking on a server ...

Ensure the content of a textarea input is consistently centered vertically

I am currently working on a small project that involves using textareas. One issue I have encountered is that the text always starts at the top-left corner of the textarea. What I would like to achieve is having the content inside the textarea always cent ...

What could be causing my transform scale to not function properly in Bootstrap?

As a complete beginner, I am currently in the process of learning bootstrap. I have noticed that the animation breaks when I apply it, specifically the scaling part. Interestingly, the animation works perfectly fine without Bootstrap. I am wondering if the ...

Tips for removing the default CakePHP CSS without deleting it from the default.ctp file

Currently, I am looking to enhance the design of my webpages individually using Bootstrap. The specific page I am focusing on currently utilizes the cake.generic.css stylesheet, but I am aiming to eliminate it from this particular page. Is there a way for ...

Is there a way to update a PHP include file without needing to refresh the page?

I've been learning as I go, so some of my questions may seem basic or beyond my current knowledge level. However, I find that peer explanations, examples, and advice are the most effective way for me to learn. Thank you in advance for your help. Usin ...

Generating dynamic paragraph numbers with HTML and JavaScript

I am currently working on a list where elements can be dynamically added using JavaScript with the following code: function getMovementButtons(size, articleId, articleTitle, articleType){ var lowerArticleType = articleType.toLowerCase(); var html = ...

Incorporate Javascript to smoothly transition a div into view, display it for a specified duration, gradually fade it out, and ultimately delete

I am excited to experiment with toast notifications by creating them dynamically. Each toast has a unique id number and I increment a counter every time a new one is created. The current functionality includes the toast sliding down, staying visible for 3 ...

Insufficient html content causing empty spaces on the page

Having trouble with my HTML layout - I want a main content area centered on the page with a sidebar that slides out from the left. Everything is working except for a large gap on the left side. How can I move my content to the left to fill the entire page ...

Change the size of window using jQuery

I have implemented a tooltip that can appear in two positions: top and bottom. I am trying to achieve this using jQuery resize function. The issue I am facing is that when the user resizes their browser window to less than 768px, the tooltip should appea ...

Substitute the entire body section, including all its attributes like classes and id

I am currently utilizing an AJAX call to update my webpage's content. Unfortunately, this process maintains the entire body element along with its previous classes, resulting in a disruption of my page's design. I am implementing a code snippet ...

Inject additional jQuery functionality once new content is dynamically loaded through AJAX

Using AJAX to request a specific section of the page, here is an example illustrating the requested content: <div id="NewContentAfterPageLoad"> <form> ... <input id="clickMe" type="submit" form="aForm" value="submit"> < ...

Creating dynamic controls in edit template of KendoUI ListView at runtime

Linked to this inquiry, I am interested in replicating the same functionality within a ListView rather than a kendo Grid. My attempt can be viewed here. The editing template switches between different controls based on the initial model value during edit m ...

"Disabling Dropzone.js functionality once a file has been selected - here's how

When using my dropzone, I typically choose a file to save first and then click the save button. However, I am facing an issue: how can I disable the dropzone area after selecting a file? I attempted the following approach: accept: function (file, done) { ...

Handling XML with namespaces using jQuery (or JavaScript)

My jQuery project was progressing smoothly until I hit a roadblock while trying to parse XML with namespaces. I've been using jQuery 1.4.2 and have experimented with various methods: $(xml).find('[nodeName=ns:blah]')... $(xml).find('ns ...

Guide on creating CSS for webkit scrollbar through the use of Javascript

I have a div named 'dynamic' with text inside, and I am applying styling to it using javascript. var styleElement = document.createElement("style"); styleElement.appendChild(document.createTextNode("#dynamic { color: red; }")); document.getEleme ...

Having trouble sending the information to Parse.com using the website

I am a beginner with the Parse database and I am currently working on implementing a code that allows users to sign up, with their information stored in the Parse database. However, I am encountering an issue where the values are not uploading as expected. ...

Utilizing the Current URL from the address bar as a variable to link within the same page

My goal is to: Extract the current URL address from the browser bar, which will have a format like this: http://example.com/test/index.html?&dv1=1023faf2ee37cbbfa441eca0e1a36c Retrieve the lengthy ID number located at the end of the URL 1023faf2ee37c ...