Need help to add 2 more level to my menu

[kocdilek1977]

I need to add 2 more levels to my navigation menu first and second levels working fine but couldnt handle third level, I tried several variations but couldnt handle problem.

Here is jsfiddle link I created for my tries

I asked on stackoverflow too none answered, Thanks for any help.

Here is css :

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #e3e3e3;
  position: relative;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  color: #292929;
  text-decoration: none;
  padding: 15px;
  display: block;
}

nav ul li:hover {
  background: lightgrey;
}

nav ul ul {
  position: absolute;
  min-width: 200px;
  background: lightgrey;
  display: none;
}

nav ul ul li {
  display: block;
  background: #e3e3e3;
}

nav ul li:hover ul {
  display: block;
}
nav ul li i {
  color: #292929;
  float: right;
  padding-left: 20px;
}

nav div {
  background: lightgrey;
  color: #292929;
  font-size: 24px;
  padding: 0.6em;
  cursor: pointer;
  display: none;
}

@media(max-width: 768px) {
  nav div {
    display: block;
  }

  nav ul {
    display: none;
    position: static;
    background: #e3e3e3;
  }

  nav ul li {
    display: block;
  }

  nav ul ul {
    position: static;
    background: #e3e3e3;
  }
}

And this is my jquery :

		$("nav div").click(function(){
			$("ul").slideToggle();
			$("ul ul").css("display", "none");
		});
		// $("ul li").click(function(){
		//     $("ul ul").slideUp();
		//     $(this).find('ul').slideToggle();
		// });
		$('ul li').click(function () {
			$(this).siblings().find('ul').slideUp();
			$(this).find('ul').slideToggle();
		});
		$(window).resize(function(){
			if($(window).width() > 768){
				$("ul").removeAttr('style');
			}
		});

And my menu structure :

<nav>
  <div>
    <i class="fa fa-bars"></i>
  </div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">First Level <i class="fas fa-arrow-down"></i></a>
      <ul>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Vanilla JavaScript</a></li>
      </ul>
    </li>
    <li><a href="#">Second Level <i class="fas fa-arrow-down"></i></a>
      <ul>
        <li><a href="#">Illustration</a></li>
        <li><a href="#">Third level <i class="fas fa-arrow-down"></i></a>
		  <ul>
			<li><a href="#">jQuery</a></li>
			<li><a href="#">Vanilla JavaScript</a></li>
		  </ul>
		</li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

[PaulOB]

@kocdilek1977

I need to add 2 more levels to my navigation menu first and second levels working fine but couldnt handle third level, I tried several variations but couldnt handle problem.

JS isn’t my area but in the CSS you would need to move the deeper nested levels to the right of the menu so that they will show at the side rather than underneath.

I would also use classes to identify the dropdown triggers and also avoid globally applying styles to elements without limiting their context with a class. Otherwise you can never use another list element in your site without the js and css being applied to it.

As I said my JS (and Jquery) is very basic but here is a start for you.

I have removed the hover menu on desktop because that would confuse the mobile versions as they would apply a first touch as a hover and then toggle it back off with the click. Its much easier (and more accessible) to use a click menu for all.

[kocdilek1977]

Thank you ! for the answer, I think I got it in css here for your check. jsfiddle

I Need to get third level collapse with jquery.

My code compatible with two level :

		$("nav div").click(function(){
			$("ul").slideToggle();
			$("ul ul").css("display", "none");
		});
		$('ul li').click(function () {
			$(this).siblings().find('ul').slideUp();
			$(this).find('ul').slideToggle();
		});
		$(window).resize(function(){
			if($(window).width() > 768){
				$("ul").removeAttr('style');
			}
		});

[PaulOB]

@kocdilek1977

I Need to get third level collapse with jquery.

I gave you the CSS and jquery for the third level. What is it you don’t understand?

You don’t want the resize script in there as that will slow down the browser and make everything janky. I gave you more or less everything you need.

[kocdilek1977]

Your example has class in dropdown ul which is I dont want to use, Why ?
Because my menu is in action on site now, if I use that menu I need to change whole php function is well.
I am trying to get jquery code from your example if I can.

[PaulOB]

@kocdilek1977

Because my menu is in action on site now, if I use that menu I need to change whole php function is well.

Are you not going to use any other nav elements, ul elements or li elements throughout your site?

You can’t apply js and css globally unless you know that all the above elements are never going to be used anywhere else.

If you give me a few minutes I can update my demo not to use classes but you will run a great risk of breaking your site in the future.

[kocdilek1977]

Thanks for the example I got jquery work on your example Thanks again, no need to touch php now .lol

[PaulOB]

Ok glad you got it working.

I added an example anyway without class

As I said above you need to remove the hover because that stops mobile from working. The above menu works on desktop and mobile.

[kocdilek1977]

Nice one I got it, is there a way to use .sibling() istead of .stopPropagation() menu looks to long on mobile

[PaulOB]

@kocdilek1977

.sibling() istead of .stopPropagation()

Not sure what you mean as they have nothing in common as such. The stopPropogation is to stop the click event bubbling up through all the parent list items and triggering multiple toggles.you only want to catch the click on the actual item you clicked.

The proper way to do it would be to apply the click handler to the main parent of the ul and then work out which element triggered the click and then you wouldn’t need the stopPropogation but that is a question for the JS experts here

@kocdilek1977

menu looks to long on mobile

My example looks fine on mobile on my iphone 5 and works very well.
Or did you mean something else?

[kocdilek1977]

Never mind ! I got yours, wasnt sure about my own css in mine

.sibling() Function is closing first level dropdown when you click on second one, no need to click back.

.stopPropagation() is keeping dropdown open until you click back, it makes menu structure longer for visiters, if you have a long structered data then visiters need to go down all that way long.

Thanks again

[PaulOB]

@kocdilek1977

.stopPropagation() is keeping dropdown open until you click back, it makes menu structure longer for visiters, if you have a long structered data then visiters need to go down all that way long.

Without the stopPropogation you would have all levels of the menu opening and closing as soon as you clicked on one of them so there would be no point in having anything but one level

I made my example so that as you click each level only one level opens at a time but if you click the top level (or a higher menu level) all menus below will collapse. This would seem to be the best and most accessible option. Otherwise if you open all levels and close all levels then that will confuse the user and also becomes unwieldy as you get the great big one menu on your first click.

The menu needs to be logical where possible but of course there are probably loads of variations you could build into the behaviour but usually simple is best. I tested my example on mobile and it works very nicely and as I would expect but feel free to change to suit your purposes.