Sign in to follow this  
Followers 0
SlavePit

Боковое меню для сайта

1 post in this topic

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

при нажатии иконки меню выползает, в мобильном виде меню расположено сверху на всю длину и при нажатии опускается вниз толкая контент или накрывая его, не важно.

Самое простое и интересное нашёл это вставляете после Боди до Контейнера, можно ли этот код переделать в мобильный вид?

<!-- Правое меню -->
<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">
  здесь ссылки
</ul>

 

/* Правый блок */
.hidden-menu {position:fixed; z-index:2; display:block; background:#333333; width:300px; height:100%; top:0; right:-300px; transition:right .5s; list-style:none;
margin:0; padding:20px 30px 0px 30px; -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); 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;}
.btn-menu { position:fixed; z-index:3; top:5px; right:5px; width:25px; color:#FFFFFF; background:#333333; cursor:pointer; transition:right .5s;
padding:5px; -webkit-transform:translateZ(0); -webkit-backface-visibility:hidden;}
.btn-menu span { position:relative; display:block; height:5px; background-color:#FFFFFF; margin:5px 0 0; transition:all .1s linear .5s;}
.btn-menu span.first { margin-top:0;}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.