Как правильно/лучше реализовать меню и background?

Question

[vintalis]

Привет, не могу понять как лучше или правильней будет сделать

вот такое меню

и background который выходит за приделы контейнера, на фото выделил красным.

Необходимо, чтобы слева было фиксированное меню, которое прокручивалось вниз вместе с прокруткой страницы, справа от него располагались секции. Причем, в первой секции (та, что с коровой) вверху должен быть header с номером телефона, почтой, формой поиска.

Я сейчас сделал это в header и считаю, что это не правильно, так как я тогда просто другие section адекватно добавить не смогу и придется все в header писать.
Вот как у меня сейчас https://codepen.io/pen/rNOJMpv

Comments

[n1ksON]

А зачем Вам всё в header писать? header никак не влияет на остальной контент и не мешает его позиционированию.

[vintalis]

n1ksON, а я не хочу все в header писать, просто обычно меню в header делается, но на скрине видно что оно фиксированое при прокрутке, и я не могу понять как правильно сделать, что б отделить меню, от других секций, но при этом оно оставалось фиксированое и в контейнере

[n1ksON]

vintalis, position: fixed пробовали?

[vintalis]

n1ksON, да, но не в этом дело, смотрите, есть вертикальное меню оно в header у меня сейчас, но допустим если я хочу добавить еще одну секцию, как мне это сделать, что б и меню всегда было на одном месте, там на скрине я все показал.

[g33km]

vintalis, думаю, мне одному так и не получилось до конца понять, чего же в итоге вам нужно?

Если я не ошибаюсь, необходимо, чтобы слева было фиксированное меню, которое прокручивалось вниз вместе с прокруткой страницы, справа от него располагались секции. Причем, в первой секции (та, что с коровой) вверху должен быть header с номером телефона, почтой, формой поиска. Так?

[vintalis]

g33km, да все верно,сохранил вашу версию, что б было более понятно

Answer 1

[g33km]

Например, так. Собрано на скорую руку.
Codepen

Comments

[vintalis]

допустим, а как сделать что б меню фиксированое оставалось в контейнере например ширина которого 1200px, при этом вся левая часть что за контейнером была закрашена в тот же цвет что и фиксированое вертикальное меню, как на картинке в примере

[n1ksON]

vintalis, а зачем вам это нужно? чтобы закрасить в один и тот же цвет, нужно обоим контейнерам выставить background-color

[vintalis]

n1ksON, потому что так в макете сделано, по этому нужно такое извращение

[g33km]

vintalis, если нужно изменить ширину меню, то установите flex-basis: 1200px;
Слева от контейнера с меню ничего нет, ведь он расположен по левой границе монитора...
В моем примере всей странице дан один цвет, а секции окрашены в белый и темно-синий цвет для наглядности.

Вот пример, вся страница окрашена в цвет бокового меню.

[vintalis]

g33km, спасибо разобрался с вашей помощю.