Book Project: Ideas #1

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-overlay111">
        <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;
}

JavaScript

// This is where dropdown animating begins
// Now if you toggle off "nav-content-overlay" from nav-1-content, it will shift the content down! Notice "nav-content-overlay111" in the HTML

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