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

Question

[Рустам Идрисов]

Добрый день!


Есть три части меню:
1) Блок "лого тектом" который занимает полню высоту меню.
2) Полоса справа сверху с блоками в которых ссылки
3) Полоса справа снизу в которой меню и блок "корзина" (этот блок должен быть всегда в этой полосе в крайнем правом положении)

Подскажите, пожалуйста, как правильно сверстать такое меню (как на картинке выше)?
Вопрос именно в том, как правильно расставить и настроить блоки для такого меню в десктопной версии (понятно, что в мобильной меню будет выглядеть по-другому).
И если верстка HTML5, то пункты меню нужно оформлять в блок или делать все 'ами?

Заранее спасибо за вашу помощь!

Answer 1

[Abdula Magomedov]

Более наглядной структуры чем это фото где еще может быть? Создайте такую структуру с помощью div`ов.

Answer 2

[Виталий]

Весь вопрос в том, как оно будет на мобилке и тд.
Никто не против сделать даже так:

<div class="row">
    <div class="col-xs-3"><div class="logo">Some logo here</div></div>
    <div class="col-xs-9">
        <div class="row">
            <div class="col-xs-12">
                <div class="first-line"></div>
            </div>
            <div class="col-xs-12">
                <div class="second-line"></div>
            </div>
        </div>
    </div>
</div>

Comments

[Рустам Идрисов]

почему вы используете col-xs?
Данное меню нужно для десктоп-версии. Все тоже самое сделать только с использованием col-md?

[Ankhena]

Рустам Идрисов: потому что у бутстрапа mobile first подход

[Рустам Идрисов]

Ankhena W: так я же написал, что в мобильной версии меню другое будет

[Ankhena]

Рустам Идрисов: Если именно "другое", то это никак не противоречит вышесказанному. Если xs вызывает дискомфорт, поменяйте.

[Виталий]

Рустам Идрисов: все упирается в том, как оно там на мобилке ) ... таким меню может стать при любой ширине и дальше не меняться. Тут общий пример - вариант. Если оно такое с 1170px , то тогда имхо будет -lg. И правая часть внутри уже float`ами или inline в зависимости от контента