Verticaal CSS drop down menu

Voorbeeld verticaal CSS drop down menu

Hier onder is een voorbeeld van een CSS sidebar met accordion menu met javascript.
In de stylesheet staan een paar unicode tekens.
De javascript kan niet in een aparte bestand worden opgeslagen. Deze moet op de pagina geplaatst worden. Enige manier om javascript in een aparte bestand op te slaan is door middel van bijv. een PHP include functie.

<php include("menujs.php"); ?>

HTML code en javascript

<span id="menubar" onclick="openMenu1()"></span>
    <nav id="menu">
      <ul>
        <li><a href="javascript:void(0)" class="btn" onclick="closeMenu1()"> </a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Test 2</a></li>
        <li><a href="#">Test 3</a></li>
        <li><button class="dropdowns-btn">Test 4</button>
          <div class="dropdowns-container">
            <a href="#">Test 4.1</a>
            <a href="#">Test 4.2</a>
            <a href="#">Test 4.3</a>
          </div>
        </li>
        <li><a href="#">Test 5</a></li>
        <li><a href="#">Test 6</a></li>
      </ul>
    </nav>
    
    <script>
/* Het openen en sluiten van de sidebar menu */
function openMenu1() {
  document.getElementById("menu").style.width = "13.5em";
}
function closeMenu1() {
  document.getElementById("menu").style.width = "0";
}

/* Loop door alle dropdown buttons voor het schakellen tussen verbergen en tonen van de dropdown tekst.
   Hierdoor kan de gebruiker meerder dropdown menu gebruiken, zonder enige conflict. */
var dropdown = document.getElementsByClassName("dropdowns-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}
</script>

CSS code

#menu {
  width: 0;
  position: absolute; 
  float: left;
  color: #000;
  background: transparent;
  overflow-x: hidden;
  transition: 1s;
  top: 7.41em;
  box-shadow: 10px 10px 10px DarkSlateGray;
}

#menubar:before {content: "\2630"; float: left;} /* Hamburger teken */

#menubar {
  cursor: pointer;
  font-size: 1.5em;
}

#menu ul {
  margin: 0em;
  padding: 0em;
  list-style: none;
  background: linear-gradient(to top, #990000 0%, #fff 100%);
}

#menu ul li {
  display: inline;
}

#menu .btn {
  font-size: 1.5em;
}

.btn:before {content: "\0058"; float: right;} /* \0058 x groot */

#menu a, .dropdowns-btn {
  text-decoration: none;
  color: #000;
  background: transparent;
  display: block;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 3px 0px 3px 0px;
  width: 100%;
}

.dropdowns-btn {
  font: inherit;
  font-size: 1em;
  text-align: left;
}

#menu a:hover,
.dropdowns-btn:hover {
  background: transparent;
  background: linear-gradient(to top, #ffd700 0%, #000 100%);
  color: #fff;
}

#menu a.btn:hover {color: #000; background: transparent;}

.dropdowns-container {
  display: none;
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, lightskyblue 0%, #fff 100%);
}

.subcontainer {
  display: none;
  color: #000;
  background-color: transparent;
  background: linear-gradient(to top, lightblue 0%, #fff 100%);
}

.active {
  color: #000;
  background-color: lightsteelblue;
}

button:after {content: "\271A"; float: right;} /* \271a plus */
.active:after {content: "\268A"; float: right;} /* \268a min */