Как сверстать header с картинкой и выезжающим меню?

Question

[gleendo]

Подскажите пожалуйста, как можно сделать вот так:


Мне нужно научиться делать, выезжающее меню и
Чтобы при любой интенсивности скролла, первый экран прокручивался на всю высоту, а дальше уже как обычно.

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

Вот что пока получилось - codepen.io/evg_/full/BybjNa

Как теперь поставить картинку на весь экран, чтобы под нее можно было добавлять другие блоки информации.(чтобы был скрол, а то при добавлении картинки на фон, он исчезает и кроме картинки ничего не видно внизу)

Подскажите что погуглить, или сайты какие нибудь подскажите с туториалами по этой теме. В общем любую инфу пожалуйста.

Answer 1

[Александр Цымбал]

зайдите на html5up.com - там можно бесплатно скачать адаптивные шаблоны, некоторые из них как раз такие, как вам нужны - первая картинка тянется на всю высоту окна браузера, меню фиксируется и выдвигается слева и т.д.

вообще, нужно достаточно хорошо разбираться в теории html, css, js, чтобы верстать такие вещи самостоятельно.
Не знаете основ? - тратите зря время, пытаясь перепрыгнуть огромный теоретический пласт и перейти сразу к практике. Ничего не получится.

Comments

[gleendo]

Спасибо. Перепрыгивать ничего не собираюсь. Это ко мне в плане моего обучения вебу, никак не относится. Просто нужно сделать, быстро и любым способом.

Answer 2

[Ilya Korablev]

Учите азы, емае.
Пример
Вот вам пример с изображением

Comments

[gleendo]

Вы о чем? я не спрашивал что мне учить. Мне просто необходимо найти решение данной задачи. На выходных нужно сделать сайт с подобным функционалом. Поэтому мне необходимо это как можно быстрей. Азы JS я получаю, но сейчас не та ситуация, чтобы самому за 100500 дней изучить JS и сделать меню с картинкой.

[Ilya Korablev]

con_: вы нам ставите задачи. Вообще, не беритесь за JS, пока не выучите это. Еще, какой header? Header - это то, что наверху, а оно у вас слева. И зачем фиксированное? У вас же картинка, а не текст!

[gleendo]

Ilya Korablev: Вот именно header - это то что наверху. Я и описал что, моя задача состоит в том, чтобы сверстать все что сверху, т.е начальный экран, в который входит background на весь экран и меню выезжающее по клику по иконке.
Мое обучение никак не связано с этой проблемой. Это отдельная тема. Просто необходимо быстро самому сделать, любым путем. Вот и спрашиваю, прошу помощи что да как.

[gleendo]

Фиксированное, для того чтобы, при скроле, меню оставалось на всегда сбоку, а не только на начальном экране.

[gleendo]

Что вы там сделали, вы вообще что ли не понимаете в чем состоит задача.
Вот Александр Цымбал понял, о чем речь вообще. и подсказал.