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

jqueryhtmlcssmenunavigation

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);
});

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

Utilizing HTML5 Canvas for Shadow Effects with Gradients

Surprisingly, it seems that the canvas API does not support applying gradients to shadows in the way we expect: var grad = ctx.createLinearGradient(fromX, fromY, toX, toY); grad.addColorStop(0, "red"); grad.addColorStop(1, "blue"); ctx.strokeStyle = gra ...

javascripthtmlcanvas

Is it possible that when a user is redirected to a different URL, Chrome terminates any pending Ajax requests?

Currently, I have a function that allows the user to unlock a list they are currently editing: function cancelLock(id) { $.ajax({ type: "POST", url: "/ajax.php?action=cancelLock", dataType: 'json', data: "id="+ id }); retur ...

javascriptjqueryajax

"Utilizing AngulaJS to apply a class to the parent element when a radio button is

I'm wondering how I can assign a class to the parent div of each radio button in a group? You can find the code below and view the corresponding JSFiddle here. Here is the HTML: <div class="bd"> <input type="radio" ng-model="value" val ...

javascripthtmlcssangularjsradio-button

Creating a CSV download feature with ReactJS is simple and incredibly useful. Enable users

Despite searching through various posts on this topic, I have yet to find a solution that addresses my specific issue. I've experimented with different libraries and combinations of them in an attempt to achieve the desired outcome, but so far, I have ...

javascripthtmlreactjscsvmaterial-ui

What is the best way to make grid-column-start and span work seamlessly together?

I'm having some trouble with creating a table using the grid function in CSS. Specifically, I am stuck on how to add dynamic categories at the top without hardcoding styles for each category count. I have tried using the grid-column-start property to ...

htmlcssgrid-layoutcss-grid

Ways to automatically divide lists into various div elements

Hey there! I currently have a list of categories on my page that is subject to change. I'm looking for assistance in creating a loop that will divide my lists into groups of 5 items per div. For example: foreach($categories as $cat) <label> ...

phphtmlcsslaravel-blade

What is the best way to target CSS only to elements that do not have a parent with a specific class?

Striving to preserve the existing CSS in the codebase. .my-new-class { .existing-class { ...implementing new styles } } .existing-class { ...maintaining old styles } I attempted a technique that I know won't work and understand why: ...

csssassancestor

Enclose the text within the initial cell

I am trying to encapsulate a text label in the initial column of my table within a span. Although it seems like a simple task, I am encountering some issues. Here is my attempted solution: $('#myTable tr td:first-child').each(function() { va ...

jquery

Switch the CSS class with an HTML tag

Can someone help me transform this code snippet with Python 3 and Beautiful Soup? <span class="ld-nowrap"> 20th century’s </span> I need to convert it to: <em> 20th century’s </em> Any suggestions on how to achieve t ...

pythonhtmlcssbeautifulsoup

How to Use Jquery to Retrieve the Selected Option Value and Append a Parameter

I am attempting to expand the value by adding "&fullpage=true" <select name="navMenu" onchange="go(this.options[this.selectedIndex].value)"> <option value="-">Choose</option> <option value="page.html&amp;nyo=0" class="ccbnLnk" ...

javascriptjquery

What is the best way to reduce the size of an image using a URL?

As I work on creating a website in React for a company, my main focus is on developing a drive repository where users can upload files. One issue that has arisen is the performance of the "photos" folder, as it contains numerous high-resolution images th ...

htmlcssreactjsbrowser

Hide all the div elements on the web page and only display one when a button is clicked

I have successfully set up a few buttons that can show and hide divs on click. However, I am wondering if it is possible to hide all other divs when one is showing, and also have "divone" show up on load. Buttons: <button class="btn btn-outline-primar ...

javascriptcsshtml

Tips for aligning 2 divs in the same position?

I am working on a slider feature that includes both videos and pictures. I need to ensure that the videos are hidden when the device width exceeds 600px. Here is the HTML code snippet: <video class="player__video" width="506" height="506" muted preloa ...

htmlcss

Designing CSS elements that flow from top to bottom, left to right, and extend to the right when overflowing

I'm attempting to create a layout where divs are displayed from top to bottom, but once they reach the bottom of the browser window, any additional divs will overflow to the right. You can take a look at the desired layout here: https://i.stack.imgur. ...

javascriptcsshtmloverflow

Integrate SVG into the dropdown menu without duplicating the SVG element

I have an SVG of a right arrow: <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0V0z" fill="none"/> ...

htmlcss

Diverse Ajax-Driven Get Request in Django Application

Having recently started using Ajax and being familiar with Django for a while, I'm looking to dynamically submit a form in a way that appends a new parameter to the URL without refreshing the page and updates the displayed data. For instance, changing ...

pythonjqueryajaxdjango

Sketch a straight path starting from the coordinates x,y at a specified angle and length

Is there a way to draw a line in Javascript starting from a specific x/y position with a given length and angle, without having to define two separate points? I have the x/y origin, angle, and length available. The line should be placed on top of a regula ...

javascripthtmlcanvas

Clickable link unresponsive on parallax-enhanced webpage

Currently, I am utilizing Zurb foundation's Manifesto theme for creating a parallax scrolling landing page. The anchor tag is essential for the scrolling effect on this page, causing a conflict when regular anchor links are included. Here is the HTML ...

javascriptjqueryhtml

Submitting user input to PHP with AJAX to enable autocomplete functionality for various query scenarios

Currently, I am utilizing jQuery autocomplete feature on an input form labeled 'city'. However, my objective is to have the query in my 'autocity.php' file suggest only cities within a pre-selected country. For example, WHERE City LIKE ...

phpjqueryajaxautocomplete

The event listener for changing radio buttons

Imagine we have two radio buttons <input type="radio" value="val1" name="radio1" onChange="change()"/> <input type="radio" value="val2" name="radio1" onChange="change()&quo ...

javascripthtmljqueryreactjsdom