LeftNav

by peterbenoit

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
<h1>Indoor Safety</h1>
<nav id="left" class="hidden-one hidden-two">
<h3><a href="http://emergency.cdc.gov/disasters/index.asp">Natural Disasters and Severe Weather</a></h3>

    <ul id="nav-primary">
        <li><a href="http://emergency.cdc.gov/disasters/earthquakes/index.asp">Earthquakes</a> 
            <ul>
                <li><a href="http://emergency.cdc.gov/disasters/earthquakes/prepared.asp">Being Prepared</a>

                </li>
                <li><a href="http://emergency.cdc.gov/disasters/earthquakes/supplies.asp">Emergency Supplies</a>

                </li>
                <li><a href="http://emergency.cdc.gov/disasters/earthquakes/inspecting.asp">Home Hazards</a>

                </li>
                <li><a href="http://emergency.cdc.gov/disasters/earthquakes/during.asp">Indoor Safety</a>

                </li>
                <li><a href="http://emergency.cdc.gov/disasters/earthquakes/outdoorsafety.asp">Outdoor Safety</a>

                </li>
                <li><a href="http://emergency.cdc.gov/disasters/earthquakes/specificsituations.asp">Specific Situations</a>

                </li>
                <li><a href="http://emergency.cdc.gov/disasters/earthquakes/food.asp">Food and Water</a>

                </li>
                <li><a href="http://emergency.cdc.gov/disasters/earthquakes/disabilities.asp">People with Special Needs</a>

                </li>
                <li><a href="http://emergency.cdc.gov/disasters/earthquakes/psa/index.asp">PSAs and Podcasts</a>

                </li>
            </ul>
        </li>
        <li><a href="http://emergency.cdc.gov/disasters/extremeheat/index.asp">Extreme Heat</a> 
            <ul>
                <li><a href="http://emergency.cdc.gov/disasters/extremeheat/specificgroups.asp">Info for Specific...

CSS

/* start demo css */
@font-face {
    font-family:'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v7/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
* {
    box-sizing: border-box;
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
}
h1 {
    position:absolute;
    font-size: 24px;
    top:-15px;
    left: 260px;
}
nav#fourth {
    position:absolute;
    left:260px;
    top:35px;
    border:1px solid silver;
    width:500px;
    height:300px;
}

.italic { font-style:italic; }
.bold { font-weight: bold; }
li.parent > a:after { content: '\00bb'; }
.show { display:block!important; }
.hide { display:none!important; }
/* end demo css */

/* non-demo css */
nav#left {
    width: 235px;
}
nav#left > ul {
    border:1px solid #c1d5b0;
}
nav#left h3 {
    background: #085100;
    margin:0;
    padding:5px;
    /* h3 in current left nav is not bold... */
}
nav#left h3 a {
    color:#fff;
    text-decoration:none;
}
nav#left ul {
    list-style-type:none;
    margin:0;
    padding:0;
    background: #c1d5b0;
    /* default color for nav, or primary li color */
}
nav#left li {
    display: block;
    line-height:35px;
    cursor:pointer;
    border-top: 1px solid #e5e5e5;
}
nav#left>ul>li:first-child {
    border-top:0;
}
nav#left li a {
    display:inline-block;
    width:90%;
    line-height:16px;
    color: #000;
    text-decoration:none;
    padding-left:5px;
    margin-top:9px;
    /* this seems to make multiline anchors appear to be vertically aligned */
}
nav#left a:hover {
    text-decoration: underline;
}
/* 2nd level */
 nav#left ul li ul {
    display: none;
    /* hides all sub uls */
    background: #d7e4cc;
}
nav#left ul li ul li a {
    padding-left:10px;
}
/* 3rd level */
 nav#left ul li ul li ul {
    background: #fff;
}
nav#left ul li ul li ul li a {
    padding-left:15px;
}
/* 4th level - in emergency...

JavaScript

var config = {
    id: 'nav#left',
    showFourthLevel: true,
    fourthLevelId: '#fourth',
    toggleSpeed: 200,
    upClass: 'up',
    downClass: 'down',
    indicateParents: true,      // should the parents of the current page be indicated
    maintainPositions: true,    // should the nav maintain open/close positions
    positions: [],
    //page: 'earthquakes/during.asp',
    //page: 'hurricanes/foodwater.asp',
    page: 'hurricanes/asl/index.asp',    // 4th level selected page 
    pageFound: false,
    pageSelector: null
};

// look for the page in the nav
if($(config.id).has('a[href$="'+config.page+'"]')) {
    config.pageFound = true;
    
    config.pageSelector = $('a[href$="'+config.page+'"]');

    // highlight the page
    config.pageSelector.addClass('bold');
    
   // if(config.pageSelector.parents('ul').length < 3) {
        // "open" all the parents
        config.pageSelector.parents('li').each(function(){
            var t = $(this);
          
            if(t.children('ul').length) {
                if(config.indicateParents) { t.addClass('parent') };
                t.addClass(config.upClass);
                t.children('ul').show();
            }
        });
   // }
}
              

// don't bother doing anything if the page doesn't exist in the nav
// this may not be a reasonable assumption
if(config.pageFound) {
    // if we're using cookies and they're already set...
    if (config.maintainPositions && $.cookie('positions') && $.cookie('positions').length > 0) {
        config.positions = $.cookie('positions').split(',');
    }
    
    // clicking the li
    $('li').click(function (e) {
        var t = $(this),
            c = t.attr('class'),
            children = t.children('ul:first'),
            re = new RegExp(config.upClass + '|' + config.downClass, 'g'),
            cfg = config;
    
        // if the li has a class and it's either up or down
        if (typeof c !== 'undefined' && c.match(re)) {
           ...