JSFiddle - React, Tailwind, and code Playground

by mehmetatas

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
    <div class="header span12">
        <h3>Header</h3>
    </div>
</div>
<div class="row-fluid">
    <div class="top-content span12">
        Top Content
    </div>
</div>
<div class="row-fluid">
	<div class="span2">
		<div class="sidebar">
			<ul id="mainMenu" class="side-menu">
                <li class=""><a href="#menu1"><i class="icon-chevron-right"></i>Menu 1</a></li>
				<li class=""><a href="#menu2"><i class="icon-chevron-right"></i>Menu 2</a></li>
				<li class=""><a href="#menu3"><i class="icon-chevron-right"></i>Menu 3</a></li>
				<li class=""><a href="#menu4"><i class="icon-chevron-right"></i>Menu 4</a></li>
                <li class=""><a href="#menu1"><i class="icon-chevron-right"></i>Menu 1</a></li>
				<li class=""><a href="#menu2"><i class="icon-chevron-right"></i>Menu 2</a></li>
				<li class=""><a href="#menu3"><i class="icon-chevron-right"></i>Menu 3</a></li>
				<li class=""><a href="#menu4"><i class="icon-chevron-right"></i>Menu 4</a></li> 
                <li class=""><a href="#menu1"><i class="icon-chevron-right"></i>Menu 1</a></li>
				<li class=""><a href="#menu2"><i class="icon-chevron-right"></i>Menu 2</a></li>
				<li class=""><a href="#menu3"><i class="icon-chevron-right"></i>Menu 3</a></li>
				<li class=""><a href="#menu4"><i class="icon-chevron-right"></i>Menu 4</a></li> 
				<li class=""><a href="#menu4"><i class="icon-chevron-right"></i>Menu 5</a></li>    
			</ul>
			<ul id="menu1" class="side-menu">
				<li class=""><a href="#menu1_1"><i class="icon-chevron-right"></i>Menu 1.1</a></li>
				<li class=""><a href="#mainMenu"><i class="icon-chevron-right"></i>Menu 1.2</a></li>
				<li...

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.sidebar {
    position: static;
    padding: 0;
    margin-right: 0;
    margin-bottom: 20px;
    top: 0;
    width: inherit;
}
.sidebar.affix {
    position: fixed;
    top: 120px;
    width: inherit;
}
.sidebar.affix > * {
    position: fixed;
}
.sidebar.affix-bottom .side-menu {
  position: absolute;
  top: auto;
  margin-bottom: 170px;
}
.header {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100px;
    background-color: #38f;
    padding: 20px 10px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.top-content {
    background-color: #ff8;
    height: 100px;
    margin: 100px 0px 0px 0px;
    padding: 20px 10px;
}
.page {
    line-height: 100px;
    background-color: #3f8;
}

.footer {
    height: 150px;
    background-color: #fa2;
    padding: 20px 10px;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.side-menu {
    position: absolute;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
    width: inherit;
}
.side-menu > li > a {
    color: #5E5E5E;
    border: 1px solid #E5E5E5;
    display: block;
    margin: 0 0 -1px;
    padding: 8px 14px;
    text-decoration: none;
}
.side-menu > li > a:hover {
    background-color: #F5F5F5;
}
.side-menu > li > a:active {
    background-color: #fff;
}
.side-menu > li:last-child > a {
    border-radius: 0px 0px 6px 6px;
}
.side-menu > li:first-child > a {
    border-radius: 6px 6px 0px 0px;
}
.side-menu .icon-chevron-right {
    float: right;
    margin-right: 6px;
    margin-top: 10px;
    opacity: 0.25;
}
.side-menu .icon-chevron-right,
.side-menu .icon-chevron-left {
    float: right;
    margin-right: -6px;
    margin-top: 2px;
    opacity: 0.25;
}
.side-menu > li > a:hover .icon-chevron-right, 
.side-menu > li > a:hover .icon-chevron-left {
    opacity: 0.5;
}

JavaScript

var hideLeft = {
            direction: "left",
            mode: "hide"
        };
        var showRight = {
            direction: "right",
            mode: "show"
        };
        var hideRight = {
            direction: "right",
            mode: "hide"
        };
        var showLeft = {
            direction: "left",
            mode: "show"
        };

        $(function () {
            $(document).on('click', '.side-menu > li > a', function () {
                var targetId = $(this).attr('href');
                var isBack = $(this).text() === 'Back';
                if (isBack) {
                    $(this).parents('ul').effect('slide', hideRight, 500);
                    $(targetId).effect('slide', showLeft, 500);
                } else {
                    $(this).parents('ul').effect('slide', hideLeft, 500);
                    $(targetId).effect('slide', showRight, 500);
                }
                return false;
            });

            $('.side-menu[id!="mainMenu"]').hide();

            $('.sidebar').affix({
                offset: {
                    top: 80,
                    bottom: 170
                }
            });
        });