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 меню для сайта
При клике на иконку стрелки выезжает боковая панель с навигацией. Анимация сделана с помощью GSAP.
Эффект зачеркивания при наведении в меню
Эффект зачеркивания при наведении на пункт в горизонтальном меню. Наиболее эффектно будет смотреться на лендингах, где горизонтальное меню расположено поверх фонового изображения.
Slinky — адаптивное многоуровневое меню
Легкий адаптивный плагин многоуровневого меню. Меню больше подходит для отображений на мобильных устройствах.
Гибкое горизонтальное меню
Slide out sidebar меню
Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.
Mega dropdown меню
Вертикальное accordion меню
Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.
Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.
Диагональное меню на CSS
Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.
Lavalamp меню на CSS3
Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора
Анимированный border с меню
Создание off-canvas (вне основной страницы) навигации с анимированным border эффектом.
Собственное контекстное меню с использованием 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.
От переводчика
Перевод местами достаточно вольный, но не в ущерб смыслу или содержанию. Все, что не относится напрямую к оригиналу, вынесено в примечания.
С предложениями, пожеланиями и замечаниями, как обычно, в ЛС.
Создаем контекстное меню для сайта на JavaScript
Контекстное меню на сайте используется достаточно не часто, но иногда пользователь все же прибегает к подобной функции использовав правую клавишу мыши. В данном уроке мы рассмотрим достаточно простое контекстное меню, которое будет стилизовано помощью градиента css и содержать в себе функции необходимые пользователю для облегчения работы с функциями на сайте. Кроме этого будет добавлен пункт «социальность» который будет содержать в себе подпункты с возможностью выбора любимой социальной сети.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
Такая навигация станет отличным дополнением для дизайнера который хочет визуально улучшить свой сайт при этом добавив новые, интересные возможности. И так, давайте приступим.
Шаг 1. HTML
У нас будет список, который будет содержать по очередности подключенные пункты class=»menu» будет содержать в себе всю навигацию, нам необходим для отображения блока с навигационными пунктами:
Freeartists статьи и рецензии о технологиях
Статьи
Рецензии на книги
Стандарты от W3C
О сайте
Создание меню при помощи CSS и JavaScript
В этой статье мы рассмотрим примеры создания наиболее распространенных типов меню для web-сайтов. Для этого мы будем использовать семантику HTML и возможности CSS и JavaScript (DHTML).
Простое горизонтальное меню
Описание
Это простое горизонтальное меню, с очень коротким и простым кодом.
Возможности
Простая, удобная и красивая навигация на сайте с небольшим количеством разделов.
Принцип работы
Берем маркированный список со ссылками, выстраиваем его в линию и делаем выделение той ссылки, на которую наводят курсор.
Код с комментариями
1. Для начала создадим маркированный список со ссылками внутри:
2. Теперь нам надо выстроить его в линию и заодно убрать маркер, для этого напишем следующие стили:
3. Поскольку мы не можем использовать блочные свойства стилей для inline элементов, сделаем из тега a блочный элемент, а чтобы они выстроились в одну строку, добавим свойство float:left :
4. Вот собственно и все, осталось навести красоту.
4.1 описываем стили для текста ссылок:
4.2 добавляем внутренние отступы и фон для ссылки:
4.3 описываем псевдокласс hover :
Кроссбраузерность
IE 5+; Opera 7+; FF 1+; Mozilla 1+.
Что надо иметь ввиду
Используя графический фон, можно добиться очень красивых эффектов.
Вертикальное выпадающее меню
Описание
Это вертикальное выпадающее меню, которое позволяет разместить большое количество ссылок на ограниченной площади. Идею этого меню я позаимствовал у господина Nick Rigby, доработав меню для своих целей.
Возможности
Простая, удобная и красивая навигация на сайте с большим количеством разделов.
Принцип работы
Код с комментариями
1. Создадим тело нашего меню:
2. При помощи стилей уберем подменю:
5. Вот собственно и все, осталось навести красоту:
Кроссбраузерность
IE 5+; Opera 7+; FF 1+; Mozilla 1+.
Что надо иметь в виду
У этого меню есть два очень серьезных недостатка: если список разделов или подразделов очень велик, то при открытии подменю появляется полоса прокрутки, а когда вы хотите прокрутить страницу, меню закрывается; если у пользователя старого браузера не работает это меню, то он вообще не сможет перемещаться по вашему сайту.
Вертикальное раскрывающееся меню
Описание
Это вертикальное раскрывающееся меню, которое позволяет разместить большое количество ссылок на ограниченной площади. Фактически это доработка предыдущего меню, которая позволяет убрать все его недостатки.
Возможности
Простая, удобная и красивая навигация на сайте с большим количеством разделов, которая будет работать во всех браузерах.
Принцип работы
Код с комментариями
1. Создадим тело нашего меню:
2. Напишем функцию на JavaScript, которая будет открывать и закрывать подменю.
3. Позаботимся о пользователях старых браузеров, и вместо того, чтобы писать в стилях #menu li ul
4. Поставим вызов этой функции на загрузку страницы.
5. Вот собственно и все, осталось навести красоту:
Кроссбраузерность
IE 5+; Opera 7+; FF 1+; Mozilla 1+.
В этой статье я привел примеры самых распространенных типов меню. И показал, какие неограниченные возможности дает web-разработчику использование CSS и JavaScript. Несмотря на то, что в сети все еще встречаются пользователи старых «неправильных» браузеров, их с каждым днем становится все меньше, так что давайте не будем ориентироваться на прошлое и посмотрим в глаза будущему.
62 комментария
Пока сайт не загрузится полностью, со всеми картинками, менюха открывается полностью, со всеми вложениями. Можно ли этого избежать?
Можно, напишите для соответствующих тегов LI правило display:none.
Спасибо за статью! А есть подобный вариант для горизонтального меню?
Большое спасибо за статью, отличная менюшка!
Подскажите пожалуйста, можно как-нибудь сделать чтобы при нажатии на ссылку
menu 1 открывалось не только подменю, но и одновременно заданная страница.
Первое меню — отстой. При увеличение пунктов меню само меню не должно менять размеры.
Спасиб, помог очень!
Спасибо! Хорошый сайт! 🙂
а как быть если я хочу сделать меню №2,3 но я хочу чтобы у слов menu 1… были свои стили, свой фон, а суб уже имел свои стили…??
А как быть если я хочу словам menu 1 придать свои стили, свои фоны.
словам меню 1 меню 2 … я про эти, а чтобы у вложенных были свои стили, такое возможно?
Все возможно, меняйте оформление через CSS.
А можноли сделать так чтобы все меню сразу не открывались(3 вариант меню), т.е. если отрыто первое меню и переключался пользователь на второе то первое закрывалосьбы
??
Очь клевая статья, спасибо, вроде б помогло. Но есть одно но. Я сделал второй вариант менюшки в html-таблицах и выходит так, что код открывает лишь первую менюшку, все остальные получились нерабочими. Код javascript повставлял на все странички даже, все-равно не работает ((
сайт hacking.net.ua, помогите плз.
Ян писал
Подскажите пожалуйста, можно как-нибудь сделать чтобы при нажатии на ссылку
menu 1 открывалось не только подменю, но и одновременно заданная страница.
ОЧЕНЬ АКТУАЛЬНЫЕ ВОПРОСЫ
если можете подскажите как это реализовать или где об этом можно почитать.
и еще один вопрос Как сделать чтобы меню сохраняло свое состояние при переходе на страницу, а то получается кликнул и все закрылось, а если у меня 3 уровня то приходится каждый раз раскрывать меню чтобы добраться до следующего пункта
Это не правильный подход, такое поведение меню надо программировать на стороне сервера, а не на JavaScript.
Спасибо, очень пригодились рекомендации
Супер, ща попробуем
Очень полезная статья! Большое спасибо автору! На основе его меню удалось выстроить неплохой (во всяком случае, я так думаю 😉 ) каталог продукции (пришлось, правда, дописать еще одну функцию на JS и в полной мере использовать PHP). Но авторские идея и изложение очень помогли!
Хорошая статья, а как расположить это горизонтально расположенное меню, по середине страницы?
Спасибо! Отличная статья! Очень помог мне код второго меню. Именно то что искал, за одним исключением: не могу никак сделать, чтобы функция схлопывающая все меню при загрузке страницы оставляла открытым активное подменю. Может кто подскажет как это реализовать? Спасибо!
Андрей, чтобы активное подменю оставалось открытым, необходимо писать соответстующий код на стороне сервера, например, на PHP. Посмотреть как это работает можно на моем сайте: http://www.e-pitanie.ru/. Если заинтересуешься, то могу выслать фрагмент кода.
А автору большое спасибо за статью.
Отличный скрипт. (Я про вертикальное раскрывающееся меню). Мне очень помог.
Но есть два вопроса.
Первое. Как сделать, чтобы подпункты ракрывались плавно, с эдакой анимацией?
Второе. Как сделать сохранение информации о закрытых и открытых пунктах в cookie, чтобы в случае перехода на другую страницу иди при презагрузке страницы открытые пункты оставалисть открытыми, а закрытые — закрытыми.
я пишу на пхп (к сожалению мало еще мало опыта)
подскажите что нужно вписать в код чтобы при переходе из меню на выбраную страничку на этой страничке меню оставалось открытым
если кто может помочь напишите плз
круто ребя! молодцы)
Сделала меню, все замечательно, но JavaScript в explorer не работает, что делать?
Отлаживать JS. Проверил примеры на сайте, все работает.
в примере интересный эффект происходит когда js отключаешь)
Объясните, пожалуйста, где всё это нужно прописывать и куда прикручивать JavaScript? Ничего не понимаю…:(( Я тоже хочу красивую менюшку!
Подскажите как делается что при переходе по ссылкам меню на другие страницы меню остается на месте то есть что при создании новой страницы нужно опять добавлять эти строки меню и стиль?
Не работает в EI6 помогите чайнику(((
добрый вечер…как дополнить код, что бы когда одно меню с подменю открыто, при открытие нового, старое закрывалось…спасибо.
Спасибо, очень помогло)
Спасибо, долго искал его
в дизайне сайте предполагает две таких вертикальных раскрывающихся менюшки, но когда я сделал вторую меню, то увидел что функция Close распростанилась только на первое меню, второе осталось полностью открытым. Как сделать чтоб все подобного вида менюшки были закрытыми при загрузке?
Спасибо за статью, хорошая.
Не подскажите, как присвоить к ссылкам меню изображение, плавающее, чтобы сделать меню красивее?
Макси:
попробуйте задать в CSS для li или ul параметр background: url(/image.jpg);
А вот у меня такой вопрос:
что если наш список имеет не один уровень вложения, а 3 и более? А при развороте категории у меня разворачивается полностью дерево всех ее вложений. Баг или код требует доработки?
Для неограниченной вложенности нужно переписывать код.
Простенько и без затей. Отлично. Кому нужны затеи — дописывайте..
Зачётная статья, если не хочется рад менюхи библиотеку функций тащить. Новичку само то!
Спасибо за териториал! Очень помогло. Если б еще показали горизонтальное меню) было б еще лучше!
Спасибо, но как в 3 вариант доработать.
Чтобы только одно подменю оставалось окрытым, а другие закрывались.
Скажите пожалуйста, как в третьем меню, вместо сделать если просто меняешь, не работает, нужно что то в js менять… Очень нужно, помогите пожалуйста
Нужно изменить document.getElementById(«menu») на конструкцию выбирающую класс. На данный момент статья устарела, подобный фокусы сейчас делают, используя jQuery.
Я не силен в js и не знаю какую конструкцию вставить 🙂 А на jQuery тем более, мне нужно что бы подменю открывалось не плавно, а сразу, перекопал полинтернета…
Пробовал document.getElementByClassName(“menu”) не работает, если не трудно подскажите что вставить… или вариант на jQuery похожий есть может быть, готов заплатить, моя почта galaydas@mail.ru
А у меня вертикальное раскрывающееся меню в редакторе работает, а в браузерах не работает :(((, почему бы это?
Огромное спасибо за статью.Я очень долго искала такое толковое объяснение.У меня все получилось.
СПАСИБО еще раз
Автору СПАСИБО. Безмерно благодарен, так и продолжай))) Очень доходчиво и максимально просто объяснил. Еще раз спасибо.
Я ни разу не писал JavaScript и тем более не знаю куда его вставлять. Просьба подробно рассказать куда что вставить. Делаю сайты на UCOZ/ Заранее спс
Здравствуйте! Очень интересно! Я новичок и делаю первый сайт на WordPress. Подскажите пожалуйста, как и Антону, куда вставляется код вертикального меню
Как сделать так чтобы меню разбивалось еще на понпункт т.е с такой конструкцией
вкладка|
|_подпункт 1
|_подпункт 2|
|_подпнкт подпункта 1
Меню при щелчке хорошие,но в виде такой конструкции я его не применю в WordPress. Меню там сгенерируется автоматически и я не смогу ссылке поставить onclick.
Какие еще способы есть, чтобы меню открывалось по ссылке?
Спасибо очень большое!
Все отлично, единственное что не поняла, что такое «.over» в той части кода, где мы прописываем псевдокласс для li:
#menu_body li:hover ul, #menu_body li.over ul <
display: block;
>
Объясните, пожалуйста, что такое li.over, что оно делает?
Этой статье 10 лет. Лучше поискать более свежий материал.
Что-бы на старых браузерах (30% пользователей во всём мире)нечего не работало и потенциальный клиент больше никогда не вернулся на твой супер новый сайт.