Выпадающее меню jquery при наведении: html — Выпадающее меню сворачивается при наведении на пункты jquery

Содержание

jquery выпадающее меню при наведении

На чтение 4 мин. Просмотров 50 Опубликовано

При наведении на определенные псевдо-ссылки, должны появляться меню под ними. И чтоб он исчезал, если курсор отошел более чем, допустим, 200px от появившегося меню и псевдо-ссылки.
Ну или хотя бы не при наведении, а нажатии. То есть уже если кликнул куда-то вне меню, то оно пропадает.

Как в VK, к примеру:

Мне просто нужно знать какие проверки в JS совершать.

Для того, чтобы самому написать навигацию в виде вертикального выпадающего меню на jQuery с выпадающим списком подкатегорий, необходимо понять сам принцип работы этого механизма. Но для начала разберем структуру навигации:

Как вы уже догадались, наше выпадающее меню построено на базе маркированных списков. При наведении курсора мыши на тег
Sub 1 … раскрываться будет все, что в него заключено, а именно:

Но как, спросите вы? Да все на самом деле очень просто. Для начала давайте разберемся с таблицей стилей нашего списка навигации, выглядеть она будет следующим образом:

Из таблицы стилей видно, что изначально выпадающий список не скрыт, но этот момент мы и будем исправлять при помощи jQuery:

Теперь подробно разберем jQuery код выпадающего меню, т.к. возможно кому-то он будет не совсем понятен. В самом начале прописана следующая конструкция:

В ней прописываются команды, которые необходимо выполнять после полной загрузки страницы. Сделано это для того, чтобы не появлялись разного рода ошибки, при невозможности найти какой-либо объект из-за того, что он банально ещё не загрузился.

Что означает эта запись? Конструкция «$()» позволяет произвести выборку элементов. Следовательно в самом начале нам необходимо скрыть наш выпадающий список. Мы берем конструкцию «$()» и пишем в ней интересующий нас объект. В нашем случае этим объектом будет маркированный список с классом «menu». Далее прописываем метод «hide()», позволяющий скрыть интересующий нас объект.

Далее идет следующая конструкция:

Что она делает? Она ищет тег родительскому элементу которого присвоен класс «menu» и, при помощи метода «css(‘background’, ‘url(«down.png»)’)”, происходит присваивание свойству стиля «background» значения «url(«down.png»)». «down.png» – это иконка, показывающая, что список может раскрываться.

Затем идет конструкция, которая и будет раскрывать наш список, выглядит она следующим образом:

Мы ищем тег родительскому элементу которого присвоен hover” и в скобках две функции. Первая функция будет выполняться при наведении курсора мыши, а вторая выполниться, если курсор мыши покинет интересующий нас элемент.

В первой функции прописано:

Конструкция «$(this)” означает, что нас интересует тот элемент, на который мы в данный момент навели (this от англ. этот). А навели мы на тег
Sub 1 …. . Далее у тега при помощи метода «children(«ul»)» мы ищем вложенный тег и методом «show()» отображаем его.

После этого у тега мы ищем потомков, а именно: тег и у него меняем фон на другую иконку.

После этого прописана функция, которая делает все, как было изначально, после того, как курсор мыши покинет элемент списка:

Чтобы написанный код на jQuery заработал и наше выпадающее меню работало корректно, необходимо скачать с сайта jquery.com библиотеку и подключить её, прописав после открывающего тега строку .

Ну вот и все! В заключении хочу отметить, что если ваш сайт довольно увесист, то возможно, скрипт будет запускаться слишком поздно (сайт будет долго грузиться) и пользователи будут видеть, как навигация сначала раскрывается полностью, а только потом скрывается, что, согласитесь, очень некрасиво. Следовательно, необходимо вынести все jQuery команды за эту конструкцию: «$(document).ready(function())». Выглядеть это будет следующим образом:

Подключение нашего скрипта необходимо перенести из тега в самый конец, перед закрывающим тегом

Очень часто в шаблонах можно встретить выпадающие навигационные элементы. Разработчики используют данный тип скрытых меню для вывода дополнительных скрытых ссылок, тематически связанных с основным пунктом. Можно найти примеры выскальзывающих панелей или различных меню в стиле аккордеона, которые реализуют такой принцип навигации.

Но в данном уроке мы построим простое выпадающее меню с использованием jQuery. Оно будет работать с помощью метода анимации для генерирования задержанных эффектов. Вместе с кодом JavaScript также применяются эффекты переходов CSS3. В результате получается заготовка для навигации сайта.

Сначала построим основной шаблон HTML5. Потребуется последняя версия jQuery, которую мы получаем из API Google. Также добавляем файл стилей

styles.css, который будет представлен ниже:

Теперь рассмотрим структуру, которая построена на основе неупорядоченного списка в верху страницы. Весь список помещается в элемент HTML5 © 2019 Евгений Попов. Все права защищены. Служба поддержки
Сайт мониторится с помощью сервиса ping-admin 🙂

dropdown » Скрипты для сайтов

7 171 Скрипты / Menu & Nav

Mega dropdown меню

Mega dropdown меню - jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.

13 176 Скрипты / Accordion

Вертикальное accordion меню

Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.  

4 840 Скрипты / Accordion

Flat accordion menu - вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

15 099 Скрипты / Menu & Nav

Адаптивное много-уровневое меню

Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам - font-awesome.css

6 841 Скрипты / Menu & Nav

Адаптивное многоуровневое меню

Экспериментальное меню позволяющее с экономить пространство на вашем сайте, где требуется использование много уровневого меню. "Детки" заменяют собой "родителей" не загромождая страницу. Меню можно устанавливать на страницы с адаптивным дизайном.

5 227 Скрипты / Menu & Nav

Выпадающее меню на CSS3

Горизонтальное меню с выпадющими подпунктами с использованием css3.

5 849 Скрипты / Menu & Nav

Дерево меню на jQuery

Древовидное меню на jQuery, как и положено с возможностью раскрытия и скрытия пунктов и подпунктов.

4 114 Скрипты / Menu & Nav

Горизонтальное меню с выпадающими подпунктами

Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.

2 070 Скрипты / Menu & Nav

Меню с эффектом подпрыгивания

Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.

4 879 Скрипты / Menu & Nav

Выпадающее адаптивное меню

Адаптивное выпадающее CSS3 меню, которое при уменьшении окна браузера превращается в меню вида аккордеон. Проверено в Chrome, Opera, FireFox, IE9, iPad, iPhone. В IE7 и IE8 работает только выпадающее подменю, адаптивность теряется.

3 044 Скрипты / Menu & Nav

Многоуровневое выпадающее меню

Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.

2 780 Скрипты / Menu & Nav

Выпадающее CSS3 меню

Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.

Выпадающее меню на Bootstrap 4 при наведении (событие hover)

Как известно, стандартный dropdown список раскрывается только при нажатии на главный пункт меню. По умолчанию выпадающий список имеет свойство «display: none;», и переходит в «display: block;», когда срабатывает событие click и на оборот - чтобы скрыть, нужно опять нажать на меню.

На примере меню из документации Bootstrap 4:



<nav>

  <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

    <span></span>
  </button>

  <div>
    <ul>

      <li>
        <a href="#">Главная</a>
      </li>

      <li>
        <a href="#">Один</a>
      </li>

      <li>
        <a href="#">Два</a>
      </li>

      <li>
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Три</a>
        <div aria-labelledby="navbarDropdownMenuLink">
          <a href="#">Три один</a>
          <a href="#">Три два</a>
          <a href="#">Три три</a>
        </div>
      </li>

    </ul>
  </div>

</nav>

В данном варианте, если вы просто поместите это меню на сайте, подключите все необходимые библиотеки, меню будет работать по клику.

Чтобы меню раскрывалось и скрывалось при наведении (событие hover), достаточно чуть подправить css файл bootstrap 4 или прописать это в своем файле стилей:



nav.navbar .dropdown:hover > .dropdown-menu {
 display: block; 

Теперь при наведении, нашему списку будет присваиваться свойство «block» и он раскроется. Вот так легко это делается, не правда ли?

Чтобы это работало только на ПК версиях экранов, и не работало на мобильных устройствах, так как там просто отсутствует нормальная работа события hover. Я рекомендую прописать ниже еще вот такой код:



@media only screen and (max-device-width: 992px){
    nav.navbar .dropdown:hover .dropdown-menu{
        display: none;
    }
}

Учтите, что этим вы не отменяете событие click – раскрытие меню по клику. Оно будет так же работать наравне и с наведением.

Как отключить событие click и оставить только событие hover, вы можете прочитать в этой статье:

Переход по ссылке главного (верхнего) меню раскрывающегося списка в Bootstrap 4

 

Всем удачи!

 

Возможно вам так же будет интересно:

Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство веб-девелоперов используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS.

Вот простой пример HTML-кода меню:

<ul>
    <li><a href=#>Menu 1</a>
        <ul>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
        </ul>
    </li>
</ul>

Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.

Теперь давайте как-нибудь минимально оформим наше меню стилями:


body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}

Для класса submenu было установлено свойство 'display: none'. Это позволило на спрятать наше выпадающее меню.

Теперь добавим в CSS такой код:


ul.menu > li:hover > ul.submenu {
    display: block;
}

Это позволит показывать подменю при наведении.

Вот и все. Просто и легко без JavaScript.

Примеры CSS меню c анимацией с ресурса Codepen

Возможно, вы слышали о ресурсе Codepen, на котором можно создавать файлы примеров для использования их в проектах.  В данной статье мы рассмотрим примеры различных меню, авторы которых разместили свой код на codepen.io.

Простые меню вы можете разобрать с помощью статьи "Виды горизонтальных меню для сайта". Здесь же будут рассмотрены примеры различных меню, появляющихся по клику на кнопке. В этих меню, помимо css-форматирования, используется код на JavaScript/jQuery.

Flexbox-меню с перекрытием экрана

Верстка меню основана на модели Flexbox. При появлении элементов меню происходит перекрытие экрана.  Используются трансформации и анимация с помощью свойства transition. Также используется код на jQuery.

See the Pen Fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.18892

Меню со слайд-эффектом

При клике на элементах этого меню используется плавный переход подчеркивания для активной ссылки. Здесь есть не только css-форматирование, но и код на jQuery.

В примере используются html-, css- и  js-препроцессоры. Если код вам непонятен, нажмите на стрелку в правом верхнем углу соответствующей вкладки и выберите пункт "View compiled HTML" и т.п. при редактировании этого примера на Codepen.

See the Pen A clean navigation slider by Roemerdt (@Roemerdt) on CodePen.18892

Цветное навигационное меню на основе CSS и jQuery

В этом css-меню используется эффект изменения цвета активной точки при наведении на один из пунктов. Как и в предыдущих  меню, без jQuery здесь не обошлось.

See the Pen Colourful navigation by Lewi Hussey (@Lewitje) on CodePen.18892

Еще один вариант:

See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.18892

Скошенное меню

В этом меню внешний вид обеспечивается с помощью CSS3-свойства transform: skew(). Очень интересный вид, полученный путем трансформации списка ссылок.

