Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<title>Full-width justified nav</title>
<h1>Full-width justified nav</h1>
<ol>
  <li>Home
  <li class=hover>Section two
  <li>Section three
  <li class=active>Another section
  <li>A section with a longer name
  <li>Section six
  <li>This is section seven
  <li>Section 8
</ol>
 
ol {
  display: table;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #222;
  text-align: center;
  white-space: nowrap;
  background-color: #f1f1f1;
  background-image: linear-gradient(#f8f8f8,rgba(248,248,248,0));
  box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 0 0 2px rgba(255,255,255,.5);
  cursor: pointer;
}
li {
  overflow: hidden;
  display: table-cell;
  padding: 10px;
  text-overflow: ellipsis;
  border: 1px solid #ddd;
  border-bottom-color: #ccc;
  border-right: 0;
}
li:first-child {
  border-radius: .2em 0 0 .2em;
}
li:last-child {
  border-right: 1px solid #ddd;
}
li:hover, .hover {
  color: #000;
  background-color: #fcfcfc;
}
li.active {
  color: #fff;
  background-color: #0c63bc;
  border-color: #0c63bc;
}
.active + li {
  border-left-color: #0c63bc;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lauksteinpro
0viewers