Navigationsmenü

HTML

  
<html>
  <head>
  </head>
  <body>
    <input type="checkbox" id="click">
    <label for="click">
      <div class="rahmen">
        <div class="linie einsham"></div>
        <div class="linie zweiham"></div>
        <div class="linie dreiham"></div>
      </div>
    </label>
    <nav class="menu">
      <ul class="ebeneeins">
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Über uns</a></li>
        <input type="checkbox" id="openinfo">
        <li class="clickhoverinfo">
          <label for="openinfo">Info 
            <span class="arrowinfo">&#129083;</span> 
          </label>
          <ul class="ebenezwei">
            <input type="checkbox" id="openhtml">
            <li class="clickhoverhtml">
              <label for="openhtml">HTML 
                <span class="arrowhtml">&#129083;</span> 
              </label>
              <ul class="ebenedrei">
                <li><a href="#">Tags</a></li>
                <li><a href="#">Elemente</a></li>
                <li><a href="#">Attribute</a></li>
              </ul>
            </li>
            <input type="checkbox" id="opencss">
            <li class="clickhovercss">
              <label for="opencss">CSS 
                <span class="arrowcss">&#129083;</span>
              </label>
              <ul class="ebenedrei">
                <li><a href="#">Flex</a></li>
                <li><a href="#">Grid</a></li>
                <li><a href="#">Position</a></li>
                <li><a href="#">Animation</a></li>
                <li><a href="#">Inline</a></li>
              </ul>
            </li>    
            <li><a href="#">JS</a></li>
          </ul>
        </li>
        <li><a href="#">Shop</a></li>
      </ul>
    </nav>
  </body>
</html>

CSS

  
body {
    margin: 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: white;
    font-family: sans-serif;
}

a {
    color: white;
    text-decoration: none;
}

@media (max-width:800px) {
    .ebeneeins {
        background: rgb(206, 106, 107);
        font-size: 12vw;
    }

    .ebenezwei {
        background: rgb(235, 172, 162);
        font-size: 0.8em;
        display: none;
    }

    .ebenedrei {
        background: rgb(206, 106, 107);
        font-size: 0.8em;
        display: none;
    }

    #openinfo:checked+.clickhoverinfo .ebenezwei {
        display: block;
    }

    #openhtml:checked+.clickhoverhtml .ebenedrei {
        display: block;
    }

    #opencss:checked+.clickhovercss .ebenedrei {
        display: block;
    }
}

[type="checkbox"] {
    display: none;
}

@media (max-width:800px) {
    .ebeneeins>li {
        border-bottom: 1px solid white;
    }

    .ebenedrei>li {
        border-bottom: 1px solid white;
    }

    .ebenezwei>li {
        border-bottom: 1px solid white;
    }

    .ebenezwei>li:last-child, .ebenedrei>li:last-child {
        border: none;
    }
}

@media (max-width:800px) {
    #openinfo:checked+.clickhoverinfo li:first-of-type {
        border-top: 1px solid white;
    }

    .ebenezwei>li {
        padding-left: 3%;
    }

    .ebenedrei {
        position: relative;
        left: -3%;
        width: 103%;
    }

    .ebenedrei>li {
        padding-left: 6%;
    }
}

.arrowinfo, .arrowhtml, .arrowcss {
    line-height: 1;
}

@media (max-width:800px) {
    #openinfo:checked+.clickhoverinfo .arrowinfo {
        display: inline-block;
        transform: rotate(180deg);
        transition: transform 0.5s;
    }

    #openhtml:checked+.clickhoverhtml .arrowhtml {
        display: inline-block;
        transform: rotate(180deg);
        transition: transform 0.5s;
    }

    #opencss:checked+.clickhovercss .arrowcss {
        display: inline-block;
        transform: rotate(180deg);
        transition: transform 0.5s;
    }
}

.linie {
    width: 60px;
    height: 6px;
    background-color: white;
    border-radius: 3px;
    position: absolute;
}

.rahmen {
    width: initial;
    height: 66px;
    padding-right: 10px;
    padding-left: 10px;
    background: rgb(33, 46, 83);
    cursor: pointer;
    position: relative;
}

#click {
    display: none;
}

@media (max-width:800px) {
    nav {
        display: none;
    }

    #click:checked~nav {
        display: block;
    }

    #click:checked~label .einsham {
        transform: rotate(-45deg);
        top: 30px;
        transition: transform 0.5s;
    }

    #click:checked~label .zweiham {
        opacity: 0;
    }

    #click:checked~label .dreiham {
        transform: rotate(45deg);
        top: 30px;
        transition: transform 0.5s;
    }

    .einsham {
        top: 12px;
    }

    .zweiham {
        top: 30px;
    }

    .dreiham {
        top: 48px;
    }

    #click:checked~nav .ebeneeins {
        animation: move 0.5s forwards;
    }

    @keyframes move {
        0% {
            width: 0
        }

        100% {
            width: 100%
        }
    }

    .ebeneeins {
        overflow: hidden;
        width: 0;
        white-space: nowrap;
    }
}

@media (min-width:800px) {
    [for="click"] {
        display: none;
    }
}

.ebeneeins {
    display: flex;
    font-size: 3vw;
    justify-content: center;
    background: rgb(206, 106, 107);
    height: 4vw;
}

.ebeneeins>li {
    width: 20%;
    border-right: 1px solid white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ebeneeins>li:hover {
    background: rgb(235, 172, 162);
    transition: 0.5s;
}

.ebeneeins>li:first-child {
    border-left: 1px solid white;
}

.ebenezwei {
    display: none;
}

.clickhoverinfo:hover .ebenezwei {
    display: block;
}

.clickhoverinfo {
    position: relative;
}

.ebenezwei {
    position: absolute;
    width: calc(100% + 2px);
    top: 4vw;
    text-align: initial;
    background: rgb(206, 106, 107);
    font-size: 0.8em;
}

.ebenezwei>li:hover {
    background: rgb(235, 172, 162);
    transition: 0.2s;
}

.ebenezwei>li {
    border-top: 1px solid white;
}

.ebenezwei>li:last-child {
    border-bottom: 1px solid white;
}

.ebenedrei {
    display: none;
}

.clickhoverhtml:hover .ebenedrei {
    display: block;
}

.clickhovercss:hover .ebenedrei {
    display: block;
}

.clickhoverhtml {
    position: relative;
}

.clickhovercss {
    position: relative;
}

.ebenedrei {
    position: absolute;
    left: 100%;
    background: rgb(206, 106, 107);
    width: 70%;
    font-size: 0.8em;
    top: -1px;
}

.ebenedrei>li:hover {
    background: rgb(235, 172, 162);
    transition: 0.2s;
}

.ebenedrei>li {
    border-top: 1px solid white;
}

.ebenedrei>li:last-child {
    border-bottom: 1px solid white;
}

.clickhoverhtml:hover .arrowhtml {
    display: inline-block;
    transform: rotate(-90deg);
    transition: transform 0.5s;
}

.clickhovercss:hover .arrowcss {
    display: inline-block;
    transform: rotate(-90deg);
    transition: transform 0.5s;
}

academy.of.webdesign

academy.of.webdesign

Navigationsmenü

HTML

CSS