javascript — Выпадающее меню при наведении на вышестоящее меню
Вопрос задан
Изменён 2 года назад
Просмотрен 189 раз
Есть код
<div>
<div>
<ul>
<div>
<div>
<span>
<span>
<button data-toggle="dropdown" data-target="#menu" type="button">
<span></span>
<span></span>
<span></span>
</button>
</span>
<span><div>КАТАЛОГ ТОВАРОВ</div></span>
</span>
</div>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Прайс</a></li>
<li><a href="#">Услуги</a>
<ul>
<li><a href="#">Услуга 1</a></li>
<li><a href="#">Услуга 2</a></li>
<li><a href="#">Услуга 3</a>
<ul>
<li><a href="#">Услуга 1</a></li>
<li><a href="#">Услуга 2</a></li>
<li><a href="#">Услуга 3</a></li>
<li><a href="#">Услуга 4</a></li>
<li><a href="#">Услуга 5</a></li>
</ul>
</li>
<li><a href="#">Услуга 4</a></li>
<li><a href="#">Услуга 5</a></li>
</ul>
</li>
<li><a href="#">Контакты</a></li>
</div>
</ul>
</div>
</div>В результате подменю
отображается сразу при загрузке, а не при наведении на вышестоящий пункт меню — Услуги.
Как добиться отображение подменю при наведении на вышестоящий пункт меню?
- javascript
- html
- css
В первом приближении так, но у вас, судя по классам, все это дело должен делать скрипт из коробки! Бутстрап (CSS+JS) подключен? И кнопка-бутерброд обычно ВНЕ списка, вомзожно у вас ошибка в верстке.
.left-menu ul ul {display:none}
.left-menu ul li:hover > ul{display:block}<div>
<div>
<ul>
<div>
<div>
<span>
<span>
<button data-toggle="dropdown" data-target="#menu" type="button">
<span></span>
<span></span>
<span></span>
</button>
</span>
<span><div>КАТАЛОГ ТОВАРОВ</div></span>
</span>
</div>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Прайс</a></li>
<li><a href="#">Услуги</a>
<ul>
<li><a href="#">Услуга 1</a></li>
<li><a href="#">Услуга 2</a></li>
<li><a href="#">Услуга 3</a>
<ul>
<li><a href="#">Услуга 1</a></li>
<li><a href="#">Услуга 2</a></li>
<li><a href="#">Услуга 3</a></li>
<li><a href="#">Услуга 4</a></li>
<li><a href="#">Услуга 5</a></li>
</ul>
</li>
<li><a href="#">Услуга 4</a></li>
<li><a href="#">Услуга 5</a></li>
</ul>
</li>
<li><a href="#">Контакты</a></li>
</div>
</ul>
</div>
</div> Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Обзор 30 лучших бесплатных jQuery меню навигации
В настоящее время jQuery меню навигации это больше, чем просто блоки текста со ссылками в них.
В предыдущей статье я рассказал, как с помощью JQuery и CSS3 вы можете создать меню навигации, которое будет выглядеть очень круто.
С помощью возможностей JQuery мы можем превратить меню навигации в динамическое меню. Хотя сейчас для создания динамической навигации можно использовать только CSS3, JQuery делает меню еще более функциональным.
Помимо динамических функций, дизайн также играет немаловажную роль. Хотя бы потому, что это то, что посетители видят в первую очередь, когда заходят на ваш сайт.
Если меню будет непрезентабельным, это даст пользователям плохой опыт взаимодействия. Хороший дизайн меню в свою очередь увеличит качество вашего сайта, и даст лучший опыт взаимодействия пользователей.
Сегодня я представляю вам 30 отличных примеров JQuery меню навигации.
- Pushy
- Slinky
- jQuery Pop Menu
- Slidebars
- jQuery Square Menu
- Perspective Page View Navigation
- SlickNav
- Mmenu
- Sidr
- slimMenu
- HorizontalNav
- FlexNav
- jQuery Menu-Aim
- SmartMenus
- Shifter
- Hamburger
- Focucss
- Drawer
- Datmenu
- jPanelMenu
- Fly Side Menu
- PageScroll jQuery Menu Plugin
- DD Icon Menu
- JQuery Mobile Date Navigation
- Navobile
- Box Lid
- JQuery Mobile Slide Menu
- scrollNav
- DoubleTapToGo
- Заключение
Pushy адаптивное, не привязанное к холсту меню навигации, использующее преобразования и переходы CSS.
Оно отлично работает на мобильных устройствах. Обязательно посмотрите демо, и оно определенно вам понравится.
Демо | Скачать
Это еще одно отличное JQuery-меню для создания красивых прокручиваемых списков навигации. Его отличительной чертой является малый размер исходных файлов.
Демо | Скачать
Это простое адаптивное всплывающее меню с очень интересными функциями. При нажатии на иконку меню, всплывает окно меню с иконками элементов. Посмотрите демо.
Демо | Скачать
Slidebars — JQuery фреймворк для быстрой и простой реализации стилей приложения без привязки к холсту. Slidebars также обрабатывает изменения ориентации и изменение размеров.
Демо | Скачать
JQuery меню, которое выводит квадратное анимированное меню сайта с помощью JQuery и CSS3. Убедитесь в этом, посмотрев демо.
Демо | Скачать
Это jQuery меню навигации превращает страницу в 3D меню. Идея заключается в том, чтобы создать дизайн мобильного приложения, в котором при клике по иконке меню, содержимое страницы сдвигается в сторону, а меню выводится на передний план.
Демо | Скачать
Плагин для создания адаптивного мобильного jQuery меню с несколькими уровнями и гибкой, но простой настройкой. Совместим с разными браузерами, возможна навигация с помощью клавиатуры.
Демо | Скачать
jQuery меню для приложений с привязкой и без привязки к холсту с всплывающими подпунктами. Благодаря многочисленным опциях, адд-онам и расширениям, возможна очень гибкая настройка меню.
Демо | Скачать
jQuery плагин для создания меню и простого добавления адаптивных функций. С помощью Sidr вы сможете создавать различные элементы своего сайта, а также адаптивные меню.
Демо | Скачать
slimMenu — это небольшой jQuery плагин, который поможет вам в разработке адаптивных, многоуровневых меню навигации. Что самое классное в нем, так это то, что вы можете иметь несколько разных меню, и все они будут абсолютно адаптивны.
Демо | Скачать
jQuery меню навигации, позволяющее задать горизонтальное меню по всей ширине контейнера. С помощью этого плагина это делается очень просто.
Кроме того можно реализовать поддержку для IE7.
Демо | Скачать
Это mobile-first пример использования медиа запросов и JavaScript для создания отличного многоуровневого меню с поддержкой сенсорных экранов, эффектов наведения и навигации с помощью клавиатуры.
Демо | Скачать
jQuery меню, которое запускает события при наведении курсора мыши на выпадающий элемент меню. Идеально подходит для создания адаптивных выпадающих меню, как на Amazon.
Демо | Скачать
Плагин jQuery меню, который предлагает простой и интуитивный способ вывода меню. Создает адаптивные списки меню. Работает на всех устройствах!
Демо | Скачать
Shifter — простой в использовании mobile-first jQuery плагин для создания слайд-меню, выезжающих с правой стороны при нажатии на кнопку переключения. Для настройки существует только одна опция maxWidth. Она позволяет настроить разрешение/ориентацию для мобильных устройств.
Демо | Скачать
Hamburger — это jQuery плагин для создания слайд-меню в стиле Android App, в котором по правому краю экрана размещается всплывающее меню.
При раскрытии меню в полном размере, оно перекрывает область контента, но не панель действий.
Демо | Скачать
Focucss — jQuery меню навигации, с помощью которого создается не привязанное к холсту меню в сайдбаре с крутыми функциями размытости, с помощью которых вы можете обратить внимание пользователей на основные разделы сайта и сделать менее заметными не слишком полезные разделы.
Демо | Скачать
Drawer — jQuery плагин для создания адаптивного, анимированного меню, выезжающего при нажатии из боковой области экрана. Подобные функции вы могли видеть в Android-приложениях.
Демо | Скачать
Datmenu — премиум jQuery адаптивное меню с различными функциями CSS3 анимации. Что самое замечательное в этом плагине, так это возможность полной настройки с помощью js-опций.
Демо | Скачать
jPanelMenu — красивое и современное jQuery меню, позволяющее создавать панельное меню навигации с функциями переходов CSS3 анимации. Стиль jPanelMenu напоминает мобильные версии Facebook и Google.
Плагин может использоваться для разнообразных мобильных приложений.
Демо | Скачать
Fly Side Menu — крутой плагин меню навигации, который использует CSS3 для создания бокового меню с 3D преобразованиями и переходами.
Демо | Скачать
PageScroll — настраиваемое мобильное jQuery-меню, рекомендованное для использования на любых веб-сайтах, а также целевых страницах.
Демо | Скачать
DD Icon Menu — это jQuery плагин, который позволяет создавать вертикальное меню иконок, расположенное на краю экрана с разворачивающимися при наведении подпунктами меню.
Демо | Скачать
jQuery меню, позволяющее осуществлять навигацию по датам в выбранном диапазоне (неделя, месяц или год). Идеально для запросов информации с помощью вызовов AJAX.
Демо | Скачать
jQuery плагин меню навигации, позволяющий очень просто создавать мобильные меню. Использует CSS переходы для установки позиции меню на мобильных устройствах.
Демо | Скачать
26. Multi-Level Push Menu
Multi-Level Push Menu — это Javascript библиотека, созданная MARY LOU из Codrops.
Она создает многоуровневые меню, выезжающие с левой стороны экрана и сдвигающие контент вправо.
Демо | Скачать
Box Lid — простой jQuery плагин. позволяющий создавать боковое меню навигации с 3D-эффектами ‘Box Lid’, использующими переходы и преобразования CSS3.
Демо | Скачать
jQuery слайд-меню, внешне похожее на мобильные меню Facebook и Path.
Демо | Скачать
scrollNav — это jQuery плагин, который выводит существующий контент веб-страницы, разбивая его на логические разделы и создавая настраиваемый слайд сайдбар навигации.
Демо | Скачать
DoubleTapToGo — это jQuery плагин, который помогает создать удобное многоуровневое адаптивное выпадающее меню.
Демо | Скачать
Вот и все! Все эти jQueryплагины обеспечат крутой и приятный дизайн ваших меню. Вы можете использовать их в своих проектах, чтобы произвести впечатление на своих посетителей. Если вам известны другие отличные jQuery меню, напишите об этом в комментариях.
Вадим Дворниковавтор-переводчик статьи «The Listed Voyage: 30 Free jQuery Navigation Menus»
Popup — jQuery Mobile Demos
Виджет всплывающего окна можно использовать для различных типов всплывающих окон.
От небольшой всплывающей подсказки до большого лайтбокса с фотографиями.
Основы всплывающих окон
Чтобы создать всплывающее окно, добавьте атрибут data-role="popup" в div с содержимым всплывающего окна. Затем создайте ссылку с href , установленную на id всплывающего элемента div, и добавьте атрибут data-rel="popup" , чтобы указать платформе открыть всплывающее окно при нажатии на ссылку. Всплывающий элемент div должен быть вложен в ту же страницу, что и ссылка.
Базовое всплывающее окно
Всплывающая подсказка
Всплывающую подсказку можно создать, добавив образец темы в базовое всплывающее окно и добавив отступы с помощью класса ui-content . Здесь мы также покажем, как можно настроить стиль кнопки всплывающей подсказки.
Абзац с всплывающей подсказкой. Узнать больше
Вот крошечное всплывающее окно , используемое как всплывающая подсказка.
Текст будет переноситься на несколько строк по мере необходимости.
Фотолайтбокс
Лайтбокс для отображения изображений можно легко создать, поместив изображение во всплывающее окно. В этом примере кнопка закрытия добавляется в разметку путем добавления ссылки. 9Атрибут 0007 data-overlay-theme=»b» добавляет темный фон позади фотографий. Дополнительные методы работы с фотографиями см. в разделе Масштабирование изображений во всплывающих окнах.
Меню
Меню можно создать, добавив список во всплывающее окно.
Действия…
Вложенное меню
Вложенное меню можно создать, поместив список во всплывающее окно.
Выберите существо…
Форма
Вы можете поместить форму во всплывающее окно. Когда он откроется, фокус будет ограничен элементами внутри всплывающего окна.
Войти
Диалог
Стандартная разметка диалога может быть помещена во всплывающее окно.
Чтобы создать диалоговое окно в модальном стиле, добавьте к всплывающему окну атрибут data-dismissible="false" , чтобы предотвратить поведение «щелчок снаружи для закрытия», поэтому людям нужно взаимодействовать с кнопками всплывающего окна, чтобы закрыть его.
Удалить страницу…
Добавление заполнения
Для всплывающих окон с форматированным текстом требуется дополнение. Класс ui-content можно добавить во всплывающее окно, чтобы добавить стандартные отступы в 15 пикселей. Когда добавляется отступ, мы применяем несколько правил стиля, чтобы отменить верхнее поле для первого заголовка или абзаца во всплывающем окне и сделать то же самое для нижнего поля последнего элемента.
Всплывающее окно с отступом
Это всплывающее окно с классом ui-content , добавленным в контейнер всплывающего окна.
Закрытие всплывающих окон
По умолчанию всплывающие окна можно закрыть, щелкнув за пределами всплывающего виджета или нажав клавишу Esc .
Чтобы предотвратить это, во всплывающее окно можно добавить атрибут data-dismissible="false" . Чтобы добавить явную кнопку закрытия во всплывающее окно, добавьте ссылку с ролью кнопки в контейнер всплывающего окна с параметром data-rel="back" 9Атрибут 0008 и позиция через класс.
Правая кнопка закрытия Левая кнопка закрытия Undismissible Popup
Закрыть
У меня есть кнопка закрытия в верхнем правом углу с простой разметкой HTML.
Закрыть
У меня есть кнопка закрытия в верхнем левом углу с простой разметкой HTML.
Закрыть
Для атрибута data-dismissible установлено значение false . Меня нельзя закрыть, щелкнув за пределами меня.
Позиция
По умолчанию всплывающие окна открываются по центру по вертикали и горизонтали над элементом, по которому вы щелкнули (исходная точка), что хорошо для всплывающих окон, используемых в качестве всплывающих подсказок или меню.
Если всплывающее окно должно отображаться по центру окна, а не над источником, добавьте атрибут data-position-to к ссылке и укажите значение window . Также возможно указать любой допустимый селектор как значение position-to в дополнение к origin и window .
Position to windowPosition to originPosition to #position-header
Я нахожусь в окне.
Я нахожусь над исходной точкой.
Я расположен над заголовком этого раздела с помощью селектора. Если заголовок не прокручивается в поле зрения, обнаружение столкновений поместит всплывающее окно так, чтобы оно было в поле зрения.
Переходы
По умолчанию у всплывающих окон нет перехода, чтобы они открывались как можно быстрее. Чтобы установить переход, используемый для всплывающего окна, добавьте data-transition атрибут к ссылке, которая ссылается на всплывающее окно.
Обратный переход будет использоваться при закрытии всплывающего окна. Из соображений производительности на мобильных устройствах мы рекомендуем использовать более простые переходы, такие как всплывающее окно, затухание или отсутствие, для плавной и быстрой анимации всплывающих окон.
Нет переходаPopFadeFlipTurnFlowSlideSlidefadeSlide upSlide down
Я простое всплывающее окно.
Theme
Всплывающее окно имеет две опции, связанные с темой: data-theme и data-overlay-theme . Параметр data-theme относится к теме самого всплывающего окна, тогда как параметр data-overlay-theme управляет полупрозрачным слоем позади всплывающего окна. Тема наследуется от страницы; укажите data-theme="none" для всплывающего окна с прозрачным фоном.
Тема A
У меня установлено data-theme="a"
Тема "нет", без теней
Закрыть
Оверлейная тема A
У меня data-overlay-theme=" а" установлен на меня
Тема B + оверлей A
У меня есть data-theme="b" и data-overlay-theme="a" установлен на меня
Стрелка
Всплывающее окно может отображать стрелку вдоль одного из его краев при открытии, если установлен атрибут data-arrow .
Атрибут может принимать значение true , false или строку, содержащую разделенный запятыми список аббревиатур ребер («l» для левого, «t» для верхнего, «r» для правого и «b» для дна). Например, если вы установите data-arrow="r,b" , тогда стрелка будет появляться только вдоль нижнего или правого края всплывающего окна. true совпадает с "l,t,r,b" и false или "" указывает, что всплывающее окно должно отображаться без стрелки.
Щелкните розовую область ниже, чтобы отобразить всплывающее окно со стрелкой.
Предварительно обработанная разметка
Вы можете предоставить предварительно обработанную разметку всплывающего окна, чтобы сэкономить время запуска. Страница в приведенном ниже примере содержит всплывающее окно с предварительно обработанной разметкой, предоставленной как часть исходной разметки страницы.
Перейти к демонстрации
Как создать всплывающее меню с помощью jQuery Mobile?
rel = "таблица стилей" href = 900 0 8 |
jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" 