Scrollable Navigational System

HTML

<!-- main navigator -->
  <ul id="main_navi">
 <li class="active">
 <img src="images/seagram-building-thumb.jpg"/>
  <strong>Seagram Building</strong>
  New York City, United States
  </li>
  <li>
  <img src="images/barcelona-pavilion-thumb.jpg"/>
  <strong>Barcelona Pavilion</strong>
  Barcelona, Spain
  </li>
 <li>
  <img src="images/new-national-gallery-thumb.jpg" />
  <strong>New National Gallery</strong>
  Berlin, Germany
  </li>
  </ul>
<!-- root element for the main scrollable -->
  <div id="main">
 <!-- root element for pages -->
 <div id="pages">
 <!-- page #1 -->
  <div class="page">
 <!-- sub navigator #1 -->
  <div class="navi"></div>
 <!-- inner scrollable #1 -->
  <div class="scrollable">
 <!-- root element for scrollable items -->
  <div class="items">
 <!-- items  -->
  <div class="item">
  <img src="images/seagram-building-01.jpg" />
  </div>
  <div class="item">
  <img src="images/seagram-building-02.jpg" />
 </div>
  <div class="item">
  <img src="images/seagram-building-03.jpg" />
  </div>
 </div>
 </div>
 </div>
 <!-- page #2 -->
  <div class="page">
 <div class="navi"></div>
 <!-- inner scrollable #2 -->
  <div class="scrollable">
 <!-- root element for scrollable items -->
  <div class="items">
 <!-- items on the second page -->
  <div class="item">
  <img src="images/barcelona-pavilion-01.jpg" />
  </div>
  <div class="item">
  <img src="images/barcelona-pavilion-02.jpg" />
  </div>
  <div class="item">
 <img src="images/barcelona-pavilion-03.jpg" />
  </div>
 </div>
 </div>
 </div>
 <!-- page #3 -->
  <div class="page">
 <div class="navi"></div>
 <!-- inner scrollable #3 -->
  <div class="scrollable">
 <!-- root element for scrollable items -->
  <div class="items">
 <!-- items on the first page -->
  <div class="item">
 <img src="images/new-national-gallery-01.jpg" />
  </div>
  <div class="item">
  <img src="images/new-national-gallery-02.jpg" />
  </div>
  <div class="item">
  <img src="images/new-national-gallery-03.jpg" />
  </div>
 </div>
 </div>
 </div>
 </div>
</div>

CSS - Standalone

a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}

CSS - Scrollable

 /* main vertical scroll */
 #main {
  position:relative;
  overflow:hidden;
  height: 450px;
 }
 
 /* root element for pages */
 #pages {
  position:absolute;
  height:20000em;
 }
 
 /* single page */
 .page {
  padding:10px;
  height: 450px;
  background:#222 url(../images/bg.png) 0 0 repeat-x;
  width:520px;
 }
 
 /* root element for horizontal scrollables */
 .scrollable {
  position:relative;
  overflow:hidden;
  width: 510px;
  height: 450px;
 }
 
 /* root element for scrollable items */
 .scrollable .items {
  width:20000em;
  position:absolute;
  clear:both;
 }
 
 /* single scrollable item */
 .item {
  float:left;
  cursor:pointer;
  width:500px;
  height:450px;
  padding:10px;
 }
 
 /* main navigator */
 #main_navi {
  float:left;
  padding:0px !important;
  margin:0px !important;
 }
 
 #main_navi li {
  background-color:#333;
  border-top:1px solid #666;
  clear:both;
  color:#FFFFFF;
  font-size:12px;
  height:75px;
  list-style-type:none;
  padding:10px;
  width:190px;
  cursor:pointer;
 }
 
 #main_navi li:hover {
  background-color:#444;
 }
 
 #main_navi li.active {
  background-color:#555;
 }
 
 #main_navi img {
  float:left;
  margin-right:10px;
 }
 
 #main_navi strong {
  display:block;
 }
 
 #main div.navi {
  margin-left:250px;
  cursor:pointer;
 }

CSS - Scrollable Navigator

.scrollable {
 float:left; 
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
 display:block;
 width:18px;
 height:18px;
 background:url(../images/left.png) no-repeat;
 float:left;
 margin:43px 10px;
 cursor:pointer;
 font-size:1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
 background-position:0px -18px;  
}

/* disabled navigational button */
a.disabled {
 visibility:hidden !important;  
}

/* next button uses another background image */
a.next, a.nextPage {
 background-image:url(../images/right.png);
 clear:right; 
}  

JavaScript

$(document).ready(function() {
$("#main").scrollable({
 vertical: true,
 keyboard: 'static',
 onSeek: function(event, i) {
  horizontal.eq(i).data("scrollable").focus();
 }
}).navigator("#main_navi");
var horizontal = $(".scrollable").scrollable({ circular: true }).navigator(".navi");
horizontal.eq(0).data("scrollable").focus();
});

jquery.tools.min.js

Click to Download

Example

Click to DEMO