Hello all,
I thought I’d post this up here for anyone who was looking to use Twitter Bootsrap, in particular get the Nav Bar and Dropdowns working with Structure Entries (and Structure):
Took a little while to get working correctly because the line spacing ect to keep the code readable makes for woefully hard-to-read rendered HTML when comparing to boostrap examples.
Once thing I am not able to do, which I wanted to, was repeat the Parent as the first item in the child menu (for a 2 deep menu) so that that page is accessable, because the parent of the dropdown only triggers the dropdown when clicked (not url). Perhaps someone has a suggestion? Or maybe a way of onHover activing Show for the dropdown menu?
<div class="navbar navbar-fixed-top">
<div class="navbar-inner ">
<div class="container">
<ul class="nav">
<a href="http://{homepage}" class="brand">{site_name}</a>
{exp:structure_entries channel="pages"}
{if {entry_id} != 1}
{if {depth} == 1}{!-- Top Level --}
<li class="{if {children_total} != 0}dropdown{/if}{if {current_parent} OR {current_page}} active{/if}" id="{url_title}">
<a href="#{url_title}%22data-toggle=%22dropdown" class="dropdown-toggle">{title}{if {children_total} != 0} <b class="caret"></b>{/if}</a>
{if {children_total} == 0}{!-- No Children - so close markup --}
</li>
{/if}
{if:else}{!-- Children (not top level) --}
{if {sibling_count} == 1}{!-- First child - so open markup --}
<ul class="dropdown-menu">
{/if}
<li {if {current_parent}}class="current"{/if}{if {current_page}}class="active"{/if}>
<a href="http://{page_uri}">{title} <!--Depth={depth} Parent={parent_id}--></a>
{close_markup}
{if {total_children} == 0 || {depth} == {restricted_depth}}
</li>
{/if}
{if {last_sibling} && {sibling_count} == {sibling_total}}
</ul>
</li>
{/if}
{/close_markup}
{/if}
{/if}
{/exp:structure_entries}
</ul>
</div>
</div>
</div>