Twitter Bootstrap2 with Structure

twitter-bootstrap2-with-structure.js

{exp:structure:nav max_depth="2" show_depth="2" current_class="active" css_class="nav" has_children_class="dropdown"}

<script>
$(function() {
  $('ul li.dropdown').each(function() {
    $(this).children('ul').addClass("dropdown-menu"); // add children dropdown menu class
    $(this).children('a').append('<b class="caret"></b>') // add caret icon
    $(this).clone().prependTo($(this).find('ul')).removeClass('dropdown active').children('ul').remove(); // clone parent link into child menu
    $(this).children('a').attr('data-toggle', 'dropdown').attr('href', '#').addClass("dropdown-toggle"); // add data attributes to hook up Bootstrap
  });
});
</script>

Seems to work. Comments:

1. <script> should have type="text/javascript", right?
2. I put the script in the foot of the document inside a document.ready() statement, then it worked.
3. Nav items with third-level items in them show a disclosure triangle but no visible items.

1. The type isn't necessary in html5 spec. 2. Great! 3. Twitter Bootstrap only accounts for 2 levels of navigation. Anything more will need to be customized. I would guess a quick google search would find some examples or forks.

…

On Mar 19, 2012, at 6:33 PM, Allan ***@***.*** wrote: Seems to work. Comments: 1. `<script>` should have `type="text/javascript"`, right? 2. I put the script in the foot of the document inside a `document.ready()` statement, then it worked. 3. Nav items with third-level items in them show a disclosure triangle but no visible items. --- Reply to this email directly or view it on GitHub: https://gist.github.com/2127399

What other js files are you calling, cant get it to work.

I call the jquery and bootstrap.min.js before, no firebug errors on the page.

Make sure you use at least jQuery 1.7.1, and set the has_children class.

Sweet, all good after upgrading to Structure 3.2. Thanks