Flexbox Nav

The second installment of the flexbox nav experiment

by erick

HTML

<nav>
  <ul class="primary-nav">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
  </ul>
</nav>

<div class="content">
    <p>Move your mouse over the nav bar and you will notice each list-item will stretch to meet a set width for the hovered state, and simultaneously reduce the width of the surrounding list-items. This is called a flexbox, or boxflex. It allows us to have to do a lot less math (such as figuring out what the padding or whatever else would add to the width or height of a particular element). Another cool feature of this property is that it matches heights of other elements. If you'd like to learn more feel free to fork this and play around with it. Also consider reading up on it a bit more here: <a href="http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/" target="_blank">Smashing Magazine - CSS3 Flexible Box Layout Explained</a></p>
  <p>This is a CSS3 experiment for the Flexbox property. It currently has limited browser support (obviously) so you will want to view this in a webkit browser like Safari, Chrome, or their mobile versions. Firefox has some support, but I havent figured out how to make it work quite as well, and Internet Explorer just completely hates the idea at this point (again.. obviously)</p>
</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$("ul.primary-nav li a").hover(
  function () {
    $(this).addClass('select');
  }, 
  function () {
    $(this).removeClass('select');
  }
  );

</script>

CSS

@font-face {
 font-family: Roboto-Condensed;
 src: url("http://dl.dropbox.com/u/1621719/development/JSFiddle/fonts/Roboto-Condensed.eot")
}
@font-face {
 font-family: Roboto-Condensed;
 src: url("http://dl.dropbox.com/u/1621719/development/JSFiddle/fonts/Roboto-Condensed.ttf")
}
@font-face {
 font-family: Roboto-Light;
 src: url("http://dl.dropbox.com/u/1621719/development/JSFiddle/fonts/Roboto-Light.eot")
}
@font-face {
 font-family: Roboto-Light;
 src: url("http://dl.dropbox.com/u/1621719/development/JSFiddle/fonts/Roboto-Light.ttf")
}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,Runkbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
body {
  background: #3f6891; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #3f6891 0%, #000000 99%); /*...