See the Pen Skewed Menu by Claudio Holanda (@kazzkiq) on CodePen.18892

CSS меню с эффектами при прокручивании и наведении

В этом меню использованы эффекты при прокручивании (скроллинге), связанные с 3d-трансформациями и увеличении масштаба при наведении. Также не обошлось без JavaScript.

Интересное меню с различными цветами и иконками для пунктов меню. Оно предполагает разворачивание на весь экран.

See the Pen Menu with scroll & hover effects by Ivan Bogachev (@sfi0zy) on CodePen.18892

Меню для мобильной версии сайта или приложения

Это меню "заточено" под мобильную версию сайта или мобильное приложение. Используется не только css-форматирование, но и JavaScript-код.

See the Pen App Navigation by Ian Turner (@iamturner) on CodePen.18892

Боковое выезжающее меню с эффектом размытости стекла

Разметка с использованием CSS и нативного JS-кода

See the Pen Frosted Glass Menu | [best in chrome] by Dev Loop (@dev_loop) on CodePen.18892

Анимационное меню с SVG (UI Navigation Concept)

Меню, предназначенное опять-таки либо для мобильной версии сайта, либо для мобильного приложения. В нем используются анимации SVG и CSS3 без подключения сторонних библиотек + код на JavaScript.

See the Pen SVG UI Navigation Concept by Alex Permyakov (@alexdevp) on CodePen.18892

Желеобразное меню для мобильных устройств

Очень интересное меню с приятной анимацией при скроллинге и прикосновении на мобильных устройствах. Требует подключения множества библиотек.

See the Pen Touch device jelly menu concept by LegoMushroom (@sol0mka) on CodePen.18892

Иконочное меню для мобильных

See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.18892

Меню с иконками для мобильных

See the Pen Fancy tab bar active animation by Aymen Mohammed (@aymen-mohammed) on CodePen.18892

CSS меню с кнопкой по центру header

See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.18892

Социальное меню с выезжающими иконками

See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.18892

Верхнее выезжающее css-меню c иконкой-гамбургером

Приятное боковое выезжающее меню с CSS-анимацией появления самого меню и изменения иконки-гамбургера. Подойдет как для основной версии сайта, так и для мобильной версии. Помимо CSS, используется минимальный код на JS.

See the Pen Toggle menu by Tristan White (@triss90) on CodePen.18892

Еще один вариант с небольшими 3D-трансформациями.

See the Pen 3D Rotating Navigation by Elen (@ambassador) on CodePen.18892

Боковая панель с меню

Меню расположено на боковой выезжающей панели справа. При появлении меню основной контент сдвигается влево. Использован код на JS.

See the Pen CSS3 side panel with menu by Darren Huskie (@Huskie) on CodePen.0

Еще один пример для панели администратора

See the Pen Sidebar template by Mohamed Azouaoui (@azouaoui-med) on CodePen.18892

Интересное боковое меню для лэндинга или одноэкранной презентации

See the Pen One Page Navigation CSS Menu by Alberto Hartzet (@hrtzt) on CodePen.18892

Неоновая анимация при наведении на горизонтальное и вертикальное меню

See the Pen Menu Or Nav Hover Styles by Dev Loop (@dev_loop) on CodePen.18892

Выезжающее сбоку меню

В коде используется не только css, но и JS-код

See the Pen Sliding Menu by Dev Loop (@dev_loop) on CodePen.18892

Второй вариант выезжающего сбоку меню основан только на CSS:

See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan (@erikterwan) on CodePen.18892

Боковое css-меню с анимацией

See the Pen Pure CSS3 Mega Dropdown Menu With Animation (Vertical) by Rizky Kurniawan Ritonga (@rizkykurniawanritonga) on CodePen.18892

Выезжающее сверху CSS меню

При нажатии на кнопку-гамбургер сверху с анимацией появляется меню. Контент смещается вниз с отступами слева и справа. Помимо css-transition использован несложный код на jQuery.

See the Pen Off canvas menu by Mark Murray (@markmurray) on CodePen.0

Навигационное меню в стиле Material Design

Приятное меню, которое появляется со слайд-эффектом с помощью  css-transition и небольшого jQuery-кода.

See the Pen Material design navigation by Lewi Hussey (@Lewitje) on CodePen.0

Еще один вариант в стиле Material Design с круглыми кнопками

See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.18892

Вторая версия меню с круглыми кнопками.

See the Pen Floatting Draggable Menu (Messenger like) by Andy Pagès (@andyNroses) on CodePen.18892

Раскрывающееся вниз (Dropdown) меню

В примере использованы CSS и JS-код.

See the Pen CSS3/Javascript Pure Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.18892

Еще один вариант dropdown-меню

See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen.18892

Вариант с интересной анимацией при наведении

See the Pen Solution for Long Drop Down Items by Larry Geams Parangan (@larrygeams) on CodePen.18892

Трансформация скоса в выпадающем меню при наведении курсора мыши

See the Pen CSS Swinging Panel Menu by Seth Abbott (@sethabbott) on CodePen.18892

Выпадающее (Dropdown) меню на CSS

See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.18892

Выпадающее по клику меню в стиле Bootstrap

See the Pen OnClick Dropdown by Sazzad (@sazzad) on CodePen.18892

Выезжающее меню слева в стиле Bootstrap 3

See the Pen Awesome Bootstrap 3 Sidebar Navigation by Jay Holtslander (@j_holtslander) on CodePen.dark

Выезжающее меню с CSS-анимацией

Только CSS, без JS-кода

See the Pen CSS Drop-Down Menu Transitions by Shaw (@shshaw) on CodePen.18892

