Как сверстать такое меню?

Question

[Grizzy]

Меню выглядит примерно так.

Если кто не понял на мобильниках потом все работает примерно так:
https://mango.github.io/slideout/
Собственно не могу придумать как бы "подпихнуть" меню под весь контент на смартфонах.

Answer 1

[Иван]

Примерно так:

<div class="wrap">
<div class="content">
</div>
<div class="menu">
</div>
</div>

<style>
   .wrap { position: relative; overflow: hidden; }
   .menu { position: absolute; top: 0; left: 0; width: 150px; height: 100%; }
   .content { padding-left: 150px;  }
   .wrap.collapsed .menu { left: -150px; }
   .wrap.collapsed .content { padding-left: 0px; }
</style>

По клику на чем-нибудь добавляем/убираем у .wrap класс .collapsed. По вкусу добавляем transitions :)

Comments

[Grizzy]

У меня загвоздка в том, что на десктопах меню в шапке. А на смартфонах меню должно лежать под контентом. Шапка с лого при этом остается.

[Иван]

Grizzy: Да это разве проблема? на худой конец делаете две менюшки и прячете то одну то другую с помощью media queries

Answer 2

[Владислав Старцев]

Есть же пример https://mango.github.io/slideout/ так почему бы его и не использовать.
А в простом варианте делаешь меню список в стилях для декстопа указываешь напр. float:left а для бургера display:none, а для мобильных float:none и бургер display:block