jQuery - CSS DropDown Navigation Items - How to build a Carrot Dropdown

Question

Hello, I'm interested in learning the smart, elegant way to build navigation items throughout a site that have the carrot that when clicked expands a list of menu items.

I would like for the menu items to be built dynamically (not necessarily all with ajax). But they shouldn't be hard coded on the page.

That appears to be how sites like TWITTER handle the dropdown...

For example on Twitter they have: "Retweets \/" when you click the carrot, it then injects the following into the page:

<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>

Suggestions on how to accomplish this?

thanks

Answer 1

$("button").next().hide();
$("button .carrot").click(function() {
  $button = $(this).parent().toggleClass("active");
  $button.parent().next().toggle().offset($button.offset());
});

if your html looks like this:

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