Где взять скрипт бокового меню для сайта?

Question

[Юра]

Привет, возможно перерыл всё что есть, не могу найти, нужно боковое меню для сайта, расположено с боку за пределами окна браузера, в правом или в левом верхнем углу иконка "Меню" (гамбургер), при нажатии иконки меню выползает, по верх контента или толкает контент, в мобильном виде меню расположено сверху на всю длину и при нажатии опускается вниз толкая контент или накрывая его, в принципе не важно.

Их всего, что есть нашёл самое простое но и оно далеко не то:

<!-- Правое меню -->
<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>
<div class="hidden-menu">
     <div class="menucon">
         <?php echo $this->render_plugins('categories')?> - это плагин сайта вызова ссылок на разделы
	 </div>
</div>

/* Правый блок */
.hidden-menu { position:fixed; z-index:2; display:block; border-left:1px solid #DEDEDE; background:#F2F2F2; width:290px; height:100%; top:0; right:-290px; transition:right .5s; list-style:none; margin:0; -webkit-transform:translateZ(0);-webkit-backface-visibility:hidden; box-sizing:border-box; overflow-y:auto;}
.hidden-menu-ticker { display:none;}
.hidden-menu-ticker:checked ~ .btn-menu       { right:5px;}
.hidden-menu-ticker:checked ~ .hidden-menu { right:0;}
.hidden-menu-ticker:checked ~ .btn-menu span.first   { -webkit-transform:rotate(45deg); 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); transform:rotate(-45deg); top:-10px;}
.menucon   { padding:10px 30px 0px 30px; width:auto; height:auto; overflow:hidden; box-sizing:border-box;}
.btn-menu { position:fixed; z-index:3; top:5px; right:5px; width:30px; background:#F2F2F2; color:#5CB85C; cursor:pointer; transition:right .5s; padding:7px; -webkit-transform:translateZ(0); -webkit-backface-visibility:hidden;}
.btn-menu span { position:relative; display:block; height:5px; background:#5CB85C; margin:5px 0 0; transition:all .1s linear .5s;}
.btn-menu span.first { margin-top:0;}

Знаю что на многих сайтах wordpress такие меню популярны, может есть где исходный код для установки не как плагина?

Comments

[gleendo]

Потратить 10 минут и написать самому.

[Виктор 2]

codepen.io здесь вариантов много

Answer 1

[one_day]

тыц

Answer 2

[Олег]

Как вариант: https://tympanus.net/Development/SidebarTransitions/

Зачем усложнять себе жизнь и делать сначала меню, выезжающее сбоку, а после - сверху? Или такое ТЗ?
По ссылке выезжает сбоку.