Search the Community

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