Skip to content

Instantly share code, notes, and snippets.

@technoknol

technoknol/index.html

Last active January 3, 2016 13:59
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 technoknol/8472852 to your computer and use it in GitHub Desktop.
Save technoknol/8472852 to your computer and use it in GitHub Desktop.
Download ZIP
Full Width Bars, Infinite Length Navigation Bars
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<!--
Author : TechnoKnol
Blog : http://technoknol.blogspot.com
Date : 17 Jan 2014
-->
<meta name="description" content="Infinite Width Bars,full width bars,css3 bars,full width navigation bars" />
<style type="text/css">
body {
overflow-x :hidden;
}
.address {
border:1px dashed #f00;
width:450px;
margin:0 auto ;
}
.address ul {
background: #0fc;
position : relative ;
padding: 10px ;
text-align:center;
}
.address ul li {
display:inline-block;
background : #ffa;
color:#f0f;
padding: 3px 5px;
}
.address ul.nav1:after {
content: '';
background: #0f0 ;
position : absolute ;
width:9999px;
top:0;
bottom:0;
left:100%;
}
.address ul.nav2:before {
content: '';
background: #0f0 ;
position : absolute ;
width:9999px;
top:0;
bottom:0;
right:100%;
}
</style>
</head>
<body>
<div class="address">
<ul class="nav1">
<li>Hey</li>
<li>I</li>
<li>have</li>
<li>full</li>
<li>width</li>
<li>Background</li>
<li>on RIGHT side </li>
</ul>
</div>
<br/>
<div class="address">
<ul class="nav2">
<li>Hey</li>
<li>I</li>
<li>have</li>
<li>full</li>
<li>width</li>
<li>Background</li>
<li>on RIGHT side </li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment