If the navigation menu contains sub-menus, it should slide to the left

Question

If the navigation menu contains sub-menus, it should slide to the left

I am currently working on developing a navigation menu with four levels of depth. The menu displays three levels at a time, and when the user reaches the fourth level, the first level should move to the left to make room for the second, third, and fourth levels.

However, I'm encountering an issue where clicking on a menu item in the third level (without children) also causes the menu to move left.

For example: Clicking on Menu-item1 > Menu-item1.2 > Menu-item1.2.2 > Menu-item1.2.2.1 moves the menu left even though Menu-item1.2.2.1 has no children.

How can I adjust my code so that the menu only moves left if it has child sub-menus?

Below is the code snippet:

... (code snippet goes here)

Check out the Codepen link here

jquery html css menu navigation

Answer 1

Answer №1

Here is a suggestion to try out:

    $('.sub-sub-col > ul > li').click(function() {
     if(!$(this).find('.sub-sub-sub-col').length){
      return false;
     }
  var checks = $(this).data('checks'); //add your code here
});

Alternatively:

 if(!$(this).children('.sub-sub-sub-col').length){
  return false;
 }

================================================

//   if click on sub-col
  $('.sub-col > ul > li').on('click', function(){
      if (!$(this).hasClass('active')) {
        $('.dropdown').animate({
             'left' : '10px'
        })  
      }
  });

   $('.sub-sub-col > ul > li').click(function() {
  // var clicks = $(this).data('clicks');
      if (!$(this).hasClass('active')) {
        $('.dropdown').animate({
             'left' : '10px'
        })   
      }
      else {
        $('.dropdown').animate({
             'left' : '-510px'
        })
      }
  // $(this).data("clicks", !clicks);
});

Answer 2

Here is a suggestion to try out:

    $('.sub-sub-col > ul > li').click(function() {
     if(!$(this).find('.sub-sub-sub-col').length){
      return false;
     }
  var checks = $(this).data('checks'); //add your code here
});

Alternatively:

 if(!$(this).children('.sub-sub-sub-col').length){
  return false;
 }

================================================

//   if click on sub-col
  $('.sub-col > ul > li').on('click', function(){
      if (!$(this).hasClass('active')) {
        $('.dropdown').animate({
             'left' : '10px'
        })  
      }
  });

   $('.sub-sub-col > ul > li').click(function() {
  // var clicks = $(this).data('clicks');
      if (!$(this).hasClass('active')) {
        $('.dropdown').animate({
             'left' : '10px'
        })   
      }
      else {
        $('.dropdown').animate({
             'left' : '-510px'
        })
      }
  // $(this).data("clicks", !clicks);
});

If the navigation menu contains sub-menus, it should slide to the left

Answer №1

Similar questions

Issue with rendering in sandbox environment versus localhost

Counting the number of times a form is submitted using a submit button and storing the data

Trouble with jQuery autocomplete function in Firefox

Adjusting image dimensions dynamically using JavaScript based on screen size

When the Chrome Dev Tools are activated, the responsive website malfunctions

Clickable Href in jquery autocomplete

Angular is unable to eliminate the focus outline from a custom checkbox created with Boostrap

The use of @font-face in CSS seems to be malfunctioning

"Introducing a smooth animation effect to shift text alignment to the center

Identifying Even Selections in jQuery Even with the First Option

Sort table rows by checkbox value in javascript

What could be the reason for the malfunctioning of the "subscribe" button?

The pair of divs with distinct backgrounds

Navigating to a particular div using a click event

Creating a functionality in jQuery that allows users to dynamically add a new row by clicking a button

What steps should I take to repair my jQuery button slider?

The CSS outline has a soft, rounded appearance rather than a sharp

Internet Explorer poses challenges for the jQuery Validate plugin's functionality

Retrieving information from database with the help of PHP and AJAX

Exploring the capabilities of the jQuery `val()` function alongside the dynamic framework