Расширяемое меню по клику на CSS

В редакторе

Расширяемое меню по клику на CSS

Brain_Script
666
2019-07-12 14:56:31
<div class="navsubsu-posevice"> <input type="checkbox"> <span></span> <span></span> <span></span> <div class="navigatsiya"> <li><a href="#">Главная</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Скрипты</a></li> <li><a href="#">SEO</a></li> <li><a href="#">Контакты</a></li> </div> </div>
body, .navsubsu-posevice, .navigatsiya { display: flex; justify-content: center; align-items: center; } .navsubsu-posevice { position: relative; background-color: #f5eded; padding: 20px; transition: 0.5s; border-radius: 50px; overflow: hidden; box-shadow: 0 8px 15px rgba(23, 22, 22, 0.2); border: 2px solid #d0c6c6; } .navigatsiya { margin: 0; padding: 0; width: 0; overflow: hidden; transition: 0.5s; } .navsubsu-posevice input:checked ~ .navigatsiya { width: 500px; } .navigatsiya li { list-style: none; margin: 0 8px; } .navigatsiya li a { text-decoration: none; color: #666; text-transform: uppercase; font-weight: 600; transition: 0.5s; } .navigatsiya li a:hover { color: #141515; } .navsubsu-posevice input { width: 38px; height: 38px; cursor: pointer; opacity: 0; } .navsubsu-posevice span { position: absolute; left: 29px; width: 27px; height: 4px; border-radius: 100px; background-color: #655f5f; pointer-events: none; transition: 0.5s; } .navsubsu-posevice input:checked ~ span { background-color: #FF4D50; } .navsubsu-posevice span:nth-child(2) { transform: translateY(-8px); } .navsubsu-posevice input:checked ~ span:nth-child(2) { transform: translateY(0) rotate(-45deg); } .navsubsu-posevice span:nth-child(3) { transform: translateY(8px); } .navsubsu-posevice input:checked ~ span:nth-child(3) { transform: translateY(0) rotate(45deg); } .navsubsu-posevice input:checked ~ span:nth-child(4) { display: none; }
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика