Меню по своему стилю подойдет для сайтов с любым дизайном. Выплывающее сбоку меню на CSS3 выполнено так, что код HTML выпадающего меню максимально короткий. Никакого эффекта при появлении меню нет, меню просто мгновенно выезжает и исчезает. Просто при событии hover показывается нужный элемент меню.
CSS
.hidden-menu {
display: block;
position: fixed;
list-style:none;
padding: 10px;
margin: 0;
box-sizing: border-box;
width: 200px;
background-color: #ddd;
height: 100%;
top: 0;
left: -200px;
transition: left .2s;
z-index: 9;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}.hidden-menu a{
color: #777;
}.hidden-menu-ticker {
display: none;
}.btn-menu {
background-color: none;
padding: 5px;
position: fixed;
top: 5px;
left: 5px;
cursor: pointer;
transition: left .23s;
z-index: 11210;
width: 45px;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}.btn-menu span {
display: block;
height: 5px;
background-color: #777;
margin: 5px 0 0;
transition: all .1s linear .23s;
position: relative;
}.btn-menu span.first {
margin-top: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu {
left: 160px;
}.hidden-menu-ticker:checked ~ .hidden-menu {
left: 0;
}.hidden-menu-ticker:checked ~ .btn-menu span.first {
-webkit-transform: rotate(45deg);
top: 10px;
}.hidden-menu-ticker:checked ~ .btn-menu span.second {
opacity: 0;
}.hidden-menu-ticker:checked ~ .btn-menu span.third {
-webkit-transform: rotate(-45deg);
top: -10px;
}
Разметка HTML
<input type="checkbox" id="hmt" class="hidden-menu-ticker">
<label class="btn-menu" for="hmt">
<span class="first"></span>
<span class="second"></span>
<span class="third"></span>
</label>
<ul class="hidden-menu">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
Для более корректной работы кода может потребоваться персональная настройка.
ПРОВЕРЕНО!
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят:
| Feedback: 0 | |