Dynamic navigation experiencing erratic behavior when using display flex

I attempted to enhance my previous projects by converting them into flexbox. However, I ran into an issue where the ul element was displaying as a block. To fix this, I used JavaScript to change it to display flex.

Here is the fiddle:

// JavaScript code here...
// CSS code here...
<!-- HTML code here... -->

The problem arose when I clicked the burger icon for the first time, resulting in erratic behavior. On the second click, the navigation collapsed abruptly, causing confusion and inconsistencies in the functionality.

I realized that the order of the "x" button and the burger icon appeared swapped, which disrupted the expected interaction flow. This was likely caused by my addition of $(menu).css("display", "flex"); in the JavaScript.

Prior to this, everything worked well without flexbox, using simple UL and LI tags instead. Is there a solution to maintain the flex layout while addressing these issues? Any guidance would be greatly appreciated.

javascripthtmlcssnavigationflexbox

Answer №1

There seems to be a issue with the code on initial click. To resolve it, try moving the display: flex after the slideToggle();. Keep in mind that there may not be a smooth transition as slideToggle(); sets the display to block. Consider using a CSS solution or wrapping the <ul>...</ul> in a container.

if ($('#burger').hasClass("open")) {
  // Set display to flex
  $(menu).css("display", "flex");

  $("section").css("z-index", 1);

  // Toggle display (will be flex), hiding it
  menu.slideToggle(); 
}

Adjusted version available (link, some styling changes made for demo purposes)

$(function() {
  var pull = $('#pull');
  menu = $('nav ul.clearfix');
  menuHeight = menu.height();

  $(pull).on('click', function(e) {
    e.preventDefault();
    $('#burger').toggleClass('open');
    
    if ($('#burger').hasClass("open")) {
      $("section").css("z-index", 1);
      menu.slideToggle();
    } else {
      menu.slideToggle('slow', function() {
        $("section").css("z-index", 4);
      });
    }
  });
});

$(window).resize(function() {
  var w = $(window).width();
  
  if (w > 320 && menu.is(':hidden')) {
    menu.removeAttr('style');
  }
});

Your HTML/CSS requires some revisions. The <ul> should have <li> elements inside.

<ul class="clearfix">
  <a id="currentPage" href="index.php">HOME</a>
  <a href="registration.php">REGISTRATION</a>
  <a href="tutorial.php">TUTORIAL</a>
  <a href="contact.php">CONTACT US</a>
</ul>

Revised structure:

<ul class="clearfix">
  <li><a id="currentPage" href="index.php">HOME</a></li>
  <li><a href="registration.php">REGISTRATION</a></li>
  <li><a href="tutorial.php">TUTORIAL</a></li>
  <li><a href="contact.php">CONTACT US</a></li>
</ul>

Also, utilizing the clearfix class without floating elements is unnecessary. Instead, consider using a more descriptive class name like navigation.

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

Guide on making API calls in AngularJS using query strings

I am new to learning about AngularJS and recently came across a helpful article on connecting to an API and using its data in our app. The article specifically focuses on displaying weather information with AngularJS. The only downside is that the weather ...

javascriptangularjs

Interact with a JSON API using JavaScript by incorporating dynamic user input

Recently, I delved into tutorials on utilizing JSON data and JavaScript. Feeling inspired, I decided to create a simple app using an API. However, I encountered a hurdle and I'm struggling to identify its cause. The problem seems to be related to how ...

javascriptjsonapiaddeventlistener

The HTML page is not responsive to the screen size of the mobile device

Check out my HTML code: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <style type= ...

htmlcssmobile

Sharing information between controllers from diverse modules

We are currently in the process of developing a Telecom App dashboard. Our goal is to retrieve logs using Logstash and Elastic search, and then present them on the UI using the ng-Table directive of Angularjs. While we have successfully obtained the logs, ...

javascriptangularjselasticsearch

When adding a new div, ensure it is counted and delete it once a new div is added

