Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation on 08/31/2018 in Posts

  1. Решил поиграться с тегом 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; } }
    2 points
This leaderboard is set to Kiev/GMT+02:00
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy