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 class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  #navBox { width:200px; background:#f1f1f1; border:1px solid #CCC; display:none; position:absolute; }
  p { padding:20px }
  a.shownav { white-space:nowrap }
</style>
</head>
<body>
  <div id="navBox">
    <ul>
      <li><a href="#">Index Page</a></li>
      <li><a href="#">Gallery Page</a></li>
      <li><a href="#">Contact Page</a></li>
    </ul>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere sagittis nisl, eu euismod lectus feugiat quis. Suspendisse ut libero orci. In ullamcorper tincidunt neque, a convallis nisl imperdiet non. Mauris egestas commodo dapibus. Sed a commodo quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tempus tortor facilisis lacus tristique eget condimentum tellus rhoncus. Pellentesque tellus libero, tincidunt quis ultrices nec, euismod id purus. Proin mattis convallis purus, non pulvinar nisi faucibus vitae. Sed dictum orci in enim eleifend pharetra. Fusce consectetur lacinia tristique. Cras diam lacus, accumsan vitae aliquet eu, condimentum id velit. Donec venenatis dui a velit porttitor nec ultricies nunc adipiscing. Praesent tempor mollis tortor, in convallis diam volutpat ut. <a href="#" class="shownav">Show Nav</a></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere sagittis nisl, eu euismod lectus feugiat quis. Suspendisse ut libero orci. In ullamcorper tincidunt neque, a convallis nisl imperdiet non. Mauris egestas commodo dapibus. Sed a commodo quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tempus tortor facilisis lacus tristique eget condimentum tellus rhoncus. Pellentesque tellus libero, tincidunt quis ultrices nec, euismod id purus. Proin mattis convallis purus, non pulvinar nisi faucibus vitae. Sed dictum orci in enim eleifend pharetra. Fusce consectetur lacinia tristique. Cras diam lacus, accumsan vitae aliquet eu, condimentum id velit. Donec venenatis dui a velit porttitor nec ultricies nunc adipiscing. Praesent tempor mollis tortor, in convallis diam volutpat ut. <a href="#" class="shownav">Show Nav</a></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere sagittis nisl, eu euismod lectus feugiat quis. Suspendisse ut libero orci. In ullamcorper tincidunt neque, a convallis nisl imperdiet non. Mauris egestas commodo dapibus. Sed a commodo quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tempus tortor facilisis lacus tristique eget condimentum tellus rhoncus. Pellentesque tellus libero, tincidunt quis ultrices nec, euismod id purus. Proin mattis convallis purus, non pulvinar nisi faucibus vitae. Sed dictum orci in enim eleifend pharetra. Fusce consectetur lacinia tristique. Cras diam lacus, accumsan vitae aliquet eu, condimentum id velit. Donec venenatis dui a velit porttitor nec ultricies nunc adipiscing. Praesent tempor mollis tortor, in convallis diam volutpat ut. <a href="#" class="shownav">Show Nav</a></p>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers