Syndicated Header & Footer

The AAFP has prepared a javascript solution to fill in the header and footer of the site automatically for you. This will help ensure that all the links stay up to date, should aafp.org's structure change. Use of these links is required, in lieu of hard coding the header and footer.

Header

The AAFP.org header appears at the top of all pages, providing consistent access to high-level pages. The AAFP Capital Seal is used to provide a solid anchor on the page for the member audience. Information architecture is determined by business goals and user needs. Navigation elements are grouped into primary, secondary and utility areas based on need and frequency of use.

The header javascript can be placed right below the <body> element. This is the very first thing on the page.

<script type="text/javascript" src="http://js.aafp.org/header.js"></script>

Top Nav Highlighting

We highlight the section in which the current visitor is visiting in the top menus. (Both menus above the orange line). This is not done automatically, so you will need to add the following jQuery to the footer of your page with the correct menu item id in place of "#cme".

  jQuery(document).ready(function () {
           jQuery('#cme').addClass('active');
    });
Desktop Footer

Desktop Footer (click to view larger)

Footer

The AAFP.org footer appears at the bottom of all pages, providing consistent access to primary, secondary, tertiary, and utility navigation pages. The AAFP Written Seal is used to as a “signature” and a subtle reinforcement of the brand messaging. Breadcrumb links help the users orient themselves within the site and also provide an easy way for users to traverse back up the site structure.

The footer can go right below the closing body tag (</body>). This footer contains two files. One for the larger view and a second for the 'mobile' views. Both are necessary.

<script type="text/javascript" src="http://js.aafp.org/footer.js"></script>
<script type="text/javascript" src="http://js.aafp.org/footer-mobile.js"></script>