JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="w">

        

        <div id="pagebody">

            <header id="toolbarnav">
                <a href="#navmenu" id="menu-btn">Button</a>
                <h1>Fixed</h1>
            </header>

            

            <section id="content" class="clearfix">

                <h2>Welcome to the Mobile Site!</h2>

                

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem sapien, auctor placerat varius sed, aliquam et nibh. Quisque posuere erat nec tortor vestibulum id dignissim quam ornare. Suspendisse sapien ante, pellentesque non interdum ac, feugiat at eros. Morbi lacus augue, blandit ac porta a, rutrum quis tellus. Nam ut velit lorem, sit amet placerat lorem.</p>

          

                

                <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam convallis lacinia dapibus. Sed nunc enim, ultrices nec suscipit ac, malesuada pharetra diam. Etiam massa orci, pellentesque nec lacinia eu, vulputate non est. Donec faucibus, tellus eu ultrices lobortis, leo nisl iaculis elit, id dictum arcu massa in nibh. Nulla auctor vehicula rutrum. Vivamus mi mauris, molestie sit amet placerat ac, tempor vitae nisi. Fusce pharetra eleifend aliquam. Cras ultricies orci sit amet ligula tempor pulvinar.</p>

                

                <p>Vivamus consectetur nulla vel neque accumsan bibendum lacinia nibh venenatis. Morbi placerat tempor nunc, eu congue metus pellentesque vitae.</p>



                <p>Maecenas lacinia commodo venenatis. Sed nec mauris sapien. Donec eget justo sapien, id elementum magna. Integer et orci quis urna tempus eleifend eget eu nulla. Quisque interdum porttitor tincidunt. Nulla ornare dolor elit, eu adipiscing felis. Nulla viverra blandit bibendum. Mauris non tellus lacus.</p>

                

                <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam convallis lacinia...

CSS

* { 
    margin: 0; 
    padding: 0; 
}

body { 
    font-size: 62.5%; 
    line-height: 1; 
}


ul,ol,h1,h2,h3,h4,h5,h6,p { display: block; }

#w { 
    position: relative; 
    overflow-x: hidden; 
    overflow-y: hidden; 
}

/** @group core body **/
#w #pagebody { 
    position: relative; 
    left: 0; 
    max-width: 640px; 
    min-width: 320px; 
    z-index: 99999; 
}

#w #navmenu { 
    background: #eee; 
    height: 100%; 
    display: block; 
    position: fixed; 
    width: 300px; 
    left: 0px; 
    top: 0px; 
    z-index: 0;  
}

/** @group header **/
#w #pagebody header#toolbarnav { 
    display: block; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: 9999; 
    background: #ddd ; 
    height: 44px; 
    width: 100%; 
    max-width: 640px; 
}

#w #pagebody header#toolbarnav h1 { 
    text-align: center; 
    padding-top: 10px; 
    padding-right: 40px; 
    color: #333; 
    font-weight: bold; 
    font-size: 2.1em; 
}


#w #pagebody header #menu-btn { 
    display: block; 
    float: left; 
    width: 53px; 
    height: 30px; 
    margin-top: 6px; 
    margin-left: 8px;
}

#w #pagebody #content { 
    display: block; 
    background: #fff; 
    padding: 5px 12px; 
    margin-top: 40px; 
    min-height: 550px; 
    height: 100%; 
    z-index: 9999; 
}



#w #pagebody #content p { 
    font-size: 1.4em; 
    line-height: 1.6em; 
    margin-bottom: 15px; 
    color: #444; 
}


/** @group nav menu **/
#w #navmenu header { 
    display: block; 
    background: #ddd; 
    height: 44px; 
}

#w #navmenu header h1 { 
    text-align: center; 
    padding-top: 10px; 
    color: #333; 
    font-weight: bold; 
    font-size: 2.1em; 
}

#w #navmenu ul { 
    list-style: none; 
    background: #eee; 
    height: 100%; 
}

#w #navmenu ul li { display: block; }
#w #navmenu ul li a { 
    position: relative; 
    display: block; 
    border-bottom: 1px solid #ddd; 
    padding: 14px 11px; 
    font-weight: bold; 
    color: #333; 
    font-size:...

JavaScript

$(document).ready(function(){
    var pagebody = $("#pagebody");
    var themenu  = $("#navmenu");
    var topbar   = $("#toolbarnav");
    var content  = $("#content");
    var viewport = {
        width  : $(window).width(),
        height : $(window).height()
    };
    // retrieve variables as 
    // viewport.width / viewport.height
    
    function openme() { 
        $(function () {
            topbar.animate({
               left: "290px"
            }, { duration: 300, queue: false });
            pagebody.animate({
               left: "290px"
            }, { duration: 300, queue: false });
        });
    }
    
    function closeme() {
        var closeme = $(function() {
            topbar.animate({
                left: "0px"
            }, { duration: 180, queue: false });
            pagebody.animate({
                left: "0px"
            }, { duration: 180, queue: false });
        });
    }

    // checking whether to open or close nav menu
    $("#menu-btn").live("click", function(e){
        e.preventDefault();
        var leftval = pagebody.css('left');
        
        if(leftval == "0px") {
            openme();
        }
        else { 
            closeme(); 
        }
    });
    
    // loading page content for navigation
    $("a.navlink").live("click", function(e){
        e.preventDefault();
        var linkurl     = $(this).attr("href");
        var linkhtmlurl = linkurl.substring(1, linkurl.length);
        
        var imgloader   = '<center style="margin-top: 30px;"><img src="img/preloader.gif" alt="loading..." /></center>';
        
        closeme();
        
        $(function() {
            topbar.css("top", "0px");
            window.scrollTo(0, 1);
        });
        
        content.html(imgloader);
        
        setTimeout(function() { content.load(linkhtmlurl, function() { /* no callback */ }) }, 1200);
    });
});