The current release of foundation, version 2.2.1 does not provide a Top Navbar component similar to the one provided by twitter bootstrap. As this is a requirement for many projects, we have included a Top Navbar component which is loosely based on foundation top-bar branch .
To use the Top Navbar in your your project, first ensure that your project’s site_base.html inherits from theme_base.html
{% extends "theme_base.html" %}
theme_base.html defines the template block topbar with the following structure.
{% block topbar %}
<div class="attached">
<div class="name">
<span><a href="/">{{SITE_NAME}}</a><a href="#" class="toggle-nav"></a></span>
</div>
<ul class="right">
{% block account_bar %}{% include "_account_bar.html" %}{% endblock %}
</ul>
{% block nav %} {% endblock %}
</div>
{% endblock %}
This will provide your project with a navbar which is fixed to the top of the site (via the “attached” class) which displays the SITE_NAME and an account management drop down menu. The account management drop down is simply an unordered lists as shown in the following snippet abstracted from the _account_bar.html template file
{% if user.is_authenticated %}
<li class="has-dropdown">
<a href="#">{{ user }}</a>
<ul class="dropdown">
<li><a href="{% url acct_email %}"><span class="glyph social">x</span>Account</a></i></li>
{% if user.is_staff %}
<li><a href="{% url admin:index %}"><span class="glyph general">a</span>Admin</a></li>
{% endif %}
<li><a href="{% url acct_logout %}"><span class="glyph general">]</span>Log out</a></li>
</ul>
</li>
…
So to create a drop down menu item, simply assign the li element the “has-dropdown” class and include an unordered list element with a “dropdown” class selector <ul class="dropdown"> that contains the drop down menu items . The nav block can be utilized for the other menu items for the site. These can be a combination of drop down and non drop down elements. This is shown in the following snippet abstracted from the Top Navbar for this site
<li><a href="/">Home</a></li>
{% if user.is_authenticated %}
<li id="tab_profile"><a href="{% url profile_detail user.username %}">{% trans "Profile" %}</a></li>
<li id="tab_notices"><a href="{% url notification_notices %}">{% trans "Notices" %}{% if notice_unseen_count %} ({{ notice_unseen_count }}){% endif %}</a></li>
{% endif %}
<li class="has-dropdown">
<a href="http://apps.raisedeyebrow.com/Design_Patterns/" target="_blank">Design Patterns</a>
<ul class="dropdown">
<li><a href="/mondrian/"><span class="glyph general">d</span>Mondrian</a></li>
<li><a href="/column_flip/"><span class="glyph general">c</span>Column Flip</a></li>
<li><a href="/gallery_design/"><span class="glyph general">a</span>Gallery Design</a></li>
<li><a href="/featured_items/"><span class="glyph general">i</span>Featured Items</a></li>
<li><a href="/foundation_grid/"><span class="glyph general">p</span>Foundation Grid</a></li>
<li><a href="/featured_shuffle/"><span class="glyph general">b</span>Featured Shuffle</a></li>
</ul>
</li>
It should be noted that menu items can be embellished with appropriate symbol icons by including a span element with the “glyph general” class selector. So adding
<span class="glyph general">a</span>
will display the “gear” icon. These are actually Zurb symbol icon font that will scale and display nicely on various devices. These can be used any where in your project. .
A Zurb Foundation Theme for Pinax
Enter search terms or a module, class or function name.