Ищем раскрывающийся плагин расширяющегося меню

Question

Ищем раскрывающийся плагин расширяющегося меню

0

Я не могу найти похожий скрипт для одного пользователя здесь: http://www.avast.com/en-us/index. Когда вы наводите курсор на любой пункт меню ("Главная, магазин..."), меню, которое показывает ход содержание вниз.

Есть ли какой-нибудь распространенный плагин jquery? Или, может быть, готовый плагин wordpress?

Andy Andy 25 фев. 2014, в 00:49

Источник

Теги:

jquery

menu

1 ответ

Ещё вопросы

Charlie74 · Answer 1 · 2014-02-24T22-30-00.000Z

Это довольно легко настроить... он ОЧЕНЬ простой пример того, как это может работать.

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

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

ОБРАЗЕЦ HTML

<ul>
    <li id="home">Home</li>
    <li id="products">Products</li>
    <li id="services">Services</li>
</ul>

<div id="homeContent">
    Our Home Menu Items Go Here
</div>

<div id="productsContent">
    Our Product Content Goes Here
</div>

<div id="servicesContent">
    Our Services Content Goes Here
</div>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>

БАЗОВЫЙ КОД HANDLER ИСПОЛЬЗОВАНИЕ JQUERY

$( "#home" ).hover(
  function() {
    $("#homeContent").show(1000);
  }, function() {
    $("#homeContent").hide(1000);
  }
);

$( "#products" ).hover(
  function() {
    $("#productsContent").show(1000);
  }, function() {
    $("#productsContent").hide(1000);
  }
);

$( "#services" ).hover(
  function() {
    $("#servicesContent").show(1000);
  }, function() {
    $("#servicesContent").hide(1000);
  }
);