Skip to content

Instantly share code, notes, and snippets.

@atomicpages
Created September 19, 2013 15:56
Show Gist options
  • Save atomicpages/6625589 to your computer and use it in GitHub Desktop.
Save atomicpages/6625589 to your computer and use it in GitHub Desktop.
<p>Add an unlimited number of items to the navigation and the spacing will <em>always</em> fit the given viewport.</p>
<p class="warning">This is <strong>not</strong> compatible < IE 8</p>
<div class="wrapper">
<nav class="container">
<div class="nav inner">
<ul>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Foo</a></li>
</ul>
</div>
</nav>
</div>
var $items = $(".nav > ul").children().length;
$(".nav > ul > li").width(100 / $items + "%");
@import "compass/css3";
body { font: normal 14px Arial, sans-serif; }
.warning {
background: lighten(yellow, 35%);
padding: 5px;
}
.wrapper {
width: 100%;
background-color: #eeeeee;
@include filter-gradient(#eeeeee, #cccccc, vertical);
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, #eeeeee 0%,#cccccc 100%));
nav {
.nav {
ul {
list-style: none;
margin: 0;
padding: 0;
display: table;
li {
// float: left;
display: table-cell;
text-align: center;
white-space: nowrap;
width: 16.6667%;
line-height: 2.4;
@include transition(background-color, 0.3s);
&:hover {
background-color: rgba(255, 255, 255, 0.4);
}
a {
text-decoration: none;
color: darken(#dbdbdb, 50%);
@include text-shadow(0 1px 1px white);
font: {
size: 20px;
weight: bold;
};
&:hover { text-decoration: none; }
}
}
&:after {
clear: both;
display: block;
height: 0;
visibility: hidden;
content: "\0020";
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment