<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?? не совсем понимаю как реализовать блок при закрытом меню (верхняя часть скриншота) и как спрятать блок меню, что бы не было горизонтального скролла.
Объясните пожалуйста логику верстки этого блока. Спасибо
