JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<nav class="mod_navigation block" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
  <a href="#skipNavigation82" class="invisible">Navigation überspringen</a>
  <ul class="level_1 nav">
    <li class="active first"><a class="active first" href="./" title="Innenarchitektur, Tischlerei und Innenausbau - Berlin und Brandenburg">Home</a></li>
    <li class="submenu sibling"><a href="innenarchitektur.html" title="Innenarchitektur und Innenausbau aus einer Hand" class="submenu sibling" aria-haspopup="true">Innenarchitektur</a>
      <ul class="level_2 nav">
        <li class="first"><a href="innenarchitektur.html" title="Innenarchitektur und Innenausbau in Berlin, Potsdam, Brandenburg" class="first">Innenarchitektur</a></li>
        <li class="last"><a href="ihre-ferienimmobilie.html" title="Einrichtungsplanung Ihrer Ferienimmobilie - Berlin, Brandenburg, Ostsee, Mecklenburg Vorpommern" class="last">Ihre Ferienimmobilie</a></li>
      </ul>
    </li>
    <li class="submenu sibling"><a href="hausneubau.html" title="Innenausbau - Berlin Brandenburg" class="submenu sibling" aria-haspopup="true">Innenausbau</a>
      <ul class="level_2 nav">
        <li class="first"><a href="hausneubau.html" title="Innenausbau beim Hausbau - Berlin und Brandenburg" class="first">Hausneubau</a></li>
        <li><a href="hausumbau.html" title="Innenausbau beim Hausumbau - Berlin und Brandenburg">Hausumbau</a></li>
        <li><a href="dachgeschossausbau.html" title="Dachgeschossausbau">Dachgeschossausbau</a></li>
        <li class="last"><a href="hauseinrichtung.html" title="Hauseinrichtung für Ihre Immobilie in Berlin oder Brandenburg" class="last">Hauseinrichtung</a></li>
      </ul>
    </li>
    <li class="submenu sibling"><a href="die-raumidee.html" title="Wohnraumgestaltung und Einrichtungsplanung vom Ihrem Einrichtungsplaner" class="submenu sibling" aria-haspopup="true">Raumgestaltung</a>
      <ul class="level_2 nav">
        <li class="raum-home first"><a...

CSS

ul ul {
  display: none;
  /*visibility: hidden;*/
  -webkit-transition: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  transition: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  /*opacity: 0;*/
}

JavaScript

var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
	if (isIOS) {
		$("ul ul li a:not(.submenu").addClass("clicked");
		$('ul li a').click(function(event) {
		  var link = $(this);
		  if (link.hasClass('clicked')) {
		    return true;
		  } else {
		    link.addClass("clicked");
		    $('ul ul').hide(); //hide all ul children
		    $(this).parents('ul').show(); //show all ul ancestors of the clicked anchor
		    $(this).next('.nav').slideToggle(400); //toggle its submenu
		    return false;
		    event.preventDefault();
		  }
		});
	}
	else
	{
	$("li:not(.submenu) a").each(function() {
	  $(this).addClass("clicked");
	});
		$('ul li a').click(function(event) {
		  var link = $(this);
		  if (link.hasClass('clicked')) {
		    return true;
		  } else {
		    link.addClass("clicked");
		    $('ul ul').hide(); //hide all ul children
		    $(this).parents('ul').show(); //show all ul ancestors of the clicked anchor
		    $(this).next('.nav').slideToggle(400); //toggle its submenu
		    return false;
		    event.preventDefault();
		  }
		});
	}