jQuery - CSS DropDown Элементы навигации - Как создать морковный выпадающий - PullRequest
Новая
       18

jQuery - CSS DropDown Элементы навигации - Как создать морковный выпадающий

0 голосов
/ 05 октября 2010

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

Я бы хотел, чтобы пункты меню создавались динамически (не обязательно все с помощью ajax). Но они не должны быть жестко запрограммированы на странице.

Похоже, что такие сайты, как TWITTER, обрабатывают выпадающий список ...

Например, в Твиттере есть: «Ретвиты \ /», когда вы щелкаете по морковке, затем на страницу добавляется следующее: 

<ul class="drop-down" style="left: 0px; right: auto; top: 31px; visibility: visible; ">
  <li class="stream-link" data-item-id="">
  <a title="Retweets by others" href="/#!/retweets_by_others">
    <b class="item-name">
      Retweets by others
    </b>
    </a>
</li><li class="stream-link" data-item-id="">
  <a title="Retweets by you" href="/#!/retweets">
    <b class="item-name">
      Retweets by you
    </b>
    </a>
</li><li class="stream-link" data-item-id="">
  <a title="Your Tweets, retweeted" href="/#!/retweeted_of_mine">
    <b class="item-name">
      Your Tweets, retweeted
    </b>
    </a>
</li>
</ul>

Предложения о том, как этого добиться?

спасибо

1 Ответ

0 голосов
/ 05 октября 2010 
$("button").next().hide();
$("button .carrot").click(function() {
  $button = $(this).parent().toggleClass("active");
  $button.parent().next().toggle().offset($button.offset());
});

, если ваш HTML выглядит так: 

<button>Button <span class="carrot">v</span></button>
<ul>
  <li>blah blah blah</li>
</ul>
...