JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<nav>
    <ul>
        <li><a href="">Mainpage</a>

            <ul>
                <li><a href="" class="search-link">Search Subpage</a>

                </li>
            </ul>
        </li>
    </ul>
</nav>
<div class="main">
    <div class="mainpage tier1">
         <h2>Main Page</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="entries"> <a href="" class="view-entry">Entry 1</a>
 <a href="" class="view-entry">Entry 2</a>
 <a href="" class="view-entry">Entry 3</a>
 <a href="" class="view-entry">Entry 4</a>

        </div>
    </div>
    <div class="search-page subpage section tier2" id="search">
         <h2>Search Page</h2>

        <button class="btn-back" data-section="search">Back</button>
        <div class="entries"> <a href="" class="view-entry">Entry 1</a>
 <a href="" class="view-entry">Entry 2</a>
 <a href="" class="view-entry">Entry 3</a>
 <a href="" class="view-entry">Entry 4</a>

        </div>
    </div>
    <div class="resulting-page subpage section tier3" id="result">
         <h2>Resulting Page</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <button class="btn-back" data-section="resulting">Back</button>
    </div>
</div>

CSS

body {
    padding: 20px;
    font-family: Arial;
    color: white;
    font-size: 16px;
    line-height: 22px;
    box-sizing: border-box;
}
body.is-locked {
    overflow: hidden;
}
nav {
    margin-bottom: 20px;
}
ul {
    margin: 0;
    padding: 0;
}
ul > li > ul {
    font-size: 14px;
    text-indent: 20px;
}
h2 {
    color: white;
}
.main {
    overflow: hidden;
    width: 400px;
    height: 400px;
    background: #dedede;
    color: #666;
    position: relative;
    padding: 10px;
}
.main a {
    color: white;
}
.section {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 100%;
    left: 0;
    /*transition: top .2s;*/
    padding: 10px;
}
.section.is-active {
    top: 0;
}
.tier1 {
    z-index: 1;
}
.tier2 {
    z-index: 2;
}
.tier3 {
    z-index: 3;
}
.tier3-override {
    z-index: 4;
}
.search-page {
    background: #368C8B;
}
.resulting-page {
    background: #9B1931;
}

JavaScript

$(document).ready(function () {

    var searchActive = false,
        resultsActive = false,
        tierOverride = false;

    //only path to search page
    $('.search-link').on('click', function (e) {
        e.preventDefault();

        /**
        if searchActive && resultsActive and user clicks search -
        slideout .resulting-page but dont remove body.is-locked and set resultsActive to false
        */
        if (searchActive && resultsActive) {
            $('.resulting-page').animate({
                'top': '100%'
            }, 300);
            resultsActive = false;
            return;
        }

        /** 
        if results page is open need to enhance serach page z-index so add .tier3-override and set tierOverride variable as true so this overrride can be reverted when required */
        if (!searchActive && resultsActive) {
            $('.search-page').addClass('tier3-override');
            $('.search-page').animate({
                'top': 0
            }, 300);
            searchActive = true;
            tierOverride = true;
            return;
        }

        //otherwise show the search page
        $('.search-page').animate({
            'top': 0
        }, 300);
        searchActive = true;

    });

    //view entry on main page and search page
    $('.view-entry').on('click', function (e) {
        e.preventDefault();

        if (tierOverride && !resultsActive) {
            $('.resulting-page').animate({
                'top': 0
            }, 300);
            resultsActive = true;
        } else if (tierOverride && resultsActive) {

            //on transitionend remove .search-page.tier3-override
            $('.resulting-page').animate({
                'top': '100%'
            }, 300, function () {
                $('.search-page').removeClass('tier3-override');
                $('.resulting-page').animate({
                    'top': 0
                }, 300);
            });

            tierOverride = false;
     ...