Выезжающее сверху меню с анимацией

Есть переключатель для темной/светлой темы и анимация в виде круга, перемещающегося за курсором мыши. CSS+JS-код.

See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.18892

Отзывчивое мега-меню с использованием jQuery

See the Pen Responsive and Mega menu by Arjun Amgain (@arjunamgain) on CodePen.18892

CSS-меню с несколькими уровнями вложенности

See the Pen Multi level css only push menu by Shven (@Shven) on CodePen.18892

Отзывчивое меню с несколькими уровнями вложенности

Использует не только CSS, но и jQuery.

See the Pen CSS3 Responsive Menu Dropdown + Submenu width Logo by emre (@emredenx) on CodePen.18892

CSS-меню с вкладками

Стоит, наверное, отключить видимость radio-переключателей в конечной версии меню.

See the Pen No JS: Tabs that scale down to menu by Jake Albaugh (@jakealbaugh) on CodePen.18892

Варианты анимации иконки-гамбургера

See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen.18892

SVG-Анимация при наведении на иконку гамбургера в боковой панели

See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.18892

Еще варианты анимации иконки-гамбургера.

See the Pen CSS Menu Icon Animation: Know Your Menu by Olivia Ng (@oliviale) on CodePen.18892

Различные варианты оформления меню вы можете найти также на freefrontend.com, onaircode.com и navnav.co.

 

Просмотров: 7 114

35 меню CSS и HTML для мобильных устройств, блогов, электронной коммерции и др.

В этой серии статей с lИзбранные представления кода CSS, HTML и JavaScript, мы обычно используем текстовые эффекты, стрелки, Заголовки или ползунки, с помощью которых можно подчеркнуть дизайн нашего веб-сайта, сделав его более элегантным или способным повысить ценность контента, который мы представляем посетителю.

На этот раз пришло время меню в HTML и CSS, с помощью которых можно анимировать адекватно те важные элементы, которые позволяют нам направлять пользователя к наиболее важным частям нашей электронной коммерции, блога и многого другого. Мы идем вместе с ними, чтобы придать нашему сайту качественный штрих и максимально соответствовать стандартам дизайна пользовательского интерфейса.

Un слайд-меню или боковое меню гамбургера состоит из изящных анимаций с минималистичным оттенком для большого эффекта.

Теме статьи:

9 CSS-меню боковой панели, которые нельзя пропустить

Выпадающий список Swanky на чистом CSS

Роскошный Lil Drop Down Manu V2.0 es меню ну полный чистый CSS что имеет дополнительную ценность в том, что в пользовательском интерфейсе нет кода JavaScript. Просто отличное сочетание, чтобы открыть для себя большую элегантность.

это аккордеонное меню es очень просто если мы сравним его с двумя предыдущими с HTML, JS и CSS.

Теме статьи:

16 каскадных меню на CSS для обновления вашего сайта

Un вертикальное меню с jQuery и CSS3 de отличный штрих для приложения или веб-сайт. Всевозможные переходы и градиенты с минималистичными тенями.

Un круговое меню de экспериментальная навигация который идеально подходит для технического сайта. Произведено в SVG и GreenSock Animation Platform, без сомнения, разные.

Другой круговое меню и экспериментальный что идеально подходит для страницы, предназначенной для игры.

Un круговое меню CSS HTML разместить его сбоку и что открывается по кругу с отличным пользовательским интерфейсом.

В этом кольцо меню лос связи позиционируются в верхней части каждой для создания разных колец.

Другой конкретный всплывающее меню с очень хорошо примененной анимацией, дающей отличный эффект.

Рекурсивная навигация при наведении

Рекурсивная навигация при наведении является выпадающее меню высокого качества для тех анимаций, которые идеально отражают структуру содержимого сети.

Раскрывающаяся навигация

Un меню выпадающая навигация аналогичен предыдущему, но с другими оттенками в дизайне интерфейса.

Другой выпадающее меню качества в CSS который соответствует текущим стандартам дизайна пользовательского интерфейса.

полный экран, это отзывчивое и простое меню в HTML5 и CSS3 он совместим с Internet Explorer 11.

Un полноэкранное меню в SVG кладут сбоку в гамбургер, и это очень привлекает внимание.

Un Мега меню в CSS и HTML отличается от того, что видно, в современном и минималистском стиле.

Другая концепция меню идеальный вариант, если вы ищете другое и оригинальное менюОн просто великолепен благодаря настраиваемому меню на значке и тщательно проработанной анимации.

Меню дизайна материалов есть на основе языка дизайна Google. 

Un гамбургер-меню оптимизирован для мобильных устройств и что это сделано в HTML, CSS и JavaScript.

Полноэкранный Flexbox Velocity.js

Полноэкранный Flexbox Velocity.js это меню огромное качество достигнутого эффекта и за его почти уникальный пользовательский опыт. Полноэкранный флексбокс с velocity.js.

Полная страница вне холста

Полная страница вне холста это высококачественное полноэкранное меню, которое идеально подходит для отображения Как создать вебсайт с этими значениями.

Un всплывающее меню простой эффект линии и очень красиво.

Еще одна концепция меню с clip-path состоящий из очень любопытного наведения и нескольких анимированных категорий.

Зачеркнутый наведение

Зачеркнутый наведение это другое меню наведите указатель мыши на любопытные ссылки Результат.

Меню CSS Lavalamp содержит один анимация наведения для каждой ссылки это поддается динамизму.

Слайдер навигации

Un ползунок навигации который прокручивает каждую ссылку отличаться красным оттенком и хорошо ухоженной анимацией, дающей отличные результаты.

Un навигация по меню бургеров большой эффект, нацеленный на мобильные устройства.

 

