Мобильное меню

[d12]

 <nav class="main-nav  main-nav--active">
      <button class="main-nav--toggle" type="button">Открыть меню</button>

      <div class="main-nav__wrapper">
        <ul class="main-nav__list">
          <li class="main-nav__item  main-nav__item--active"><a href="#">Главная</a></li>
          <li class="main-nav__item"><a href="#">Наши работы</a></li>
          <li class="main-nav__item"><a href="#">Записаться</a></li>
          <li class="main-nav__item"><a href="#">Контакты</a></li>
        </ul>
        <ul class="main-nav__user-list">
          <li class="main-nav__user-item"><a href="#" class="main-nav__user-login" title="Войти">Вход</a></li>
        </ul>
      </div>

    </nav>

Подскажите пожалуйста как сверстать такое меню. Вот моя разметка.

1. Меню в закрытом состоянии - Показана активная страница и кнопка меню. Как лучше сделать? я вот думаю добавить еще один блок выше навигации, который будет во всю ширину. Туда просто вписать страницу на которой находишься. 

Кнопку спозиционировать относительно этого блока top 0 right 0 что бы она была в правом углу этого блока. 

Меню также спозиционировать top 0 left 100% (скрытое состояние), но тогда overflow hidden придется задавать для body?? не совсем понимаю как реализовать блок при закрытом меню (верхняя часть скриншота) и как спрятать блок меню, что бы не было горизонтального скролла. 

Объясните пожалуйста логику верстки этого блока. Спасибо

Edited April 19, 2017 by d12

[Switch74]

а почему не используете например height:0;overflow:hidden; чтобы скрыть, а не двигать элемент?

 

[d12]

меню по макету должно вылезать справа. стоит попробовать с width 0  ? хорошая это вообще практика?

Edited April 19, 2017 by d12

[Switch74]

данная практика имеет место быть, но в вашем случае проще сделать обертку, которая будет right:0;overflow:hidden;width:0;
меняя width вы будете выдвигать или задвигать меню без полосы прокрутки у body