menu mit animation

by marusti

HTML

<div class="toggle slideInLeft">
                <input type="checkbox" value="selected" id="someID" class="toggle__input">
    <label for="someID" class="toggle__label">Menü <span class="toggle__more">anzeigen</span><span class="toggle__less">schließen</span>
                </label>
    <div class="toggle__content">
<nav>
<ul class="mainmenu slideInDown"><li class="mainmenu"><a href="/mozilo/Willkommen.html" class="menuactive" title="Zur Kategorie &quot;Willkommen&quot; wechseln">Willkommen</a></li><li class="mainmenu"><a href="/mozilo/Layouts.html" class="menu" title="Zur Kategorie &quot;Layouts&quot; wechseln">Layouts</a><ul class="detailmenu"><li class="detailmenu"><a href="/mozilo/Layouts/Off%20Canvas%20CSS.html" class="submenu" title="Inhaltsseite &quot;Off Canvas CSS&quot; der Kategorie &quot;Layouts&quot; anzeigen">Off Canvas CSS</a></li><li class="detailmenu"><a href="/mozilo/Layouts/Cafe.html" class="submenu" title="Inhaltsseite &quot;Cafe&quot; der Kategorie &quot;Layouts&quot; anzeigen">Cafe</a></li><li class="detailmenu"><a href="/mozilo/Layouts/Winter.html" class="submenu" title="Inhaltsseite &quot;Winter&quot; der Kategorie &quot;Layouts&quot; anzeigen">Winter</a></li><li class="detailmenu"><a href="/mozilo/Layouts/Herbst.html" class="submenu" title="Inhaltsseite &quot;Herbst&quot; der Kategorie &quot;Layouts&quot; anzeigen">Herbst</a></li><li class="detailmenu"><a href="/mozilo/Layouts/Sommer.html" class="submenu" title="Inhaltsseite &quot;Sommer&quot; der Kategorie &quot;Layouts&quot; anzeigen">Sommer</a></li></ul></li><li class="mainmenu"><a href="/mozilo/Downloads.html" class="menu" title="Zur Kategorie &quot;Downloads&quot; wechseln">Downloads</a></li><li class="mainmenu"><a href="/mozilo/Links.html" class="menu" title="Zur Kategorie &quot;Links&quot; wechseln">Links</a></li><li class="mainmenu"><a href="/mozilo/Kontakt.html" class="menu" title="Zur Kategorie &quot;Kontakt&quot; wechseln">Kontakt</a></li></ul>
</nav>
               ...

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #333
}

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

.wrapper>* {
  padding: 10px;
  -webkit-box-flex: 1;
      -ms-flex: 1 100%;
          flex: 1 100%;
}

nav {
  background: #D65D5D;
  padding: 0 !important
}

header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
  color: #ddd;
  font-weight: 800;
  border-bottom: 2px solid #D65D5D
}

.main {}

.mainmenu {
  list-style: none;
  margin: 0;
  padding: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}

.mainmenu a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
  text-align: left;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mainmenu li:last-of-type a {
  border-bottom: none;
}

.mainmenu a:hover {
  background: #A34747;
  text-decoration: none
}

.detailmenu a {
  padding-left: 40px
}

.toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  padding: 0 !important
}

.toggle__input:not(checked) {
  display: none;
}

.toggle__input+label {
  background-color: #D65D5D;
  color: #fff;
  cursor: pointer;
  padding: 0.5em;
  text-align: center;
  max-width: 100%;
}

.toggle__input+label:before {
  color: #fff;
  content: "+";
  font-size: 1em;
  padding-right: 0.3em;
  width: 1em;
}

.toggle__input:not(checked)~.toggle__content {
  display: none;
  margin-bottom: 0.5em
}

.toggle__input:checked~.toggle__content {
  display:...