Помогите пожалуйста с адаптивным меню и слайдером. Эти элементы существуют на каждом сайте, поэтому хороший код не помещает. К сожалению, этого нет даже на платных курсах обучающей этим технологиям информации… Я хочу, чтобы меню при уменьшении экрана исчезала, а на месте появлялся гамбургер)) И при клике, это всё разворачивалось… А при изменении экрана, выпадающий список исчезал. То есть не только при нажатии на крестик, но и при изменении экрана. И слайдер… Я видел, что у вас есть на CSS, но он ведь не переключается автоматически! Нужен js код!
Уважаемый Alex!
Я Вам советую смотреть в сторону @media и сайта Кантора не реклама , в частности 2ую главу.
Вам нужно для меню использовать медиа выражние. Т.е,:
Вы в сss переопределяете нужные вам стили под разные ширины:
И код будет что-то типа такого:
var toggle = document.querySelector('.toggle');
var menuList = document.querySelector('toggle__menu-list');
toggle.onclick = function (e) {
e.preventDefault();
menuList.style.display = "block";
};
Где toggle - Ваш гамбургер (на нужной ширине с помощью медиа скроете его вовсе), menuList - обвертка для пунктов меню, которая изначально имеет дисплей нан.
Вместо стайл советую использовать classList.add , classList.remove , .toggle.
По аналогии сделаете крестик.
Кстати , хак! на сайте академии меню работает именно так, как вы хотите. Используете dev tools chrome, посмотрите стили и поресайзите окно.
Для слайдера, если не хотите сильно разбираться - используйте slick.js. Очень удобно, много настроек.
Большое спасибо за подсказку! А, когда вы говорите о том, что на сайте академии рассматривается принцип работы меню, вы что имеете ввиду? Где это рассматривается? Знаю, f12, но …Немного туплю наверное) Стили могу просмотреть, а скрипт, который используется, найти не могу! И ещё… подскажите пожалуйста, где у Ильи Кантора про меню? Я тоже заметил его ресурс, и собираюсь пройти, но меню нужно сейчас)) И не только код… Я хочу понять принцип работы!
Я выразился не совсем точно. На главной странице академии, при ресайзе окна появляется мен-гамбургер. Открываете ф12 и через инспектор можете посмотреть из чего этот гамбургер сделан и какие стили. Он ведет себя на 100% как Вы хотите.
У Кантора я пока не видел точные какие-то примеры, т.к. сам учусь.Но во второй главе есть необходимые для Вас события и работа с DOMом. Если хотите - вечером можем связаться, я помогу сделать по макету.
Спасибо вам огромное за предложение о помощи! Я не хочу просто так терять ваше время. Хочу сначала разобраться сам, а если у меня не получиться, то тогда уже я обязательно вам напишу (да и если получиться, тоже)) Макет всё равно учебный. Буду тренироваться! Ещё раз, спасибо большое!!!
P.S. А гамбругер, я нашёл, посмотрите:http://elijahmanor.com/css-animated-hamburger-icon/ только не пойму… что означает toggle в - classList.toggle(“action”) ?
Дмитрий здравствуйте! Вы здесь?
Да, я тут
Toggle это метод который изменяет видимость элементов (видимый/невидимый). Можно отдельно задавать длительность анимации переключения видимости (первый параметр).