Как сверстать такое меню (адаптив)?

Question

[sergey1989]

Доброго времени суток. Посоветуйте, пожалуйста, на чем реализовать такое меню? Но самое главное это как вертикально растянуть блоки на всю ширину ? Весь проект идет на BS3.

Answer 1

[Андрей]

Не забудь взять плагин https://github.com/kamens/jQuery-menu-aim
ну и главное меню может начинаться с
#sideMenu {
position: fixed;
width: 190px;
height: 100%;
......

Если нужно вообще на всю высоту то просто pos:abs; h:100% в body
если же на высоту viewport то js -> window.height -> inline style

Comments

[sergey1989]

fixid не пойдет тк меню сверху не фиксид.

[riot26]

зачем тащить жквери, а потом и плагин на него ради двух блоков на обычном css?

[sergey1989]

riot26: с этим согласен. вопрос как их растянуть на всю высоту?

[Андрей]

riot26: прочитал о чем плагин? а по поводу джеквери есть подозрение что он прикручен уже

[Андрей]

sergey1989: а зачем он на всю высоту если когда начнешь скролить он все равно будет обрубленым?

[riot26]

sergey1989: codepen.io/anon/pen/RrRZwR

[Андрей]

riot26: дак оно же фиксированое и правое меню это выпадающее меню из левого. потуги были напрасны

[sergey1989]

Если в боди то не могу отрегулировать отступ слева при сужении экрана.

[Андрей]

sergey1989: тогда к какому нибудь wrapper который по ширине как .container

[sergey1989]

riot26: Ваш вариант супер, но при условии фиксированного хедера(

[sergey1989]

Сейчас проблема в том как выровнять высоту блока саб меню с родителем.

[eugene_d_dev]

Зачем использовать плагины jquery для таких простых задач? На каждый случай жизни у типичного веб-разработчика есть чужая библиотека...

Answer 2

[Stalker_RED]

Как я и писал в комментариях, "на всю высоту" это height: 100%;
Развлекайтесь: https://jsfiddle.net/murtnw34/1/embedded/result/
Со вторым уровнем сами справитесь?

Comments

[sergey1989]

Что то не тянется меню на всю высоту:

<div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="hidden-menu">
          <ul>

            <li>
              <a href="#">The meaning of ideal pitch</a>
            </li>
            <li>
              <a href="#">How to become an Expert</a>
            </li>
            <li>
              <a href="#">How pros sell</a>
            </li>
            <li>
              <a href="#">Michael 5 Best Kept Secrets</a>
            </li>
            <li>
              <a href="#">How can I pay for courses?</a>
            </li>

          </ul>
        </div>
      </div>
    </div>
  </div>

В css для списка меню задал стили

position: absolute;
  top: 0; left: 0;
  height: 100%;
  float:left;
  width: 30%;

Для body и html высота задана в 100%

[sergey1989]

Проблема возникают когда родительский контейнер пытаюсь выравнивать по центру тк по дизайну меню не с боку.

[sergey1989]

Проблему с позиционированием решил через абсолютное позиционирование и центрирование родительского блока меню. Сейчас загвоздка в подпунктах.

[Stalker_RED]

sergey1989:
height: 100%; значит что высота блока будет 100% от родительского. Если родительский не 100%, то и дочерний будет не 100%.

Ваш К.О.

можете собрать пример вашей страницы на jsfiddle или codepen?

Answer 3

[kiril901]

width=100%

Comments

[sergey1989]

это ширина, речь а высоте)

[Stalker_RED]

sergey1989:

растянуть блоки на всю ширину ?

[kiril901]

значит берем height=100% так ж сделать фиксиованным

[Stalker_RED]

sergey1989: попробуйте тогда height: 100%

[sergey1989]

Stalker_RED: не идет тк позиционирование абсолютное.

[kiril901]

sergey1989: все правильно попробуйте

[Stalker_RED]

sergey1989: Вы рассчитываете, что из вас все подробности будут по одной вытягивать?

[sergey1989]

Stalker_RED: Да подробностей и нет. Сверстал всю страницу, а к меню даже не знаю с чего начать.