Как сделать такое меню?

Question

[eellazy]

Всем привет! Интересует такое вот меню как на сайте. А именно клик и развертывание на весь экран пунктов меню. Может быть есть пример. Или как это реализовать. Можно ли сделать только с помощью css и html?
https://envato.com/index.html

Answer 1

[Андрей Федоров]

Используйте fullpage.js
alvarotrigo.com/fullPage

Comments

[eellazy]

мне кажется это не совсем то... . Есть такая штука как bootstrap hamburger. Может как-то стили править сайдбара? И указать в стилях ширину и высоту 100%

[Андрей Федоров]

eellazy: Я не понял, а где на скриншоте 1) гамбургер 2) сайдбар?
У вас горизонтальное меню слева вверху - у примера fullpage.js тоже,
У вас клик по пункту раскрывает страницу во весь экран - у примера fullpage.js тоже. В чем проблема-то?
Если вы все-таки уверены, что fullpage.js вам не подходит изучите код вашего примера. Ctrl+U или Ctrl+Shift+I и вперед.

[eellazy]

не нашел нужного мне примера. Здесь происходит прокручивание к определенному экрану. А нужно открытие определенного экрана

[Андрей Федоров]

eellazy: Тогда пример сайта в вопросе - мимо кассы, ибо там тоже прокручивание.

[eellazy]

как раз таки там и нету прокручивания. Там показывается блок с меню на всю ширину и высоту

[Андрей Федоров]

eellazy: Я жму на ссылки слева вверху - Products/Press/About - у меня прокручивание. ЧЯДНТ?

[eellazy]

Вы вопрос читали? Речь идет о custom hamburger и меню которое открывается после нажатия. Верхний правый угол. Там где квадратики

[Андрей Федоров]

eellazy: Я внимательно прочел вопрос, там ни слова нет про custom hamburger. Термином "меню" можно охарактеризовать и другие элементы сайта. К тому же на скриншоте у вас вместо custom hamburger - крестик. Т.ч. совсем не очевидно про какое меню вы задаете вопрос.

[eellazy]

на скрине четко видно о чем я спрашиваю. Спасибо за слайды. Пригодятся. А вообще можно и обычным якорем сделать

Answer 2

[HamSter]

А в стили не пробовали зайти и посмотреть?!
Что тут необычного?

Просто меню на весь экран открывается по клику на кнопку!

Comments

[eellazy]

Что касается стилей понятно. что можно взять тот же сайдбар и стилями описать вид на весь экран

Answer 3

[Xbbv1]

owl carousel можно по клику привязаться к конкретному слайду

Comments

[eellazy]

то есть по клику запускать owl?

[Xbbv1]

eellazy: по клику переключаться на определённый слайд в owl

[eellazy]

тогда получается что я имею два слайда. 1 - страница сайта 2 - меню. Верно?

Answer 4

[Evanre]

Конкретно в Вашем примере на Envato обычный постраничный лендинг. Это не меню. Но если Вам нужно именно большое меню то ищите в гугле по запросу megamenu.