Un меню предназначено для iPhone X которые могут придать вашему веб-сайту нотку качества, чтобы он соответствовал дизайну телефона Apple.

Развернуть подменю для мобильных

Развернуть подменю для мобильных предназначен для нижний колонтитул с изящной анимацией и очень подходящий объем двигателя. Элегантность на всех уровнях для мобильного интерфейса вашего приложения или веб-сайта.

Анимированная мобильная навигация

Другой анимированное меню для мобильного с круговым анимированным фоном с отличными визуальными результатами.

Другой отличный эффект для другого меню и причудливый. Восток меню с эффектами прокрутки и наведения он идеально подходит для ресторанов, обзоров и т. д.

Un фильтр меню мобильный преобразован в веб-версию и предназначен для мобильных устройств.

Off-canvas навигация

Off-canvas навигация Это меню, которое экспериментируйте с переходами и навигацией быть очень актуальным. Если вы ищете что-то новое, чтобы удивить, его уровень - лучший в этом списке.

Un боковое меню в CSS что скрыто и так появляется со значком гамбургера.

Фиксированная боковая панель навигации

использование bootstrap вместо flexbox для поддержки IE9 / 10. Еще одно отличное меню для своих Фиксированная боковая панель навигации в своей концепции.

Вкладка "Морфинг"

Вкладка "Морфинг" это меню раскрывающийся список, который появляется при нажатии на главной кнопке вкладки.


CSS: Выпадающее меню с задержкой

Обычное выпадающие css-меню сделанное с помощью переключения display:none;/display:block; повешенного на hover обладает двумя раздражающими недостатками:

— подменю показывается мгновенно, как только курсор мыши попал в область родительского пункта
— подменю мгновенно пропадает, как только курсор вышел за пределы подменю

Пример такого меню:

<ul>
    <li>
        <a href="#">item</a>
        <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
        </ul>
   </li>
</ul>

<style>
.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu .menu-item {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    background: #E1E1E1;
}
.menu .menu-item a {
    display: block;
    padding: 5px 10px;
}
.menu .submenu {
    display: none; /* По умолчанию скрываем подменю */
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #E1E1E1;
}
.menu .menu-item:hover .submenu {
    display: block; /* Показываем подменю при ховере */
}
.menu .submenu-item {
    margin: 0;
    padding: 5px 10px;
}
</style>

Демо

Чтобы создать небольшую задержку перед показом и скрытием подменю раньше приходилось использовать javascript, но теперь наткнулся на css вариант.

Весь фокус в свойстве transition, а точнее его подсвойстве transition-delay, которое позволяет добавить задержку перед показом анимации:

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition-property: opacity, visibility; /* Важно чтобы transition применялось к обоим свойствам */
    transition-duration: 0.2s; /* Добавляем анимацию 0.3 сек. */
    transition-delay: 0.15s; /* Добавляем задержку в 0.15 сек. */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

Демо

Поскольку анимацию нельзя вешать на display, то для скрытия подменю приходится использовать связку opacity:0; visibility:hidden;.

Показать скрыть раскрывающееся меню при наведении курсора мыши с помощью CSS

Тема: HTML / CSSPrev | След.

Ответ: Используйте CSS

: hover псевдокласс

Если вы просто хотите показывать и скрывать раскрывающееся меню при наведении курсора мыши, вам не нужен JavaScript. Вы можете сделать это, просто используя свойство CSS display и псевдокласс : hover .

В следующем примере показано, как реализовать простое раскрывающееся меню с помощью CSS.

  



 Показать скрыть раскрывающийся список с помощью CSS 
<стиль>
    ul {
        отступ: 0;
        стиль списка: нет;
        фон: # f2f2f2;
    }
    ul li {
        дисплей: встроенный блок;
        положение: относительное;
        высота строки: 21px;
        выравнивание текста: слева;
    }
    ul li a {
        дисплей: блок;
        отступ: 8px 25px;
        цвет: # 333;
        текстовое оформление: нет;
    }
    ul li a: hover {
        цвет: #fff;
        фон: # 939393;
    }
    ul li ul.падать {
        минимальная ширина: 100%; / * Устанавливаем ширину раскрывающегося списка * /
        фон: # f2f2f2;
        дисплей: нет;
        позиция: абсолютная;
        z-индекс: 999;
        слева: 0;
    }
    ul li: hover ul.dropdown {
        дисплей: блок; / * Показать раскрывающийся список * /
    }
    ul li ul.dropdown li {
        дисплей: блок;
    }



    

  

Связанные часто задаваемые вопросы

Вот еще несколько часто задаваемых вопросов по этой теме:

Выпадающее меню Bootstrap при наведении курсора: 5 демонстраций

Выпадающее меню и состояние наведения

В учебном пособии по раскрывающемуся меню Bootstrap я показал семь демонстраций меню, которые появляются при нажатии раскрывающегося списка (кнопки или ссылка).Это поведение по умолчанию для раскрывающегося компонента, поставляемого с платформой Bootstrap. Если вы хотите открывать раскрывающееся меню при наведении курсора мыши на кнопку или ссылку, вы можете использовать подключаемый модуль.

В этом уроке я собираюсь показать вам такой плагин, который будет открывать раскрывающееся меню, когда вы наводите указатель мыши на кнопку, группу кнопок или разделенную кнопку.

Простая демонстрация раскрывающегося списка Bootstrap при наведении курсора

