javascript выпадающее меню по клику
jQuery для начинающих. Часть 2. JavaScript Меню.
В первой части были рассмотрены базовые принципы работы селекторов и приведены несколько примеров, в данной статье я постараюсь акцентировать внимание на реализации JavaScript меню для Вашего сайта.
Если Вам готовый код наглядней документации, то переходим от слов к делу, т.е. на страницу с примерами.
Slide меню
Два slide-меню на странице: вверху и внизу.
Кликаем по ссылке с классом «btn-slide», выезжает панель с меню.
Частично данный пример присутствует в первой части, так что особо углубляться в реализацию не буду, приведу лишь JavaScript код с пояснениями:
Slide меню 2
Slide-меню слева и справа страницы. Для начала приготовим HTML:
У нас должно получиться что-то наподобие следующего:
Теперь создадим обработчик событий для ссылок с классом «btn-slide»:
Затем нам необходимо найти элемент с классом «panel» и выдвинуть его на 120 пикселей:
Соединяем это вместе:
Drop-down меню
Одна из самых распространенных реализаций меню для сайта это горизонтальное выпадающее меню, его конечно можно реализовать при помощи CSS, но статья у нас о jQuery, так что будем орудовать оным. Начнем с HTML’a (замечу, что для всех остальных примеров код практически не отличается):
Ну и собственно сам HTML:
Далее нам необходимо добавить обработчик для события hover для элементов li:
И отображаем под-меню:
А теперь всё вместе:
Drop-down AJAX меню
Горизонтальное выпадающее меню с подгрузкой элементов AJAX’ом.
Для начала нам понадобится само меню:
И заготовки для подменю, назовем их menu1.html, menu2.html и menu3.html — по id соответствующих элементов меню (скорей всего данные элементы будут генерироваться динамически, но для упрощения примера используем статические странички):
Теперь, как и в предыдущем примере, нам необходим обработчик события hover:
Теперь необходимо загрузить недостающие элементы меню посредством AJAX’a:
Drop-down меню
Вертикальное выпадающее меню. Достаточно простенький примерчик:
Float меню
Плавающее меню. Нам понадобится плагин Dimensions (дабы работали методы height() и width()). Ну с HTML я думаю, Вы разберетесь:
Теперь по порядку — начнем с получение информации о текущем расположении «плавающих» меню:
Далее, нам необходимо «повесить» свою функцию для события scroll:
Ну и собственно наполнение:
Так же добавим отображение/скрытие элементов подменю:
Собственное контекстное меню с использованием JavaScript
Что есть контекстное меню?
Если верить Википедии, контекстное меню — меню, появляющееся при взаимодействии пользователя с графическим интерфейсом (при нажатии правой кнопки мыши). Контекстное меню содержит ограниченный набор возможных действий, который обычно связаны с выбранным объектом.
На вашем компьютере клик правой кнопкой мыши на рабочем столе вызовет контекстное меню операционной системы. Отсюда вы, вероятно, можете создать новую папку, получить какую-то информацию и сделать что-нибудь еще. Контекстное меню в браузере позволяет, например, получить информацию о странице, посмотреть ее исходники, сохранить изображение, открыть ссылку в новой вкладке, поработать с буфером обмена и всякое такое. Причем набор доступных действий зависит от того, куда именно вы кликнули, то есть от контекста. Это стандартное поведение, закладываемое разработчиками браузера [И расширений к нему].
Веб-приложения постепенно начинают заменять стандартные контекстные меню своими собственными. Отличными примерами являются все те же Gmail и Dropbox. Вопрос лишь в том, как сделать свое контекстное меню? В браузере при клике правой кнопкой мыши срабатывает событие contextmenu. Нам придется отменить поведение по умолчанию и сделать так, чтобы вместо стандартного меню выводилось наше собственное. Это не так уж сложно, но разбираться будем пошагово, так что выйдет довольно объемно. Для начала создадим базовую структуру приложения, чтоб разрабатываемый пример не был совсем уж оторван от реальности.
Список задач
Представим, что мы создаем приложение, позволяющее вести список задач. Я понимаю, вы уже наверняка неимоверно устали от всех этих списков задач, но пусть будет. Страница приложения содержит список незавершенных задач. Для каждой задачи доступен типичный набор действий CRUD: получить информацию о задаче, добавить новую, редактировать, удалить.
Пример результата есть на CodePen. Можете заглянуть туда сразу, если лень читать или хотите убедиться, что действительно заинтересованы в дальнейшем чтении. Ну а пока приступим к пошаговой разработке задуманного. Я буду использовать некоторые современные фишки CSS и создам простейший список задач на data-атрибутах. Также воспользуюсь сбросом стилей от Эрика Мейера и сброшу свойство box-sizing для всех элементов в border-box:
Я не буду использовать префиксы в CSS, но в демо на CodePen включен автопрефиксер.
Создание базовой структуры
Откроем наш HTML-документ, накидаем шапку, контентную часть с некоторым списком задач и подвал. Я также подтяну Font Awesome и шрифт Roboto, чтобы сделать оформление немного лучше. Каждая задача должна содержать атрибут data-id, который в реальности брался бы из БД. Также каждая задача будет содержать список действий. Вот важные части разметки:
Если вы используете CodePen, можете в настройках включить автопрефиксер и подключение CSS-сброса. В противном случае придется делать все руками, если еще не автоматизировали этот процесс. Не забывайте, что наша цель — создание контекстного меню, так что обработка действий не будет реализована. А теперь давайте добавим еще немного CSS:
Полный набор стилей (да и всего остального) представлен на CodePen. А здесь будут самые важные части кода, разметки и оформления. Но давайте уже наконец приблизимся к нашему контекстному меню.
Набросаем наше контекстное меню — разметка
Приводим наше меню в порядок — CSS
Уже была упомянута необходимость абсолютного позиционирования разрабатываемого меню. Кроме того, установим свойство z-index в 10. Не забывайте, что в вашем приложении может потребоваться другое значение. Это не все возможные стили, в демке наведены прочие красивости, но они уже зависят от ваших потребностей и не являются обязательными. Прежде чем переходить к JS, сделаем меню невидимым по умолчанию и добавим дополнительный класс для его отображения.
Разворачиваем наше контекстное меню — JavaScript
Начнем с того, что посмотрим, как зарегистрировать событие contextmenu. Откроем самовыполняющуюся функцию и отловим событие на всем документе. Также будем логировать событие в консоль, чтобы получить какую-то информацию:
Если заглянуть в консоль, можно увидеть, что уникальное событие срабатывает при каждом нажатии на элемент из списка задач. Теперь помимо отмены поведения по умолчанию реализуем отображение контекстного меню, добавляя к нему вспомогательный класс.
Но для начала давайте добавим к меню ID, чтобы его проще было получать посредством JS. Также добавим переменную состояния меню menuState и и переменную с активным классом. Получились три переменных:
Едем дальше. Пересмотрим функцию contextMenuListener и добавим toggleMenuOn, отображающую меню:
На данный момент правой кнопкой мыши уже можно вызвать наше контекстное меню. Но нельзя сказать, что оно работает правильно. Во-первых, оно находится совсем не там, где хотелось бы. Для устранения проблемы понадобится немного математики. Во-вторых, закрыть это меню пока невозможно. С учетом того, как работают обычные контекстные меню, хотелось бы, чтоб наша его реализация закрывалась при клике не меню и при нажатии Escape. Помимо этого при правом клике вне нашего меню оно должно закрыться, а вместо него требуется открытие меню по умолчанию. Давайте попробуем все это решить.
Рефакторинг нашего кода
Вернемся и отредактируем contextListener:
Имея вспомогательную функцию, делающую за нас часть грязной работы, и отлавливая событие contextmenu на всем документе, мы можем теперь закрывать меню при клике вне его. Для этого добавим функцию toggleMenuOff и отредактируем contextListener:
Теперь нажмите правой кнопкой по элементу списка. А после — где-нибудь в другом месте документа. Вуаля! Наше меню закрылось и открылось стандартное. Затем сделаем нечто похожее самое для события click, чтобы не от одной правой кнопки оно закрывалось:
Этот кусок кода несколько отличается от предыдущего, потому что Firefox. После того, как правая кнопка мыши отжата, в Firefox срабатывает событие click, так что здесь нам приходится дополнительно убеждаться, что произошел действительно клик левой кнопкой. Теперь меню не моргает при правом клике. Давайте добавим похожий обработчик и на нажатие клавиши ESC:
Мы получили меню, которое открывается и закрывается как задумано, взаимодействующее с пользователем естественным образом. Давайте наконец отпозиционируем меню и попробуем обрабатывать события внутри него.
Позиционирование нашего контекстного меню
С учетом текущих HTML и CSS, наше меню отображается в нижней части экрана. Но нам-то хотелось бы, чтоб оно появлялось там, где произошел клик. Давайте исправим сие досадное упущение. Во-первых, добавим еще одну вспомогательную функцию, получающую точные координаты клика. Назовем ее getPosition и попробуем заставить обрабатывать разные причуды браузеров:
Наш первый шаг в позиционировании меню — подготовка трех переменных. Добавим их в соответствующий блок кода:
Создадим функцию positionMenu, принимающую единственный аргумент — событие. Пока что пусть она выводит координаты меню в консоль:
Отредактируем contextListener, чтобы начать процесс позиционирования:
Снова повтыкайте в контекстное меню и загляните в консоль. Убедитесь, что позиция действительно доступна и логируется. Мы можем использовать встроенные стили для задания свойств top и left посредством JS. Вот и новая версия positionMenu:
Как вы помните, по умолчанию наше меню скрыто, так что нельзя просто взять и посчитать его размеры. В нашем случае меню статическое, но при реальном применении его содержимое может меняться в зависимости от контекста, так что рассчитывать ширину и высоту лучше в момент открытия. Получим нужные величины внутри функции positionMenu:
Введем еще две переменных, но на этот раз для размеров окна:
Посчитаем их значения похожим образом:
В конечном счете давайте предположим, что хотим показывать меню не ближе, чем в 4 пикселях от края окна. Можно сравнить значения, как я говорил выше, и скорректировать позицию как-то так:
Сейчас наше меню ведет себя совсем хорошо. Осталось что-то сделать с ресайзом окна. Я уже говорил, как поступает Dropbox, но вместо этого мы будем закрывать контекстное меню. [Такое поведение куда ближе к стандартному] Добавим в функцию init следующую строку:
И напишем саму функцию:
Цепляем события к пунктам контекстного меню
Если ваше приложение сложнее данного примера, и у вас планируется динамическое содержимое контекстного меню, придется подробнее вникнуть в происходящее далее, чтобы самому додумать недостающие детали. В нашем приложении все проще, и есть всего одно меню с постоянным набором действий. Таким образом, можно быстро проверить, какой именно элемент был выбран, и обработать этот выбор. В нашем примере просто сохраним выбранный элемент в переменную и запишем в консоль его data-id и выбранное действие. Для этого отредактируем разметку меню:
Далее давайте закэшируем все нужные объекты:
Появилась переменная taskItemInContext, которой присваивается значение при правом клике по элементу списка. Она нам потребуется для логирования ID элементов. Также появились новые имена классов. Теперь пройдемся по функциональности.
Функция инициализации остается такой же. Первое изменение затрагивает contextListener, ведь мы хотим сохранять в taskItemInContext элемент, на который кликнул пользователь, а функция clickInsideElement как раз его и возвращает:
Мы сбрасываем ее в null, если правый клик произошел не по элементу списка. Ну и возьмемся за clickListener. Как я упоминал ранее, для простоты мы просто будем выводить информацию в консоль. Сейчас при отлавливании события click производится несколько проверок и меню закрывается. Внесем коррективы и начнем обрабатывать клик внутри контекстного меню, выполняя некоторое действие и лишь после этого закрывая меню:
Вы могли заметить, что вызывается функция menuItemListener. Ее мы определим чуть позже. Функции keyupListener, resizeListener и positionMenu оставляем без изменений. Функции toggleMenuOn и toggleMenuOff отредактируем незначительно, изменив имена переменных для лучшей читаемости кода:
Наконец реализуем menuItemListener:
На этом разработка функциональности заканчивается.
Некоторые замечания
Большой вопрос
Я выделил эту проблему в отдельный пункт, потому что это действительно важно после всего, что мы проделали. Задайтесь вопросом: действительно ли вам нужно собственное контекстное меню? Такие штуки — это круто, но прежде чем их использовать, вы должны убедиться, что это действительно полезно в вашем случае. Обычно пользователи ожидают привычного поведения приложения. Например, после правого клика по фотографии они ожидают получения возможности сохранить ее, скопировать ссылку и т. д. Отсутствие нужных пунктов в кастомном меню может их огорчить.
Совместимость с браузерами
Заключение и демо
Если вы тщательно все обдумали и уверены, что такая функциональность нужна вашему приложению, вы можете использовать разработанное меню. Конечно, оно может потребовать каких-либо изменений, но данное руководство подробно описывает процесс разработки, так что реализовывать свои поправки должно быть не так сложно.
Кодовая база этого руководства залита на GitHub и будет поддерживаться и, возможно, обновляться в течение долгого времени. А полное рабочее демо можно потыкать на CodePen.
От переводчика
Перевод местами достаточно вольный, но не в ущерб смыслу или содержанию. Все, что не относится напрямую к оригиналу, вынесено в примечания.
С предложениями, пожеланиями и замечаниями, как обычно, в ЛС.
Узнайте, как создать раскрывающееся меню с CSS и JavaScript.
Раскрывающемся
Раскрывающееся меню представляет собой переключаемое меню, позволяющее пользователю выбрать одно значение из стандартного списка:
Создание всплывающего раскрывающегося меню
Создайте раскрывающееся меню, которое появляется при нажатии пользователем кнопки.
Шаг 1) добавить HTML:
Пример
Пример как работает
Используйте элемент контейнера (например,
Шаг 2) добавить CSS:
Пример
/* Dropdown Button */
.dropbtn <
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>
— needed to position the dropdown content */
.dropdown <
position: relative;
display: inline-block;
>
/* Dropdown Content (Hidden by Default) */
.dropdown-content <
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>
/* Links inside the dropdown */
.dropdown-content a <
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>
/* Change color of dropdown links on hover */
.dropdown-content a:hover
Пример как работает
We have styled the dropdown button with a background-color, padding, hover effect, etc.
Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.
Тестовое задание: выпадающее меню на чистом javascript
Два-три года назад откликнулся на вакансию фронтенд-разработчика контентных проектов в Mail.ru Group. В ответ стандартно получил просьбу выполнить тестовое задание. К сожалению, моего уровня оказалось недостаточно и мне пришёл отказ. Хочу поделиться тестовым заданием и своим кодом, который был написан в ходе его выполнения. Возможно кому-то пригодится такое простенькое выпадающее меню на нативном javascript.
Итак, задание формулировалось следующим образом:
Реализовать идеальное, на твой взгляд, «выпадающее меню» (dropdown).
Пример/черновик верстки http://jsfiddle.net/jawLmp4x/
Минимальные требования:
0. Никаких библиотек, только нативный js
1. Возможность отследить раскрытие/скрытие «выпадашки» и выбор элемента
2. Настройка раскрытия/скрытия по нажатию или наведению
Всё остальное на твое усмотрение, можно просто описать словами, что бы ты ещё улучшил, какую функциональность добавил и так далее.
P.S. Поддержка браузерами не имеет значения
Оценив задание, мне стало понятно, что для «идеальности» нужно выполнить весьма немало требований. За вечер успел накидать только базовый вариант без дополнительных возможностей. А утром выслал его, сопроводив описание остальных улучшений следующими словами.
Основное требование к любому компоненту — возможность переиспользования, как в рамках одного проекта, так и за его пределами. Поэтому одним из главных критериев должна быть универсальность. Универсальность выпадающего меню, на мой взгляд, можно рассматривать в следующих аспектах:
Также возможно не до конца верно понял требования. Написал меню исходя из того, что в обоих вариантах (как при открытии по клику, так и при открытии плашек при наведении) пользователь должен выбрать пункт меню второго уровня, после чего выбранный пункт перекрашивается.
Пункт 1 из тестового задания рассматривал как сохранение текущего состояния меню, чтобы другие компоненты могли забрать эту информацию и использовать. В приведенном коде в экземпляре меню просто сохраняются индексы выбранных элементов. Реализацию подписки на события в тот вечер сделать не успел. Часть пунктов при этом могут быть обычными ссылками и ведут на другие страницы.
Итак, вставка горизонтального меню из нескольких пунктов, открывающееся по клику, выполняется с помощью следующего кода.
А меню из одной кнопки с выпадающим списком при наведении таким:
Вот такая пара сотен строк кода получилась:
Раскрывающийся список на JavaScript
Когда мы имеем дело с большими вложенными списками, было бы хорошо сделать их как можно компактнее. JavaScript отлично справится с поставленной задачей.
HTML разметка
Сделаем HTML разметку для раскрывающегося списка. Для этого создадим вложенные в друг друга списки.
CSS код
На месте убранных дефолтных маркеров, с помощью JavaScript будут переключаться классы для замены плюса на минус и наоборот. Для раскрытия пункта списка, нужно нажать на плюс. Для сокрытия, нажать на минус.
body <
font-size: 20px;
font-weight: 500;
font-family: sans-serif;
>
ul li <
list-style: none; /* убираем дефолтные маркеры */
>
.list span <
cursor: pointer;
>
.hide::before <
content: «+»; /* украшательство вместо маркера */
>
.show::before <
content: «-«; /* украшательство вместо маркера */
>
JavaScript код
Пройдемся в цикле for of по всем тегам li и обернем их содержимое в тег span с классом show. Тегом span мы ограничим область для клика мышкой, класс show служит чисто оформительским целям. Почему мы заранее не внесли span в разметку? Тогда пришлось для каждого добавленного нового пункта меню через админку, вручную прописывать тег span.
for (let li of list.querySelectorAll(‘li’)) <
let span = document.createElement(‘span’); /* создание span */
span.classList.add(‘show’); /* добавление класса для span */
li.prepend(span); /* вставить span внутри li */
span.append(span.nextSibling) /* присоединить к span следующий узел */
>