When clicked, a new div is added. When clicked again, another div with the same content is created as a duplicate. Q: Is there a way to remove the previous div when a new one is created? $(document).on('click', '.LibSectOpen', functio ...

javascriptjqueryhtmldestroy

Example of multiple canvas in three.js using WebGL

Currently, I'm undertaking a project that involves the use of multiple cameras to render the scene onto different canvases. I found some issues with this approach particularly when it comes to the clipping plane behaving oddly at the edges. While ever ...

javascriptcanvasthree.jswebglclipping

Linking Java objects with Node.js variables

In this snippet of code, I am utilizing the 'java' module in node.js to create Java objects. Specifically, I am creating four Java objects and aiming to consolidate them as a single object by using the variable 'args' to store these Jav ...

javascriptnode.jssoapnode-java

Boxes that change and adapt to the user's input

Need guidance on a tricky problem! I am working on a form to input various cities that the user wants to visit. The form currently consists of one form box and a submit button. My goal is to allow the user to enter multiple cities by clicking an "Add 1 ...

javascriptphphtml

Local variable reference getting lost in a loop during a jQuery Ajax call

Currently, I am facing an issue with my jQuery ajax calls within a loop. The problem arises when each ajax call returns and I need to retrieve a specific value associated with the original call. However, due to further iterations in the loop, the value of ...

javascriptjqueryajax

Creating an illustration with HTML5 from an image

Is it possible to draw on an image by placing a canvas on top of it? I am familiar with drawing on a canvas, but I am facing an issue where clicking on the image does not trigger the canvas for drawing. How can I resolve this? This is how my HTML looks: ...

javascriptjqueryhtmlhtml5-canvas

JavaScript and PHP/HTML template engine technology

I've recently discovered the jQuery template engine and am intrigued by its potential. It seems to be very efficient for ajax calls, as the data exchange is minimized. However, when I initially load my application using only PHP and HTML to display ...

javascripthtmlajaxtemplates

The icons from Materialize CSS are not displaying properly in the Safari web browser

It has come to my attention that the icons in Materialized CSS are not displaying properly in Safari (v5.1.7). Despite conducting thorough research on this issue, I have been unable to find any documentation regarding browser compatibility with Safari. Can ...

htmlcsssafarimaterialize

Tips for aligning an image within a CSS-created bar graph

Would it be possible to position an image inside each bar of a bar graph without changing the bar's size? I've figured out how to do this with text, but not with an image. Alternatively, would it be better to place the image to the left of each b ...

htmlcss

Mobile responsiveness malfunctioning

I recently launched my first responsive design website, which you can view here After testing the responsiveness on Chrome and FF by resizing the window, everything seemed to be working fine. However, when I checked it on my phone, the layout appeared ide ...

cssresponsive-design

Having difficulty accessing node_modules directory in JavaScript

I am confused about how to access node_modules for JavaScript. Can someone provide an example of calling module.exports from a node_module folder after installing a package with NPM in Node.js? File tree structure: There is a folder named 'ethereum&a ...

javascriptnode.jsnpmnpm-installnode-modules

How does a database contribute to the functionality of a redux application?

Recently, I started exploring redux and finally understood the architecture behind it. In a single page redux application where all data is stored in a central store and updated through frontend actions, what purpose does the back-end and database serve? ...

javascriptreactjsreduxreact-redux

Avoiding mistakes in class and id names with preventative tools

Is there a simple way to spot typos in HTML/CSS/JavaScript code? I'm looking for basic debugging tools that can catch mistakes like "#fron" instead of "#from" in class names and ids. I'm aware of more advanced IDEs, but I'm curious if there ...

javascripthtmlcsserror-checking

Unlocking the potential of Three.js with mouse picking

I am looking to implement object picking in the following code snippet: var Three = new function () { this.scene = new THREE.Scene() this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000) this.camera.po ...

javascriptthree.jsmouse-picking

Using two onMouseOver functions in React.js

render: function() { return ( <td> <img src={this.props.image.path} width="40" height="40" id={this.props.image.id} onMouseOver={()=>document.getElementById(this.props.image.id).height="80", ()=>d ...

javascriptreactjs

filter out null values from JSON using gson

I am looking for a way to eliminate attributes with empty collections or null values using gson. Aiperiodo periodo = periodoService(); //periodo is obtained from a service method with various values Gson gson = new Gson(); String json = gson.toJson(period ...

javajavascriptjsongson