Для включения меню, открытого в состоянии наведения, вам необходимо включить JS-файл подключаемого модуля наведения помимо библиотек Bootstrap и jQuery.Вы можете загрузить этот JS-файл, перейдя на страницу плагина и загрузив пакет, или просто перейдите на любую демонстрационную страницу ниже, просмотрите исходный код демонстрационной страницы и найдите файл bootstrap-hover-dropdown.js . Сохраните его в своей системе.

См. Следующую онлайн-демонстрацию, в которой меню создается из нескольких элементов. Наведите указатель мыши на Товары, и откроется раскрывающийся список:

Посмотреть онлайн-демонстрацию и код

Итак, после включения библиотек и файла подключаемого модуля, единственное различие между простым меню, которое открывается при нажатии, и этим - data-hover = "dropdown" атрибут данных:


На этот раз, вместо того, чтобы использовать простую кнопку, как в примере выше, я создал верхнюю панель навигации с несколькими пунктами главного и внутреннего меню.Среди них, когда вы наводите курсор мыши на элемент «Bootstrap», он открывает раскрывающийся список при наведении курсора. Цель состоит в том, чтобы показать раскрывающееся меню при наведении курсора на «фактическую» панель навигации:

Посмотреть онлайн-демонстрацию и код

Как видите, Bootstrap показывает раскрывающееся меню при наведении курсора, а «About» - нет. Это связано с тем, что data-hover = "dropdown" используется только в разметке "Bootstrap":

1

2

3

4

5

6

7

8

9

10

11

12

13

