При наведении выпадающее меню: Как сделать всплывающее меню при наведении

Разное 

Содержание

Выпадающее меню на 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

 

Всем удачи!

 

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

Как создать выпадающее меню WordPress

👍 Научим создавать сайты на WordPress бесплатно за 11 уроков. Подробнее →

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

Зачем нужны выпадающие меню?

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

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

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

Посмотрим, что для этого нужно, и как это сделать на своем ВП-сайте.

Тема с поддержкой выпадающего меню

Отображение выпадающих элементов в ВордПресс полностью зависит от темы. Большинство поддерживает эту функцию. Но все равно вы должны в этом убедиться.

Как проверить?

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

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

  1. Astra – бесплатный многоцелевой WordPress-шаблон с несколькими готовыми демо-сайтами.
  2. Reboot – современная и быстрая премиальная блоговая/новостная тема со встроенным конструктором главной.
  3. Journal X – платная красивая журнальная WP-тема с бесконечной подгрузкой контента.

При этом разберем, как сделать выпадающее меню WordPress.

Шаг 1. Создаем меню

Если это уже сделано, то смело переходите ко второму шагу.

Сделаем простое меню.

В админке перейдите Внешний вид > Меню и нажмите создайте новое меню.

Дайте имя новому меню и кликните Создать меню.

В блоке слева отметьте нужные пункты и нажмите Добавить в меню, а затем Сохранить меню.

Шаг 2. Добавляем подпункты

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

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

Добавим их.

Если перейти на сайт, то навигация будет выглядеть:

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

После того, как сохраните изменения, на сайте появится выпадающий список:

Выпадающее меню через плагин

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

В каталоге есть несколько решений. Один из популярных – плагин Max Mega Menu. С ним вы создадите структуру меню любой сложности, сможете добавить эффекты при наведении и нажатии и другие полезности.

Установку и работу с ним мы рассматривали в одной из прошлых статей.

Заключение

Выпадающее меню WordPress делает удобной для пользователя навигацию по сайту, что позволит ему быстрее найти нужную информацию. Его просто создать, если выбранная WP-тема поддерживает отображение дочерних элементов. В другом случае придется установить плагин.

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

Мне нравится5Не нравится1

Если Вам понравилась статья — поделитесь с друзьями

Как создать выпадающее меню при помощи CSS3

На этом уроке мы создадим выпадающее меню на чистом CSS3, которое вы можете найти в Impressionist UI от Владимира Кудинова.

Шаг 1 — HTML-разметка


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

<ul>

 <li><a href=»#»>My dashboard</a></li>
 <li><a href=»#»>Likes</a></li>
 <li><a href=»#»>Views</a>

 <ul>
 <li><a href=»#»>Documents</a></li>

 <li><a href=»#»>Messages</a></li>
 <li><a href=»#»>Sign Out</a></li>
 </ul>

 </li>
 <li><a href=»#»>Uploads</a></li>
 <li><a href=»#»>Videos</a></li>
 <li><a href=»#»>Documents</a></li>

</ul>

Шаг 2 — Макет меню


Мы начнем с удаления полей, отступов, границ и контуров всех элементов меню. Затем мы установим фиксированную ширину и высоту для меню, закругленные углы и CSS3-градиенты. Для выравнивания ссылок горизонтально, мы установим для списка float:left. Нам также необходимо установить относительное позиционирование (position: relative), это нам нужно для выравнивания подменю.

 .menu,
.menu ul,
.menu li,
.menu a {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
}

.menu {
 height: 40px;
 width: 505px;

 background: #4c4e5a;
 background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

.menu li {
 position: relative;
 list-style: none;

 float: left;
 display: block;
 height: 40px;
}

Мы временно скроем подменю, чтобы оно нам не мешало при написании стилей для первого уровня меню.

 .menu ul { display: none; }

Шаг 3 — Ссылки меню


Для стилей ссылок меню мы добавим некоторые базовые свойства CSS, такие как шрифты, цвета, отступы и т.д. Затем мы добавим темную тень для текста и цветовые переходы для создания плавного эффекта, когда цвет будет меняться при наведении курсора. Для создания разделителя ссылок добавим border слева и справа, а затем удалим левый border для первой ссылки и правый border для последней ссылки. При наведении курсора мыши мы только изменим цвет текста.

 .menu li a {
 display: block;
 padding: 0 14px;
 margin: 6px 0;
 line-height: 28px;
 text-decoration: none;

 border-left: 1px solid #393942;
 border-right: 1px solid #4f5058;

 font-family: Helvetica, Arial, sans-serif;
 font-weight: bold;
 font-size: 13px;

 color: #f3f3f3;
 text-shadow: 1px 1px 1px rgba(0,0,0,.6);

 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover > a { color: #8fde62; }

Шаг 4 — Подменю


Прежде всего, давайте удалим эту строку кода, которую мы добавили на втором шаге.

 .menu ul { display: none; }

Теперь мы зададим стили для подменю. Подменю мы разместим в 40px от верхней границы и 0px от левой границы пункта меню и добавим закругленные углы снизу. Установим прозрачность равную 0, а при наведении мыши будем изменять её до 1.

 .menu ul {
 position: absolute;
 top: 40px;
 left: 0;

 opacity: 0;
 background: #1f2024;

 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;

 -webkit-transition: opacity .25s ease .1s;

 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
 height: 0;
 overflow: hidden;
 padding: 0;

 -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}

.menu li:hover > ul li {
 height: 36px;
 overflow: visible;
 padding: 0;
}

Установим ширину ссылок подменю равную 100px. В качестве разделителя добавим нижнюю границу для ссылок, а для последней ссылки удалим её.

 .menu ul li a {
 width: 100px;
 padding: 4px 0 4px 40px;
 margin: 0;

 border: none;
 border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; }

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

 .menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }

Демонстрация


Перевод статьи с designmodo.com

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

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

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

При наведении на определенные псевдо-ссылки, должны появляться меню под ними. И чтоб он исчезал, если курсор отошел более чем, допустим, 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 🙂

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

Быстрая проверка: Рабочий JSFiddle

Может кто-нибудь помочь мне объяснить, почему ссылки из выпадающего меню не работают, когда я нажимаю на них? Может быть из-за событий указателя? 

Объяснение того, почему это поведение: Да, вы правы. Это связано с тем, как вы используете логику селектора :active. Чтобы объяснить подробно, рассмотрите ваше правило CSS

.container:hover .test1:active {
    display: none;
}

У вас есть ссылки меню под вашим основным li.test1, и любой щелчок по внутренним ссылкам также всплывает до этого элемента, так что все равно, что щелкнуть по li. Поэтому, как только мышь удерживается нажатой (событие мыши), она вызывает событие :active, и вы скрываете links (то есть: li.test1), но событие click завершается только тогда, когда мышь одновременно нажата и убрана. Таким образом, к настоящему времени li скрыт, а mouse up больше не находится на ссылке. Так что, как вы видите, шансов на событие щелчка не будет. Это проблема.

I saw other answers which you seem to be interested in and this really doesn't need any kind of hack, It can be done by just formatting your HTML and with some CSS changes.

Solution: Вместо того, чтобы заключать ссылки внутреннего меню в li.test1, вы можете работать с двумя разными li, одним для X CLose и другим для хранения menu links. Имея это в виду, мы можем быть уверены, что когда li.test1 активен (т. Е. Мышь не работает), мы можем скрыть его, а также другую новую li, которая прилегает к нему. Таким образом, это означает, что когда пользователь нажимает на X Closeli, мы скрываем меню. Если он нажимает на другие пункты меню, вы перенаправлены.

Таким образом, изменения в вашей структуре HTML должны быть

<ul>
  Drop down menu
  <li>
    <a href="#">X Close</a>
  </li>
  <li>
    <ul>
      <!-- all your links go here-->
    </ul>
  </li>
</ul>

И главное правило CSS это 

.container:hover .test1:active,
.container:hover .test1:active + .MenuLinks {
  display: none;
}

Ниже приведен SO рабочий фрагмент

body {
  padding: 20px;
}
.container {
  border: 1px solid Lime;
  padding: 10px;
  width: 200px;
  list-style-type: none;
}
.test1,
.MenuLinks {  
  display: none;
  border-color: orange;
  border-style: dashed;
  background: green;
  pointer-events: none;
}
.test1 {
  padding: 10px;
  border-width: 1px 1px 0px 1px;
}
.MenuLinks {
  border-width: 0px 1px 1px 1px;
}
.container:hover li {
  display: block;
}

/*Rule to hide both test1 and MenuLinks when X Close is clicked*/
.container:hover .test1:active,
.container:hover .test1:active + .MenuLinks {
  display: none;
}


a {
  pointer-events: auto;
  color: Lime;
  font-weight: bold;
}
<ul>
  Drop down menu
  <li>
    <a href="#">X Close</a>
  </li>
  <!--seperate li for close-->

  <li>
    <!--wrap all your menu items here-->
    <ul>
      CLOSE THIS CONTENT
      <li><a href="http://www.google.com">Go to link 1</a>
      </li>
      <li><a href="https://www.google.co.uk">Go to link 2</a>
      </li>
      <li><a href="https://www.google.co.uk">Go to link 3</a>
      </li>
    </ul>
    <li>
</ul>

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

Refused to display 'https://www.google.co.in/?gfe_rd=cr&ei=x2VWWLL2Ae-K8Qfwx4ngDQ' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Однако вы можете увидеть запросы на вкладке сети, когда вы нажимаете на ссылки.

Надеюсь это поможет!!

JQuery меню для вашего сайта

И снова здравствуйте дорогие читатели блога. Сегодня хочу Вам представить подборку JQuery меню. Часто вебмастера думают, какое бы меню сделать для своего сайта? Чтобы оно было легкое, красивое и удобное. Вот как раз эта подборка, я думаю, даст ответы по этому поводу. Ну да ладно, меньше слов ближе к делу.

1. JQuery меню «Sweet Menu».

Замечательное выезжающее меню с левой стороны экрана с картинками.

Пример ι Скачать исходники

2. Меню с авто прокруткой.

Бесподобное JQuery меню. При наведении меню выезжает вверх, и автоматически прокручивается.

Пример ι Скачать исходники

3. «Fancy menu» с использованием JQuery и CSS.

Наверное самое простое и красивое меню. Есть выбор цветов. Это меню отлично впишется в дизайн любого сайта.

Пример ι Скачать исходники

4. JQuery меню с вращением и масштабированием.

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

Пример ι Скачать исходники

5. Выпадающее меню с использованием JQuery.

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

Пример ι Скачать исходники

6. Галерея и навигация с миниатюрами.

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

Пример ι Скачать исходники

7. JQuery меню с картинками и подсказками.

При наведении на меню, картинка скользит вниз, а подсказка с ссылками поднимается снизу. Замечательная реализация.

Пример ι Скачать исходники

8. Меню «jStack» с использованием JQuery.

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

Пример ι Скачать исходники

9. JQuery меню с “kwicks” эффектом.

Не плохое меню из блоков. При наведении блок увеличивается.

Пример ι Скачать исходники

10. Мощное выпадающее меню.

При наведении на блок выпадает меню с ссылками.

Пример ι Скачать исходники

11. Всплывающее меню с JQuery.

Классное меню. При наведении на блок меню плавно всплывает.

Пример ι Скачать исходники

12. Горизонтальное анимированное меню на JQuery.

Отличное анимированное горизонтальное меню с красивым эффектом.

Пример ι Скачать исходники

13. Меню с слайдами и с списком на JQuery и CSS3.

Замечательное меню для оформления в тёмных тонах. При наведении выскальзывает миниатюра с списком.

Пример ι Скачать исходники

14. Меню из кубиков с JQuery.

Замечательное меню из маленьких кубиков. Очень красивый эффект при нажатии на меню. Посмотрите пример!

Пример ι Скачать исходники

15. Красивое меню с картинками.

Пример ι Скачать исходники

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

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

Благодарю всех не равнодушных чужим проблемам — спасибо. Все правильно по сути нужна статика, постараюсь привести пример аналогию, дабы легче можно было представить что именно хотелось воплотить в жизнь. К примеру, есть обычное выпадающее меню с разными пунктами, к примеру есть пункт меню под названием — машины, при наведении на меню, как обычно снизу выходит выпадающее меню с подпунктами уже конкретных моделей машин (штук 5-6) такие как к примеру Ваз 2101, 2102 и т.д. и при наведении на подпункт к примеру Ваз 2101 сбоку выходит краткое описание заранее созданной статьи, т.е. наводим на Ваз 2101 сбоку выходит его уменьшенная фотография (из предварительного просмотра статьи), краткое описание статьи (собственно из той статьи до «подробно») и ссылка подробнее, которая ведёт на саму эту статью.

Попробовал потыкаться с tooltips-om занятная штука, дошел до того в название пункта меню если вставить тэг articles anythere то вместе с названием выходит статья, правда если так подумать то тултипс в этом случае не нужен, но штука все ровно интересная (впринципе я думаю можно ее как то применить и в моем случае, но пока не придумал как).

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

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

Сейчас еще раз все обдумал, вспомнив как на шаблоне от RocketTheme реализована была одна менюшка, там в один из подпунктов было встроенное место под модуль (имеется ввиду место, как на шаблоне вывод разных модулей и меню), и предпросмотр был реализован созданием модуля типа html-код в который легко можно вставить картинку, текст и ссылку. Позиция у модуля ставилась соответственна та которая встраивалась в подпункт меню. Получается наводим на меню выпадают пункты меню, наводим на то что со встроенным местом под модуль, и сбоку появляется модуль html-код со сверстаным вручную предпросмотром. Все клево, но есть 2 проблемы, на том шаблоне, я не знаю как но эта фишка была встроенная именно в определенный тип меню, при чем встроенная не в настройках и где то а на уровня верстки шаблона, т.е. внутри, и я не знаю как повторить создание модулей для других подпунктов, и не знаю как сверстать окно предпросмотра, т.к. она имеет фиксированные размеры, где и как на него повлиять я тоже не знаю. Может таким способом кто нить подскажет, как можно сделать, или где начинать копать, способ не самый простой (и скорее всего не самый правильный), но в плане работоспособности он пока самый рабочий из всех. Еще раз благодарю всех неравнодушных к чужим проблемам людей, спасибо

 

html — раскрывающееся меню и всплывающее меню (подменю)

Нужный код:

HTML:

CSS:

  * {
        маржа: 0;
        отступ: 0;
    }
    тело {
        шрифт: 300 15px / 1.5 "Helvetica Neue", helvetica, arial, sans-serif;
        фон: # 333;
        маржа: 15 пикселей;
    }

    статья {
        ширина: 600 пикселей;
        маржа: 0 авто;
        фон: # 000;
        цвет: #fff;
        радиус границы: 5 пикселей;
        box-shadow: 0 0 15px 2px # 666;
    }

    раздел {
        ясно: слева;
    }

    h2 {
        размер шрифта: 45 пикселей;
        font-weight: 100;
        межбуквенный интервал: 15 пикселей;
        выравнивание текста: центр;
    }

    h2, #main_content, #dog_link {
        отступ: 15 пикселей;
    }

    п {
        маржа: 15px 0;
    }

    a {
        цвет: # 06c;
    }

    #main_nav ul {
        фон: белый;
        плыть налево;
        -webkit-transition:.5 с;
        переход: .5s;
    }

    #main_nav li {
        плыть налево;
        положение: относительное;
        ширина: 150 пикселей;
        стиль списка: нет;
        -webkit-transition: .5s;
        переход: .5s;
    }

    #main_nav> ul> li> a, h2 {
        текст-преобразование: прописные буквы;
    }

    #main_nav a {
        дисплей: блок;
        текстовое оформление: нет;
        отступ: 5 пикселей 15 пикселей;
        цвет: # 000;
    }

    #main_nav ul ul {
        позиция: абсолютная;
        слева: 0;
        верх: 100%;
        видимость: скрыта;
        непрозрачность: 0;
    }

    #main_nav ul ul {
        осталось: 100%;
        верх: 0;
    }

    #main_nav li: hover, #main_nav li: hover li {
        фон: #ddd;
    }

    #main_nav li li: hover, #main_nav li li: hover li {
        фон: #bbb;
    }

    #main_nav li li li: hover {
        фон: # 999;
    }

    #main_nav li: hover> ul {
        видимость: видимая;
        непрозрачность: 1;
    }

JSFiddle: https: // jsfiddle.net / szs4Lapn / 1/

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

Ссылки:

html — Показывать раскрывающееся меню при наведении курсора и закрывать при щелчке, используя только CSS

Быстрая проверка: Рабочий JSFiddle

Может ли кто-нибудь помочь мне с объяснением, почему ссылки из раскрывающегося меню не работают, когда я нажимаю на них? Может быть, из-за событий указателя?

Объяснение того, почему такое поведение : Да, вы правы, это из-за того, как вы используете логику селектора : active . Чтобы объяснить подробно, рассмотрим это правило CSS

 .container: hover .test1: active {
    дисплей: нет;
}

У вас есть ссылки меню под вашим основным li.test1 , и любой щелчок по внутренним ссылкам также перемещается вверх к этому элементу, так что это так же хорошо, как щелкнуть li . Таким образом, как только мышь удерживается (событие нажатия мыши), оно запускает событие : active , и вы скрываете ссылок (то есть: li.test1 ), но событие щелчка завершается только тогда, когда мышь одновременно вниз и вверх .Таким образом, к настоящему времени li скрыт, а мышь вверх больше не находится на ссылке. Итак, как вы видите, вероятность срабатывания события щелчка отсутствует. Вот в чем проблема.

Я видел другие ответы, которые, кажется, вас интересуют, и это действительно не требует какого-либо взлома. Это можно сделать, просто отформатировав ваш HTML и с некоторыми изменениями CSS.

Решение: Вместо того, чтобы оборачивать ваши внутренние ссылки меню внутри li.test1 вы можете работать с двумя разными li , одним для X CLose и другим для удержания ссылок меню . Имея это место, мы можем убедиться, что когда-либо активен li.test1 (т.е. мышь не работает), мы можем скрыть его , а также другой новый li , который находится рядом с ним. Таким образом, это означает, что когда пользователь нажимает кнопку X Close li , мы скрываем меню. Если он нажимает на другие пункты меню, вы перенаправляетесь.

Итак, изменения в вашей структуре HTML должны быть похожи на

И основное правило CSS —

  .container: hover .test1: active,
.container: hover .test1: active + .MenuLinks {
  дисплей: нет;
}

Ниже приведен рабочий фрагмент SO

 кузов  {
  отступ: 20 пикселей;
}
.container {
  граница: цельный лайм 1px;
  отступ: 10 пикселей;
  ширина: 200 пикселей;
  тип-стиль-список: нет;
}
.test1,
.MenuLinks {
  дисплей: нет;
  цвет границы: оранжевый;
  стиль границы: пунктирная;
  фон: зеленый;
  указатель-события: нет;
}
.test1 {
  отступ: 10 пикселей;
  ширина границы: 1px 1px 0px 1px;
}
.MenuLinks {
  ширина границы: 0px 1px 1px 1px;
}
.container: hover li {
  дисплей: блок;
}

/ * Правило для скрытия и test1, и MenuLinks при нажатии X Close * /
.контейнер: hover .test1: активный,
.container: hover .test1: active + .MenuLinks {
  дисплей: нет;
}


a {
  указатель-события: авто;
  цвет: салатовый;
  font-weight: жирный;
}

Примечание: Пустой экран при нажатии на ссылки вызван ограничениями безопасности Google в политике перекрестного происхождения, которая выдает эту ошибку в консоли

Отказался отображать https: // www.google.co.in/?gfe_rd=cr&ei=x2VWWLL2Ae-K8Qfwx4ngDQ 'во фрейме, потому что он устанавливает' X-Frame-Options 'в' SAMEORIGIN '.

Однако вы можете видеть запросы во вкладке сети, когда вы нажимаете на ссылки.

Надеюсь, это поможет !!

Bootstrap Dropdown Hover

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

Совместимость с начальной загрузкой

Dropdownhover полностью совместим с собственным компонентом раскрывающегося списка Bootstrap.Их можно применить к одному и тому же элементу, обеспечивая поддержку событий hover, и click, . На небольших устройствах событие наведения игнорируется.

Установка

Просто включите стиль Dropdownhover и файлы сценариев после Bootstrap.

  

  
     Шаблон Bootstrap 101 

    
    <ссылка href = "css / bootstrap.min.css "rel =" таблица стилей ">

    
    
    

  
  
     
 Привет, мир!

Пример

Оберните триггер раскрывающегося списка и раскрывающееся меню в . Dropdown , поскольку это важно. Добавьте data-hover = "dropdown" к кнопке основного действия или ссылке, чтобы активировать событие hover .

Выравнивание

В основном раскрывающееся меню позиционируется с помощью CSS, но если раскрывающееся меню находится вне области просмотра, оно позиционируется с помощью JavaScript в соответствии с окном.Также раскрывающееся меню поддерживает классы .dropdown-menu-right и .pull-right для выравнивания раскрывающегося меню по правому краю.

Могут возникнуть проблемы с кадрированием

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

  
    
  ...



или же


  • 
...

    •

    Дерево

    Добавьте data-hover = "dropdown" к

    или
    Автор записи

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

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