Navigation Test

Navigation Testing

by Emily Humphrey

HTML

<div id="wrapper">
    <div id="header"><h1>Major Houses of Westeros</h1></div>
    <div id="nav">
        <ul id="large-nav">
            <li><a href="#baratheon">House Baratheon</a></li>
                <ul class="sub-nav baratheon">
                    <li><a href="#robert">Robert</a></li>
                    <li><a href="#joffrey">Joffrey</a></li>
                    <li><a href="#myracella">Myrcella</a></li>
                    <li><a href="#tommen">Tommen</a></li>
                </ul>
            <li><a href="#stark">House Stark</a></li>
                <ul class="sub-nav stark">
                    <li><a href="#eddard">Eddard</a></li>
                    <li><a href="#robb">Robb</a></li>
                    <li><a href="#sansa">Sansa</a></li>
                    <li><a href="#ayra">Ayra</a></li>
                    <li><a href="#brandon">Brandon</a></li>
                    <li><a href="#rickon">Rickon</a></li>
                </ul>
            <li><a href="#lannister">House Lannister</a></li>
                <ul class="sub-nav lannister">
                    <li><a href="#tywin">Tywin</a></li>
                    <li><a href="#cersei">Cersei</a></li>
                    <li><a href="#jaime">Jaime</a></li>
                    <li><a href="#tyrion">Tyrion</a></li>
                </ul>
            <li><a href="#targaryen">House Targaryen</a></li>
                <ul class="sub-nav targaryen">
                    <li><a href="#aerys">Aerys</a></li>
                    <li><a href="#rhaegar">Rhaegar</a></li>
                    <li><a href="#viserys">Viserys</a></li>
                    <li><a href="#daenerys">Daenerys</a></li>
                </ul>
        </ul>
    </div>
    <div id="content">
        <h2 id="baratheon"><a name="baratheon">House Baratheon</a></h2>
        <p><b>House Baratheon of Storm's End</b> is a Great House of Westeros, and is the principal house in the Stormlands. Its seat, Storm's End, is an ancient castle raised by the Storm...

CSS

body{
    font-family:sans-serif;
    color:#222;
    background:#fbfbfb;
}
ul, li{
    margin:0;
    padding:0;
    list-style:none;
}
a, a:visited{
    color:#08C;
}
#wrapper{
    display:block;
    width:940px;
    margin:100px auto;
}
#nav{
    display:block;
    width:220px;
    min-height:20px;
    float:left;
}
#content{
    display:block;
    width:700px;
    padding:0 0 170px 0;
    float:left;
}

/* Navigation */

#large-nav li a{
    display:block;
    width:220px;
    padding:10px 0;
    border-bottom:0;
    background:#fbfbfb;
}
.append #large-nav{
    position:fixed;
    top:48px;
}
.sub-nav{
    height:0;
    overflow:hidden;
    transition: height .5s;
    -webkit-transition: height .5s;
}
.sub-nav li a{
    text-indent:15px;
}
.fury .sub-nav.baratheon{
    height:152px;
}
.winter .sub-nav.stark{
    height:228px;
}
.roar .sub-nav.lannister{
    height:152px;
}
.fire .sub-nav.targaryen{
    height:152px;
}

/* Type */

h1{
    font-size:2.5em;
    line-height:.75;
    margin:60px 0;
}
h2{
    font-size:2em;
    line-height:.75;
    margin:70px 0 20px;
    padding:10px 0 0;
}
h2:first-of-type{
    margin-top:0;
}
h3{
    font-size:1.5em;
    line-height:.75;
    margin:30px 0 20px;
    padding:10px 0 0;
}
h3 a{
    color:#222;
}
}
p{
    font-size:1em;
    line-height:1.5em;
}

JavaScript

$(window).scroll(function() {
    
    //Sticky Nav

    var scroll = $(window).scrollTop();
    var wrapper = $("#wrapper").offset().top;
    var appendNav = wrapper + 41;
    
    if (scroll >= appendNav) {
        $("body").addClass("append"),
        stag = true;
    } else{
        $("body").removeClass("append"),
        stag = false;
    }
    
    //Sub Navs

    var winter = $("#stark").offset().top;
    var starkNav = winter - 40;
    var roar = $("#lannister").offset().top;
    var lannisterNav = roar - 40;
    var fire = $("#targaryen").offset().top;
    var targaryenNav = fire - 40;
    
    if (scroll >= starkNav){
        wolf = true,
        stag = false;
    } else{
        wolf = false;
    }
    
    if (scroll >= lannisterNav){
        lion = true,
        wolf = false,
        stag = false;
    } else{
        lion = false;
    }
    
    if (scroll >= targaryenNav){
        dragon = true,
        lion = false,
        wolf = false,
        stag = false;
    } else{
        dragon = false;
    }
    
    // If Else
    
    if (stag === true) {
        $("body").addClass("fury");
    } else{
        $("body").removeClass("fury")
    }
    
    if (wolf === true) {
        $("body").addClass("winter");
    } else{
        $("body").removeClass("winter")
    }
    
    if (lion === true) {
        $("body").addClass("roar");
    } else{
        $("body").removeClass("roar")
    }
    
    if (dragon === true) {
        $("body").addClass("fire");
    } else{
        $("body").removeClass("fire")
    }
    
});

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});