Мобильное меню на чистом CSS

[AlexZaw]

Решил поиграться с тегом details и вот что получилось:

 

See the Pen KxaPyX by Alexandr (@AlexZaw) on CodePen.

Для поддержки EDGE и IE9-11 пришлось дублировать код, так как они не поддерживают тег details, так что, при использовании чекбоксов код получится короче, но тем не менее вдруг кому пригодится способ стилизации details.

(если нужно зафиксировать меню - меняем позиционирование  у details и  .mmenu )

<details>
  <summary tabindex='1'>
    <span class="top"></span>
    <span class="center"></span>
    <span class="bottom"></span>
  </summary>
<ul class="mmenu">
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li>
  <li><a href="#">item 5</a></li>
</ul>
</details>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt itaque eum minima exercitationem enim incidunt, eveniet ipsa officia quasi aut eaque quas vel vero atque a perspiciatis tempora! In, eligendi.

details {
  /*position: fixed;*/
    position: relative;
}

::-webkit-details-marker {
    display: none;
}

::-moz-list-bullet {
    list-style-type: none;
}

summary {
    position: relative;
    width: 30px;
    height: 20px;
    outline: none;
}

summary span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #000;
    border-radius: 3px;
    transition: all .5s;
}

.top {
    top: 0;
}

.center {
    top: 50%;
    transform: translateY(-50%);
}

.bottom {
    bottom: 0;
}

.mmenu {
  /*position: relative;*/
    position: absolute;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background: #ccc;
    border-radius: 10px;
    box-shadow: 0 0 5px #000, inset 0 0 5px #fff
}

.mmenu a {
    text-decoration: none;
    font-size: 18px;
    color: midnightblue;
    position: relative;
    overflow: hidden;
}

.mmenu a:before {
    content: '';
    display: block;
    position: absolute;
    height: 10px;
    width: 3px;
    transform: rotate(45deg);
    background: #fff;
    right: 100%;
    top: 6px;
    opacity: 0;
}

.mmenu a:hover:before {
    animation: move .2s linear;
    animation-fill-mode: forwards
}

details[open] .top {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 0 0 5px #000, inset 0 0 5px #fff
}

details[open] .bottom {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    box-shadow: 0 0 5px #000, inset 0 0 5px #fff
}

details[open] .center {
    opacity: 0;
}

details[open] .mmenu {
    animation: showMenu .5s linear;
    animation-fill-mode: forwards;
}

@keyframes showMenu {
    0% {
        padding: 0;
        opacity: 0;
    }
    100% {
        opacity: 1;
        padding: 20px 40px;
    }
}

@keyframes move {
    0% {
        right: 100%;
        opacity: 0;
    }
    50% {
        right: 50%;
        opacity: 1;
    }
    100% {
        right: 0;
        opacity: 0;
    }
}
/*EDGE support*/
@supports (-ms-ime-align:auto) {
    details,
    summary {
        display: block;
    }
    summary~.mmenu {
        opacity: 0;
    }
    summary:focus~.mmenu {
        animation: showMenu .5s linear;
        animation-fill-mode: forwards;
    }
    summary:focus .top {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        box-shadow: 0 0 5px #000, inset 0 0 5px #fff
    }
    summary:focus .bottom.bottom {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
        box-shadow: 0 0 5px #000, inset 0 0 5px #fff
    }
    summary:focus .center {
        opacity: 0;
    }
    .mmenu a:hover:before {
        animation: move .2s linear;
        animation-fill-mode: forwards
    }
}

/*IE9-11 support*/

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    details,
    summary {
        display: block;
    }
    summary~.mmenu {
        visibility: hidden;
    }
    summary:focus~.mmenu {
        animation: showMenu .5s linear;
        animation-fill-mode: forwards;
        visibility: visible;
    }
    summary:focus .top {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        box-shadow: 0 0 5px #000, inset 0 0 5px #fff
    }
    summary:focus .bottom.bottom {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
        box-shadow: 0 0 5px #000, inset 0 0 5px #fff
    }
    summary:focus .center {
        opacity: 0;
    }
}