Book Project: Ideas #2

by lasha

HTML

<div class="header">
    <h1>Awesome Project</h1>
</div>
<div class="nav-container">
    <div class="nav-1-btn">Click to Expand Nav</div>
    <div class="nav-1-content nav-content-overlay">
        <div class="nav-content-wrapper">Content, links, images, inputs, anything!</div>
    </div>
</div>
<div class="content-container">
    Blah. :)
</div>

CSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.header {
    background-color: #ccc;
    padding: 5px 10px;
}
.nav-container {
    background-color: #eee;
    position: relative;
}
/*.nav-container*/ .nav-1-btn {
    padding: 5px 10px;
}
/*.nav-container*/ .nav-1-btn.active:before {
    content: "» ";
}
.nav-content-wrapper {
    padding: 5px 10px;
}
/*.nav-container*/ .nav-1-content {
    /* border: 1px solid #ccc; */
    background-color: #e1e1e1;
    overflow: hidden;
    height: 0;
    visibility: hidden;
    opacity: 0;
    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
/*.nav-container*/ .nav-1-content.active {
    height: 100px;
    visibility: visible;
    opacity: 1;
}
/*.nav-container*/ .nav-1-content.nav-content-overlay {
    position: absolute;
    width: 100%;
}

.content-container {
    min-height: 400px;
    background-color: #ccc;
    padding: 5px 10px;
}

/* NAV-CONTAINER STICKY CSS STYLING BELOW */
.nav-container.sticky {
    position: fixed;
    width: 100%;
    top: 0;
    /* left: 0; */
}

JavaScript

$(".nav-1-btn").on("click", function(e){
    $(".nav-1-btn").toggleClass("active");
    $(".nav-1-content").toggleClass("active");
});

// Fix nav to top of screen when user scrolls down far enough

$(window).on("scroll", function(e){
    if( $(window).scrollTop() > 99 ){
        $(".nav-container").addClass("sticky");
    } else {
        $(".nav-container").removeClass("sticky");
    }
    $(".nav-container").width( $(".header").outerWidth() );
});

$(window).on("resize", function(e){
    $(".nav-container").width( $(".header").outerWidth() );
});