Flexbox

A navigation demo using the CSS3 flexbox property

by erick

HTML

<script src="http://dl.dropbox.com/u/1621719/development/JSFiddle/js/jquery.pageslide.min.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/1621719/development/JSFiddle/css/jquery.pageslide.css">
<link rel="stylesheet" href="http://dl.dropbox.com/u/1621719/development/JSFiddle/css/normalize-min.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

<nav>
  <ul>
    <li class="first"><a href="#">Home</a></li>
      <li class="second"><a href="#">Portfolio</a></li>
      <li class="third"><a href="#">Tutorials</a></li>
      <li class="forth"><a href="#">Gallery</a></li>
      <li class="fifth"><a href="#">About Us</a></li>
      <li class="sixth"><a href="#">Contact</a></li>
  </ul>
</nav>

<div id="content">
  <div class="wrapper"><!-- Wrapper begin -->

  </div><!-- Wrapper end -->
</div>

<!-- PageSlide begin -->
<div id="modal" style="display:none">
  <h3>Modal</h3>
  <a class="clean-gray" href="javascript:$.pageslide.close()">Close</a>
</div>
<!-- PageSlide end -->

CSS

/* Buttons */
a.clean-gray {
  text-decoration:none;
  display:block;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(top, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  color: #333;
  font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 8px 0;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  width: 150px; 
}
a.clean-gray:hover {
  background-color: #dddddd;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
  background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
  background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
  background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
  background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
  background-image: linear-gradient(top, #dddddd, #bbbbbb);
  border: 1px solid #bbb;
  border-bottom: 1px solid #999;
  cursor: pointer;
  text-shadow: 0 1px 0 #ddd; 
}
a.clean-gray:active {
  border: 1px solid #aaa;
  border-bottom: 1px solid #888;
  -webkit-box-shadow: inset 0 2px 5px #777;
  -moz-box-shadow: inset 0 2px 5px #777;
  box-shadow: inset 0 2px 5px #777;
}

/* -------------------------------------------------------|
|  Styles by Tony Montemorano of Allusis Productions      |
|  http://gplus.to/allusis - http://allusis.net          ...

JavaScript

/* Default pageslide, moves to the right */
$(".first").pageslide();
        
/* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
$(".second").pageslide({ direction: "left", modal: true });