Анимированное CSS меню для сайта
 | |
| Вашему вниманию анимированное меню вертикальном виде для блогов и сайтов, которое выстроено на чистом CSS, где при клике раскрываются категорий. В этой статье мы увидим, как создать вертикальную строку меню, используя HTML и CSS. Сценарий почти такой же, как горизонтальная строка меню.Так как сам это меню ставил, могу сказать по дизайну смотрится красиво и на любом темном дизайн сайте оно будит шикарно выглядит. Приступаем к установке. В блок вашего сайта, куда решать вам.  Установка: HTML Код <div class="wrapper"> <nav class="vertical"> <ul> <li> <label for="home">Home</label> <input type="radio" name="verticalMenu" id="home" /> <div> <ul> <li><a href="#">Index</a></li> <li><a href="#">About</a></li> <li><a href="#">Corporate</a></li> <li><a href="#">Contact</a></li> </ul> </div> </li> <li> <label for="blog">Blog</label> <input type="radio" name="verticalMenu" id="blog" /> <div> <ul> <li><a href="#">Articles</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Tutorials</a></li> </ul> </div> </li> <li> <label for="work">Work</label> <input type="radio" name="verticalMenu" id="work" /> <div> <ul> <li><a href="#">Client Login</a></li> <li><a href="#">Get Quote</a></li> <li><a href="#">Portfolio</a></li> </ul> </div> </li> </ul> </nav> CSS Код div.wrapper { margin: 20px auto; width: 350px; } p { font-family: georgia; font-size: 1rem; line-height: 25px; margin: 24px 0; text-align: center; } nav.vertical { border-radius: 4px; box-shadow: 0 0 10px rgba(0,0,0,.15); overflow: hidden; text-align: center; } nav.vertical > ul { list-style-type: none; } nav.vertical > ul > li { display: block; } nav.vertical > ul > li > label, nav.vertical > ul > li > a { background-color: rgb(157, 34, 60); background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60)); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1); color: rgb(255,255,255); display: block; font-size: .85rem; font-weight: 500; height: 50px; letter-spacing: .5rem; line-height: 50px; text-shadow: 0 1px 1px rgba(0,0,0,.1); text-transform: uppercase; transition: all .1s ease; } nav.vertical > ul > li > label:hover, nav.vertical > ul > li > a:hover { background-color: rgb(114, 51, 98); background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); cursor: pointer; } nav.vertical > ul > li > label + input { display: none; visability: hidden; } nav.vertical > ul > li > div { background-color: rgb(255,255,255); max-height: 0; overflow: hidden; transition: all .5s linear; } nav.vertical > ul > li > label + input:checked + div { max-height: 500px; } nav.vertical > ul > li > div > ul { list-style-type: none; } nav.vertical > ul > li > div > ul > li > a { background-color: rgb(255,255,255); border-bottom: 1px solid rgba(0,0,0,.05); color: #333331; display: block; font-size: 1.1rem; padding: 10px 0; text-decoration: none; transition: all 0.15s linear; } nav.vertical > ul > li > div > ul > li:hover > a { background-color: lightBlue; color: rgb(255,255,255); padding: 10px 0 10px 50px; } Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
