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>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  
<div id="pages">  
  <div id="home">HOME PAGE</div>
  <div id="about">ABOUT PAGE</div>
  <div id="products">PRODUCTS PAGE</div>
  <div id="contact">CONTACT</div> 
</div>
​
<table id="nav">
  <tr>
    <td><a href="#home">HOME</a></td>
    <td><a href="#about">ABOUT</a></td>
    <td><a href="#products">PRODUCTS</a></td>
    <td><a href="#contact">CONTACT</a></td>
  </tr>
</table>
  
  
</body>
</html>
 
body{
  margin:0;
  font-family:Helvetica, Arial, sans-serif;
}
#pages > div{
  position:absolute;
  width:100%;
  height:100%;
  color:#fff;
}
#pages div + div{
    left:-100%; /* note this */
}
​
#home,    a[href="#home"]    {background:#078;}
#about,   a[href="#about"]   {background:#780;}
#products,a[href="#products"]{background:#807;}
#contact, a[href="#contact"] {background:#088;}
​
​
#nav{
  position:fixed;
  bottom:0;
  width:100%;
  table-layout:fixed;
  text-align:center;
  border-collapse:collapse;
  border:0;
}
#nav a{
  display:block;
  color:#fff;
  text-decoration:none;
  padding:10px 0;
  transition: transform 0.3s;
}
#nav a:hover{
  transform: scale(1.05);
}
​
​
Output

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

Dismiss x
public
Bin info
roXonpro
0viewers