Background Image

Выезжающая панель меню на CSS3

Script

by — Category Script on

Меню по своему стилю подойдет для сайтов с любым дизайном. Выплывающее сбоку меню на 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>

Для более корректной работы кода может потребоваться персональная настройка.

 ПРОВЕРЕНО!


Понравился материал?
Поделитесь с друзьями

С этим материалом смотрят:
    Простой скрипт выделения кода одним кликом

    Простой скрипт выделения кода ...

    Порой в материала...

    View More
    0 528 15:25
    Добавление ссылки на источник при копировании

    Добавление ссылки на источник ...

    Очень простой скрипт, который добавляет при копирова...

    View More
    0 275 15:33
    Кнопки вверх для сайта

    Кнопки вверх для сайта

    Чем проще навигация на вашем сайте, тем удобнее им п...

    View More
    0 283 10:26
    Плавная прокрутка к материалу по клику

    Плавная прокрутка к материалу ...

    Скрипт, который плавно прокручивает страницу наверх ...

    View More
    0 276 16:19
Метки: Скрипты
Feedback: 0

Leave a Comment

Имя *:
Email *:
Код *:
Menu