Как сделать выпадающее меню на js
Создать меню, которое по нажатию открывается либо закрывается:
P.S. HTML/CSS исходного документа можно и нужно менять.
HTML/CSS
Для начала создадим разметку HTML/CSS нашего меню.
Меню – это отдельный графический компонент на странице, так что его лучше вынести в отдельный DOM-элемент.
Список пунктов меню может быть представлен в виде списка ul/li .
Для заголовка мы используем тег <span> , потому что <div> , как и любой блочный элемент, имеет скрытое свойство display:block , а значит, занимает ширину 100%.
Таким образом, если мы зададим обработчик события onclick , то он будет срабатывать по клику на всей ширине поля.
…тег <span> – строчный элемент, по умолчанию имеет свойство display: inline , который занимает ровно столько места, сколько занимает сам текст:
Переключение меню
Переключение меню должно менять стрелку и скрывать или показывать список элементов меню.
Все эти изменения прекрасно обрабатываются средствами CSS. Посредством JavaScript мы будем отмечать текущее состояние меню, добавляя или удаляя класс .open .
Без класса .open меню будет закрыто:
…А с ним (с классом .open ) стрелка будет меняться, и список будет показываться:
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 я думаю, Вы разберетесь:
Теперь по порядку — начнем с получение информации о текущем расположении «плавающих» меню:
Как создать выпадающее меню при нажатии? [закрыт]
Учебные задания допустимы в качестве вопросов только при условии, что вы пытались решить их самостоятельно перед тем, как задать вопрос. Пожалуйста, отредактируйте вопрос и укажите, что именно вызвало у вас трудности при решении задачи. Например, приведите код, который вы написали, пытаясь решить задачу
Закрыт 5 лет назад .
Объясните пожалуйста, как создается выпадающее меню при нажатии. Приму любую конструкцию, главное, чтобы работало. Нужен просто пример.
Пишем меню на Java Script
Каждый изучающий JS программист должен сделать три вещи: дебажить код алертами, написать выпадающее меню и сделать слайдер. Сегодня мы будет работать с меню.
Напомню, что данный урок предназначен для изучения и его код не является идеальным примером, поскольку служит для понимания принципов работы.
Создадим структуру меню в HTML коде. Пусть все меню будет представлено блоком с . Внутри блока содержаться блоки отвечающие за пунты меню, им присвоен Сам пункт меню не выделен тегами, но при необходимости вы имеете возможность его обернуть и оформить по его вкусу. Выпадающие меню, которые закреплены за каждым пунктом, находятся в блоках Весь код представим следующим образом: