Skip to content

Instantly share code, notes, and snippets.

@jufemaiz

jufemaiz/danny-navigation.html

Created April 17, 2012 12:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jufemaiz/2405597 to your computer and use it in GitHub Desktop.
Save jufemaiz/2405597 to your computer and use it in GitHub Desktop.
Download ZIP
Navigation - Resize elements to fit space with even padding around them
Raw
danny-navigation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Testing the Awesomeness</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<style type="text/css" media="screen">
body { margin: 0; padding: 0; }
/* Navigation
----------------------------------------- */
.nav {
background: url('../images/nav_bg.png') repeat-x;
}
.nav ul {
width:100%;
padding:0;
margin:0;
overflow: hidden;
background: #eee url('../images/nav_seperator.png') no-repeat right top;
}
.nav ul li {
float:left;
display:inline-block;
white-space: nowrap;
background: #999 url('../images/nav_seperator.png') no-repeat left top;
}
.nav ul li a {
color: #fff;
font-family: 'Open Sans Bold', sans-serif;
font-size:1.1em;
text-decoration: none;
display: block;
padding:16px 15px;
}
.nav ul li a.active,
.nav ul li a:hover {
background:#346d91 url('../images/nav_seperator_active.png') no-repeat left top;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class='container nav'>
<div class='row'>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Quick Solve</a></li>
<li><a href="/">Solution Wizard</a></li>
<li><a href="/">Dictionary</a></li>
<li><a href="/">Online Shop</a></li>
<li><a href="/">Crossword Help Forum</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
/* Menu Alignment */
$(function(){
var restackNavigation = function(){
$('.nav ul').each( function(){
var container = $(this);
var nav_items = container.children('li');
var container_width = container.width();
var nav_items_width = 0;
nav_items.each(function(){ nav_items_width += $(this).outerWidth(); });
var padding = Math.floor((container_width - nav_items_width) / nav_items.length);
var first_padding = padding + (container_width - nav_items_width) % nav_items.length;
nav_items.each(function(index){
var el = $(nav_items[index]);
el.css({'text-align':'center'})
if(index === 0){
el.css({'width':el.width()+first_padding});
} else {
el.css({'width':el.width()+padding});
}
});
});
};
restackNavigation();
$(window).resize(function(){restackNavigation();});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment