Cross-Browser: Apple-Like Navigation

by drublic

HTML

<script src="https://raw.github.com/doctyper/flexie/51453fca46a8def3778afc1f70e956797432bd0e/src/flexie.js"></script>
<nav id="navi">
<ul id="list">
    <li><a href="#">Store</a></li>
    <li><a href="#">Mac</a></li>
    <li><a href="#">iPod</a></li>
    <li><a href="#">iPhone</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">iPhone</a></li>
</ul>
<form action="#" method="post">
    <label for="s">Search</label>
    <input type="search" name="search" id="s">
    <input type="submit">
</form>
</nav>

CSS

nav {
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    background: #777;
    margin: 10px;
    border: 1px solid #707070;
    border-bottom-color: #444;
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
    border-radius: 4px;
}
ul {
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    width: -webkit-flex(1);
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
li {
    text-align: center;
    width: -webkit-flex(1);
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
li a {
    display: block;
    padding: 9px 0;
    border-left: 1px solid #555;
    box-shadow: inset 0 17px 1px 0 rgba(255,255,255,.2);
    color: #fff;
    text-decoration: none;
    font: .9em sans-serif;
    text-shadow: 0 -1px 0 #333;
}
li a:visited { color: #fff; }
li a:hover {
    background: #444;
    box-shadow: inset 0 17px 1px 0 rgba(255,255,255,.05);
}
li:first-child a { border-left: 0; }

form {
    box-shadow: inset 0 17px 1px 0 rgba(255,255,255,.2);
    border-left: 1px solid #333;
}

input[type="search"] {
    width: 100px;
    margin: 7px 10px;
    -webkit-transition: all .3s ease-out;
    background: #333;
}

input[type="search"]:focus {
    width: 200px;
}

label,
input[type="submit"] {
    position: absolute;
    left: 999em;
}

JavaScript

!function() {
  var box = new Flexie.box({
    target : document.getElementById("navi")
  });
    
    
  var box2 = new Flexie.box({
    target : document.getElementById("list")
  });

}();