140002

  • Bootstrap


  • Демонстрация использования раскрывающегося списка при наведении курсора со стандартными кнопками Bootstrap

    В этой демонстрации раскрывающиеся списки кнопок созданы с использованием стандартных классов Bootstrap. Кроме того, к каждой кнопке добавляется атрибут данных data-hover = «dropdown» , поэтому он открывается при наведении курсора мыши.См. Демонстрацию и код в Интернете:

    Посмотреть онлайн-демонстрацию и код

    Демонстрация с группой кнопок

    Вы также можете использовать этот плагин с группами кнопок. Процесс остается прежним, просто добавьте data-hover = "dropdown" к кнопке раскрывающегося списка в группе кнопок. См. Следующую демонстрацию:

    Посмотреть онлайн-демонстрацию и код

    Для создания раскрывающегося списка группы кнопок используется следующая разметка:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    140002

    14

    18

    19

    20

    21


    Демонстрация использования вкладок Bootstrap

    И, конечно же, вы можете использовать это состояние наведения на вкладках Bootstrap, которые содержат кнопки раскрывающегося списка.Опять же, просто добавьте атрибут data-hover = "dropdown" в тег кнопки, где вы собираетесь открывать меню при наведении курсора. Смотрите эту демонстрацию:

    Посмотреть онлайн-демонстрацию и код

    Кнопка разделения создается на вкладках, где разделенной части присваивается атрибут data-hover = "dropdown" . Когда вы наводите указатель мыши на разделенную часть кнопки, меню открывается при наведении курсора. Если вы хотите открыть обе кнопки, просто добавьте этот атрибут и на другую кнопку.

    Многоуровневое раскрывающееся меню при наведении курсора с помощью CSS и jQuery - CodeHim

    Главная / Меню и навигация / Многоуровневое раскрывающееся меню при наведении курсора с помощью CSS и jQuery

    Создавайте многоуровневое раскрывающееся меню при наведении курсора с помощью CSS и jQuery, чтобы упростить навигацию по содержимому сайта.

    Обзор плагина

    Плагин: Многоуровневое раскрывающееся меню
    Автор: saeedfouda
    Лицензия: Лицензия MIT
    Опубликовано: 19 апреля 2019
    Репозиторий: Вилка на GitHub
    Зависимости: jQuery 1.3.1 или последняя версия
    Тип файла: zip-архив (HTML, CSS и JavaScript)
    Размер упаковки: 3 КБ

    Как создать многоуровневое раскрывающееся меню

    при наведении курсора :

    1. Загрузите jQuery и включите все необходимые ресурсы на свою HTML-страницу для создания многоуровневого раскрывающегося меню.

    
    
    
    
    
    
    
    
     

    2. Создайте структуру HTML для меню, как показано ниже, и добавьте в него свои ссылки.

    
     

    550+ Лучшее меню jQuery и раскрывающееся меню jQuery с примером

    HC Off-canvas nav - это плагин jQuery для создания переключаемой многоуровневой навигации вне холста, позволяющий бесконечное вложение элементов подменю.

    Учебное пособие по созданию эффекта наведения для меню, в котором изображения появляются с анимацией для каждого элемента.

    Быстрый взгляд на то, как работает меню с бесконечной прокруткой, основанное на иллюзии зацикленной прокрутки клонированных элементов.

    SlideMenu.js - это простое меню вне холста с поддержкой сенсорного ввода.

    Pagemap - это своего рода навигационная система, которая использует мини-карту для одностраничного веб-сайта или любой другой длинной веб-страницы с javascript и холстом html5.

    Круговое меню - это круговое меню с широкими возможностями настройки, которое очень легко настроить.Это настраиваемое красивое круговое меню для вашего веб-приложения, которое можно использовать как отдельное меню или переопределить контекстное меню по умолчанию. На рабочем столе или ноутбуке нажмите вторую кнопку мыши (контекстное меню). На смартфоне или планшете нажмите на экран и удерживайте несколько секунд, и появится меню.

    Простой, легкий и легкий в использовании плагин jQuery, который показывает / скрывает заголовок страницы, когда пользователи прокручивают страницу вниз больше, чем ее высота. Однако заголовок продолжает следить за страницей, поэтому, когда пользователи прокручивают страницу вверх, он отображается.

    Zeynepjs - это легкий многоуровневый плагин бокового меню jQuery.

    Перетаскиваемое встроенное меню с разбросанным предварительным просмотром эскизов сетки изображений. После нашего небольшого эксперимента с перетаскиваемой полосой изображений мы хотели изучить возможность использования функции перетаскивания в меню. Идея состоит в том, чтобы показать большое встроенное меню с разбросанными миниатюрами. Меню можно перетаскивать, и при этом эскизы перемещаются с анимацией. Каждый пункт меню также меняет буквы, чтобы отобразить обведенную версию.При нажатии на ссылку «исследовать» под элементом меню миниатюры перемещаются и увеличиваются, образуя сетку.

    PrMenu - это очень легкий, отзывчивый плагин меню для jQuery. Предоставляет меню со ссылками, равномерно распределенными по ширине контейнера меню.

    Функции:

    • Ссылки равномерно распределены в контейнере меню
    • Максимум четыре уровня меню (три вложенных)
    • Автоматический перенос длинного текста ссылки (максимум две строки)
    • Цвет фона автоматической ссылки для всех уровней на основе на исходном цвете фона
    • Все настройки можно изменить, передав свои собственные параметры

    Лучшие 4 jQuery Dropdown Plugins (бесплатные и платные)

    Хотите создать элегантное выпадающее меню, как на сайтах электронной коммерции?

    Если да?

    Тогда у вас должны быть полнофункциональные плагины jQuery Dropdown для вашего веб-сайта.

    Но прежде чем приступить к работе, позвольте мне объяснить вам, как эти плагины могут оправдать ваши ожидания.



    Выпадающие меню специально разработаны для навигации по веб-сайтам. Это списки горизонтальных опций, каждая из которых имеет вертикальное меню.

    Каждый раз, когда пользователь наводит курсор или щелкает мышью на опции, вертикальное меню «раскрывается».

    Выпадающие меню необходимы для идеального размещения большого набора параметров в меню вашего веб-сайта.

    Обычно они создаются с использованием HTML, CSS и JavaScript. Итак, чтобы помочь вам, мы делимся списком из 4 лучших плагинов jQuery Dropdown. Они позволят вам создать гибкое и анимированное выпадающее меню.

    Некоторые из этих плагинов могут создавать неограниченное количество уровней подменю. Кроме того, вы можете использовать их для создания строк меню различных стилей, таких как липкое, выпадающее, вертикальное и т. Д. Для вашего веб-сайта.

    Давай проверим!


    Swift через дополнительные плагины jquery:


    1.Плагин выпадающего меню jQuery CSS3 - Плагины выпадающего меню jQuery

    Это легкий плагин jQuery для создания переключаемых раскрывающихся меню. Вы можете преобразовать неупорядоченный список своего веб-сайта в систематическое раскрывающееся меню.

    С помощью этого плагина вы можете без суеты создавать бесконечное количество подменю. По умолчанию фактическое раскрывающееся меню скрыто и будет отображаться всякий раз, когда пользователь наводит на него курсор. Это означает, что вы можете создать раскрывающееся меню с помощью этого плагина.

    Вы можете создавать неограниченное количество стилей для выпадающих кнопок с помощью цветов фона и отступов. Плагин поддерживает анимацию CSS3, управляемую animate.css. Таким образом, вы можете изменять столько свойств CSS, сколько захотите, сколько угодно раз.



    Характеристики
    • Меню, оформленное этим плагином, будет хорошо работать на мобильных устройствах.
    • Вы можете включить / отключить причудливую анимацию, отключив анимацию.css файл.
    • Покупатель может получить доступ к FAQ по этому плагину после его покупки.
    • Этот плагин также подходит для работы с сайтом joomla.
    • С помощью этого подключаемого модуля вы можете создавать пункты выпадающего или выпадающего вправо меню.

    Стоимость

    Вы можете купить этот плагин по разумной цене в 5 долларов.

    Подробности здесь


    2. BDropdown - плагины jQuery Dropdown

    Этот плагин с выпадающим списком jquery основан на компоненте Bootstrap 4.Выпадающий список, предоставляемый этим плагином, можно переключать щелчком, а не наведением курсора. Этот плагин позволяет создавать выпадающие списки различных стилей, такие как одиночная кнопка, разделенная кнопка, выпадающие, разделенные выпадающие, вариации с выпадающим и выпадающим списком.

    Выпадающие списки, созданные этим плагином, отлично работают с кнопками любого размера, включая стандартные и разделенные раскрывающиеся списки.

    Выпадающий список, созданный этим плагином, управляется и размещается через CSS. Если раскрывающийся список выходит за пределы ширины области просмотра, его можно переместить с помощью jQuery.



    Характеристики
    • Плагин предоставляет разделители меню для разделения групп связанных пунктов меню с помощью разделителя.
    • Вы также можете поместить форму в раскрывающееся меню с помощью этого плагина.
    • В раскрывающемся списке вы можете включить или отключить элементы, чтобы сделать их активными или неактивными.

    Стоимость

    Вы получите 6-месячную поддержку от Documentdriver вместе с будущими обновлениями.

    Подробности здесь


    3. Зависимый раскрывающийся список - плагины jQuery Dropdown

    Этот плагин можно использовать для создания многоуровневого плагина jQuery с раскрывающимся списком. Вы также можете создавать раскрывающиеся списки с вложенными зависимостями.

    С помощью этого плагина вы можете создавать раскрывающиеся списки зависимостей с 3, 2 и 4 уровнями. Эти зависимые раскрывающиеся списки будут генерировать список опций, сгруппированных по optgroup.



    Характеристики
    • Вы можете выбрать элемент и установить его зависимость от одного или нескольких других входных элементов (включая вложение зависимостей).
    • Плагин автоматически отключает зависимое раскрывающееся меню до тех пор, пока зависимые результаты не станут доступны.
    • Он использует вызов ajax на сервер для доставки списка зависимых опций.
    • Отображает индикатор загрузки в зависимом выборе, пока результаты не будут получены с сервера.

    Стоимость

    Это бесплатный плагин, который можно приобрести на GitHub.

    Подробности здесь


    4. Плагин jQuery выбранного порядка

    Этот плагин предназначен для обработки порядка выбора.После интеграции этого плагина ваши пользователи смогут устанавливать порядок различных продуктов, доступных в раскрывающемся списке. Выбранные продукты будут отображаться в панели. Пользователи могут получить свой заказ после выбора продуктов из раскрывающегося списка.



    Характеристики
    • Этот плагин совместим с:
    1. jQuery: 1.4+
    2. Прототип: 1.7.1+
    3. Выбрано: 1.0.0+
    • Он прост в использовании, так как очень хорошо документирован.Вы также можете просмотреть живые демонстрации этого плагина на JsFiddle.

    Стоимость

    Это абсолютно бесплатно и доступно на GitHub.

    Подробности здесь


    За вами!

    Эти легкие плагины раскрывающегося списка jQuery очень полезны для создания раскрывающихся меню. Дизайн этих плагинов контролируется CSS. Поэтому их можно настроить с помощью нескольких нажатий клавиш, чтобы они соответствовали дизайну вашего веб-сайта.

    Эти тщательно подобранные плагины jQuery Dropdown позволят вам без промедления добавить многоуровневые подменю на ваш веб-сайт.

    Есть ли у вас какие-нибудь отличные рекомендации по плагинам раскрывающегося списка jQuery? Дайте нам знать об этом в комментариях!

    Следите за обновлениями! Есть еще много отзывов о лучших плагинах.

    Как показать и скрыть раскрывающееся меню при наведении курсора мыши с помощью CSS


    Используйте CSS : hover псевдокласс

    Если вы просто хотите показывать и скрывать раскрывающееся меню при наведении курсора мыши, вам не нужен JavaScript.Вы можете сделать это, просто используя свойство CSS display и псевдокласс : hover .

    В следующем примере показано, как реализовать простое раскрывающееся меню с помощью CSS.

      
    
    
    
     Показать скрыть раскрывающийся список с помощью CSS 
    <стиль>
        ul {
            отступ: 0;
            стиль списка: нет;
            фон: # f2f2f2;
        }
        ul li {
            дисплей: встроенный блок;
            положение: относительное;
            высота строки: 21px;
            выравнивание текста: слева;
        }
        ul li a {
            дисплей: блок;
            отступ: 8px 25px;
            цвет: # 333;
            текстовое оформление: нет;
        }
        ul li a: hover {
            цвет: #fff;
            фон: # 939393;
        }
        ul li ul.падать{
            минимальная ширина: 100%; / * Устанавливаем ширину раскрывающегося списка * /
            фон: # f2f2f2;
            дисплей: нет;
            позиция: абсолютная;
            z-индекс: 999;
            слева: 0;
        }
        ul li: hover ul.dropdown {
            дисплей: блок; / * Показать раскрывающийся список * /
        }
        ul li ul.dropdown li {
            дисплей: блок;
        }
    
    
    
        
    
      

    Как решить задачу наведения диагонального подменю | Хавьер Вильянуэва

    Выпадающие меню - очень распространенный образец в сети, их код довольно прост:

    1. Используйте позицию: относительное в родительском пункте меню.
    2. Использовать позицию : абсолютное значение в подменю.
    3. Переключить видимость подменю при наведении курсора на родительский элемент.

    Однако это не учитывает тот факт, что большинство пользователей не перемещают курсор в подменю по прямой линии, большую часть времени они перемещают курсор на по диагонали на , поскольку это кратчайший путь к контенту, который они пытаемся получить доступ.

    Аргх! Милый котенок вне досягаемости…

    Основная проблема с подходом «навести родитель, переключить детей» заключается в том, что как только курсор покидает родительский элемент, подменю скрывается.Это более серьезная проблема с раскрывающимися списками на всю ширину, потому что в некоторых случаях пользователи будут пытаться щелкнуть контент на дальнем конце подменю.

    К счастью, есть несколько способов решить эту проблему:

    Мы все знаем, что javascript решает все, , и это не исключение, вы можете использовать такой плагин, как jQuery-menu-aim, чтобы помочь различать пользователя, пытающегося навести курсор на раскрывающийся список элемент или попытка перейти к содержимому подменю.

    Демонстрации показывают вертикальные выпадающие списки, похожие на Amazon, но также поддерживают горизонтальные меню.Он работает довольно хорошо, хотя он не обновлялся годами, но если вы пытаетесь сохранить небольшие размеры пакетов, возможно, решение только на CSS будет лучшей альтернативой.

    Если проблема со скрытием раскрывающихся списков заключается в том, что курсор случайно покидает родительский элемент, то, возможно, мы сможем расширить родительский элемент , чтобы обеспечить больший предел ошибки.

    Псевдоэлементы :: before и :: after являются частью содержимого элемента , поэтому их можно использовать для создания «страховочной сети» под элементами верхнего уровня, что будет держать раскрывающийся список открытым при наведении курсора над.

    Безопасная область наведения

    Красная полоса - это псевдоэлемент :: after родительского элемента, который отображается только при наведении курсора и, поскольку он находится поверх всех элементов верхнего меню, он будет держать меню открытым даже при наведении курсора.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *