Sub Navigation

desktopsidebar

Desktop Sidebar (click to view larger)

Left Navigation Basic Structure

The left navigation is one of the more complicated elements of the aafp.org design. Read through this carefully and refer back to it often. You may also want to review the information architecture (IA) page for terms and concepts that are used below.

The left navigation only appears on pages at level 3 of the IA and below. The left nav takes up three columns of the 12 available grid columns, so the remaining space is only nine columns.

Level 1

The first section of the left nav is the category page under which the current page exists.

Level 2

Next level down in the navigation are the content drawers. These, as you can see to the left, expand and collapse with a tap. You can open a drawer to see what pages are below it or close a drawer if you don't need the extra clutter. The drawer starts open if the page you are on is within that drawer. Also, note that the drawe that contains your current page is highlighted when the drawer is closed. This is accomplished with javascript included in the standard js file.

Levels 3-5

The lower levels are all content pages. You may only have up to three levels of content pages in the left nav. Any further and there will not be enough room for the links to appear in the left nav. Strive to contain all elments within these three levels of content. We welcome longer pages if necessary.

When should pages not show up in the left nav?

There are several reasons why you wouldn't want your page to show up in a left navigation. If your whole application fits these criteria please use the 12-column template without left navigation instead. Here are use cases when your page(s) shouldn't appear in the left nav.

  • If your application is a process where users should not be able to jump around, such as a sign up process or cart.
  • If your page falls below 5 levels deep.
  • If your page could technically live under more than one section of the IA.

If your page meets any of the criteria listed above, please try to find the parent or grand-parent page that best indicates the sub-section of the site that the visitor is inside. Then use the class "current-parent-hightlight" on the <li> of that element to allow you to indicate this relationship to the visitor.

The Code

    <div class="three-column no-gutter left-nav">      
        <aside class="nav">
            <span class="shadow"></span>
            <a href="#">
                <h6>Category Page (Level 1)</h6>
            </a>
            <nav>
                <ul class="top_level">
                    <li class="first-child">
                        <a href="#">Drawer (Level 2) #1<span class="sub-info"></span></a>
                    </li>
                    <li class="current">
                        <a href="#" class="active current toggle" title="">Drawer (Level 2) #2<span class="sub-info"></span></a>
                        <ul class="level_2 current">
                            <li class="first-child">
                                <a href="#" >Content (Level 3) #1<span class="sub-info"></span></a>
                                <ul class="level_3 current">
                                    <li class="single">
                                        <a href="#" class="current active">Content (Level 4) #1<span class="sub-info"></span></a>
                                        <ul class="level_4 current">
                                            <li class="single">
                                                <a href="#" class="nochildren" title="">Content (Level 5) #1<span class="sub-info"></span></a>
                                            </li>
                                            <li class="single">
                                                <a href="#" class="nochildren" title="">Content (Level 5) #2<span class="sub-info"></span></a>
                                            </li>
                                            <li class="single">
                                                <a href="#" class="nochildren" title="">Content (Level 5) #3<span class="sub-info"></span></a>
                                            </li>
                                            <li class="single">
                                                <a href="#" class="nochildren" title="">Content (Level 5) #4<span class="sub-info"></span></a>
                                            </li>
                                            <li class="single">
                                                <a href="#" class="nochildren" title="">Content (Level 5) #5<span class="sub-info"></span></a>
                                            </li>
                                            <li class="single">
                                                <a href="#" class="nochildren" title="">Content (Level 5) #6<span class="sub-info"></span></a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="single">
                                        <a href="#" title="">Content (Level 4) #2<span class="sub-info"></span></a>
                                    </li>
                                    <li class="single">
                                        <a href="#" title="">Content (Level 4) #3<span class="sub-info"></span></a>
                                    </li>
                                    <li class="single">
                                        <a href="#" title="">Content (Level 4) #4<span class="sub-info"></span></a>
                                    </li>
                                </ul>
                            </li>
                            <li class="single">
                                <a href="#" title="">Content (Level 3) #2<span class="sub-info"></span></a>
                            </li>
                            <li class="single">
                                <a href="#" title="">Content (Level 3) #3<span class="sub-info"></span></a>
                            </li>
                            <li class="single">
                                <a href="#" title="">Content (Level 3) #4<span class="sub-info"></span></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" title="">Drawer (Level 2) #3<span class="sub-info"></span></a>
                    </li>
                    <li class="last-child">
                        <a href="#" title="">Drawer (Level 2) #4<span class="sub-info"></span></a>
                    </li>
                </ul>
            </nav>
        </aside>
    </div><!-- end left nav -->

Left Nav Classes and Definitions

There are several classes that are used for various functions. Below is a brief overview of what they do and how they work.

 

Class
What it does
When to use it
Class: .activeWhat it does: Tells the open drawer that it should not be highilghted and the current page that it SHOULD be highlighted.
When to use it: Use on the <a href> of the drawer and the current page both.
 
Class: .currentWhat it does: Tells the drawers which sections should be open.
When to use it:
  1. Drawer level's <li> and <a>
  2. each level below's <ul> down to the level of the active page PLUS one. (This shows the sub pages of the current page)
  3. The active page's <a>
Class: .current-parent-highlightWhat it does: Tells the visitor what page the current page is underneath. Highlights that in a pale color.When to use it: Place this class on the <a> of the page that you would like to highlight.
Class: .level_# (1-4)What it does: Allows for easier reading of the levels of the menu. Certain scripts use these to pinpoint parts of the menu faster.When to use it: Place these on the <ul> below that level. So the drawer level (level 2) has <a...>followed by <ul class="level_2"...
Class: .nochildren
What it does: Not used in css or js but can help you tell how deep one section goes.When to use it: Place on the <a> of the deepest links in each branch of the tree.
Class: .single
What it does: Used instead of 'toggle' to indicate that this link isn't a drawer and to help style properly.When to use it: Place on the <li> of any link that is not a drawer.
Class: span.sub-info
What it does: Used to provide addtional suplimental information like "36MB PDF" or "www.cnn.com".When to use it: Add this span/class combo inside the <a> of the link.
Class: .toggle
What it does: Used to show that a 'link' is actually a drawer.When to use it: Used on level 2 only. Place this on each <a> in level 2.

Mobile Sub Navigation

The left nav disappears when the screen is less than 768px wide. In it's place is a mobile sub navigational element that behaves just a little differently. Only the area that you are inside at the moment is visible. So, if you have content that However, this is all pulled in from the left navigation, so if you just place the following JS on the page it should run perfectly.

<div class="mobilesubnav">
<script type="text/javascript">
    jQuery(function($) {
        if ($(".nav nav ul li.current ul.level_2").length &gt; 0) {
            var mobileNavHtml = $(".nav nav ul li.current").html();
            $("ul.mobile_top_level li").html(mobileNavHtml);
            $("#mobile-sub-nav").removeClass("hidden");
            $("#mobile-sub-nav ul").show();
        }

    });
</script>
</div>