Выезжающий слой с помощью CSS

Привет всем! Сегодня была интересная для реализации задача: выезжающий слой… вариантов нагуглено было немало (я вообще не сторонник изобретать велосипеды, и с удовольствием использую Google для решения подобного типа задач), но больше всего понравился вариант решения данной задачи с помощью CSS без подключения сторонних библиотек.

Для этого используем следующий код:

```
<style>
```
```
.hidden-menu {
```
```
  display: block;
```
```
  position: fixed;
```
```
  list-style:none;
```
```
  padding: 10px;
```
```
  margin: 0;
```
```
  box-sizing: border-box;
```
```
  width: 200px;
```
```
  background-color: #eee;
```
```
  height: 25%;
```
```
  top: 100;
```
```
  left: -200px;
```
```
  transition: left .5s;
```
```
  z-index: 2;
```
```
  -webkit-transform: translateZ(0);
```
```
  -webkit-backface-visibility: hidden;
```

  box-shadow: 0 0 10px rgba(0,0,0,0.5);

```
  padding: 10px;
```
```
  border-radius: 5px;
```
```
}
```
```
 
```
```
.hidden-menu-ticker {
```
```
  display: none;
```
```
}
```
```
 
```
```
.btn-menu {
```
```
  color: #fff;
```
```
  background-color: #0058B9;
```
```
  padding: 7px;
```
```
  position: fixed;
```
```
  top: 270px;
```
```
  left: 5px;
```
```
  cursor: pointer;
```
```
  transition: left .23s;
```
```
  z-index: 3;
```
```
  width: 25px;
```
```
  -webkit-transform: translateZ(0);
```
```
  -webkit-backface-visibility: hidden;
```
```
}
```
```
.btn-menu span {
```
```
  display: block;
```
```
  height: 3px;
```
```
  background-color: #fff;
```
```
  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: 8px;
```
```
 
```
```
}
```

.hidden-menu-ticker:checked ~ .btn-menu span.second {

```
  opacity: 0;
```
```
}
```

.hidden-menu-ticker:checked ~ .btn-menu span.third {

```
  -webkit-transform: rotate(-45deg);
```
```
  top: -8px;    
```
```
}
```
```
</style>
```
```
 
```

<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">
```
```
<table width="100%" border="0">
```

    <td bgcolor="#FFFF00">Блок 1</td>

```
  </tr>
```
```
  <tr>
```

    <td bgcolor="#FF9900">Блок 2</a></td>

```
  </tr>
```
```
  <tr>
```

    <td bgcolor="#FF9999">Блок 3</td>

```
  </tr>
```
```
</table>
```
```
</ul>
```

Как видно — представленный выше код обладает очень большим функционалом: тут тебе и возможность модификации визуальной части (расположение, внешний вид), и возможность размещать на самом слое все, что необходимо — от картинок, до видео 🙂

Пример работы кода доступен по ссылке 🙂
Спасибо за внимание!

Oleksiy Lavrynenko

Выезжающий слой с помощью CSS

Понравилось это:

Похожее