JSFiddle - React, Tailwind, and code Playground

by Grimtork

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">

  <body>

    <div class="viewport">
      <div class="frame">
        <div id="menu" class="menu nav-collapse collapse width">
          <div class="collapse-inner">
            <div class="navbar navbar-inverse">
                <div class="menu_titlenav nav-tabs nav-stacked">
                    <h3>Menu</h3>
                </div>
            </div>
                <div class="row well menu_entry">
                    <div class="span2 search_ico_ina"></div>
                    <div class="span9 search_ent_ina">Recherche</div>
                </div>
                <div class="row well menu_entry" >
                    <div class="span2 pro_ico_ina"></div>
                    <div class="span9 pro_ent_ina">Espace PRO</div>   
                </div>
                <div class="row well menu_entry">
                    <div class="span2 account_ico_ina"></div>
                    <div class="span9 account_ent_ina">Mon Compte</div>
                </div>
          </div>
        </div>

        <div class="view">
          <div class="navbar navbar-inverse">
            <div class="navbar-inner">
                <img src="<?=$this->configuration->annuaire->mobile->root_path?>/images/mobile/design/display_menu.png" class="btn btn-navbar" data-toggle="collapse" data-target="#menu">
            </div>
          </div>
          <div id="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et lacus at justo facilisis vehicula ut et felis. Phasellus ut libero pretium nibh sollicitudin vulputate a sed urna. Ut dictum odio a est sodales blandit. Integer vitae nisl nisi, quis vehicula diam. Sed nec erat dictum nisi suscipit placerat. Quisque ligula enim, porttitor at sollicitudin eu, aliquet et justo. Ut eu dolor metus. Etiam vitae justo at metus auctor...

CSS

body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body .viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

body .viewport .frame {
  position: absolute;
  width: 200%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0; 
}

body .viewport .frame .navbar .navbar-inner {
  border-radius: 0;
  padding-left: 5px; 
}

body .viewport .frame .menu {
  height: 100%;
  /* background-color: #3D6AA2; */ 
}

body .viewport .frame .menu.collapse {
  float: left;
  height: 100% !important;
  width: auto; 
}

body .viewport .frame .menu.collapse.height {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease; 
}

body .viewport .frame .menu.collapse.width {
  position: relative;
  width: 0;
  overflow: hidden;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease; 
}

body .viewport .frame .menu.collapse.in.width {
  width: auto; 
}

body .viewport .frame .menu.collapse.in.height {
  height: auto; 
}

body .viewport .frame .menu .collapse-inner {
  position: relative;
  width: 250px;
  height: 100%; 
}

body .viewport .frame .menu .navbar .navbar-inner {
  text-align: center;
  color: grey;
  font-size: 1.2em;
  line-height: 38px; 
}

body .viewport .frame .menu .nav-stacked {
  padding: 0 10px; 
}

body .viewport .frame .view {
  width: 50%;
  height: 100%;
  overflow: hidden; 
}

body .viewport .frame .view .navbar .navbar-inner .btn-navbar {
  display: block;
  float: left; 
}

body .viewport .frame .view #content {
  margin: auto 15px;
  text-align: justify; 
}

.menu_entry:hover .account_ico_ina{
  background-position: -77px -2px;
}

.menu_entry:hover .search_ico_ina{
  background-position: -140px -2px;
}

.menu_entry:hover .pro_ico_ina{
 ...

JavaScript

$(window).load(function(){       
        $("#menu a").click(function(e) {
          $('#menu').collapse('hide');
        });     
});