<!DOCTYPE html>
<html>
<head>
<!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<script>
$(document).ready(function()
{
// Scroll the whole document
$.localScroll();
});
</script>
<style >
#navigation, #content,.section{
padding:0;
margin:0;
list-style:none;
}
#content{
overflow:hidden;
width:630px;
background-color:white;
position:relative;
height:400px;
float:left;
}
#content h2{
color:#993333;
margin:20px 0pt;
}
#content a{
color:#777;
font-weight:bolder;
text-decoration:none;
}
#navigation{
float:left;
width:110px;
height:400px;
background-color:#5B739C;
}
#navigation .sup{
margin:26px 10px;
font-size:14px;
}
#navigation ul{
margin:5px 0;
list-style:circle;
padding-left:15px;
}
#navigation a{
color:white;
font-weight:bolder;
text-decoration:none;
}
#navigation .sup li{
margin: 3px 0 !important;
margin:-4px 0;
font-size:10px;
}
#navigation a.scrolling{
color:#933;
}
.section{
width:1900px;
position:relative;
}
.section .sub{
position:relative;
float:left;
padding:9px 21px 42px 45px;
width:567px;
height:352px;
}
.section .sub p{
width:550px;
margin:16px 0;
font-size:85%;
line-height:1.4em;
}
.section .next, .section .prev{
font-size:18px;
position:absolute;
bottom:15px;
letter-spacing:-2px;
}
.section .next{
right:30px;
}
.section .prev{
left:30px;
}
.message{
background:#EEE;
border:1px solid #999;
color:#333;
font-size:12px;
padding:1px;
position:absolute;
left:11px;
}
#first{
top:484px !important;
top:498px;
}
#second{
top:503px !important;
top:517px;
}
body{
padding: 0 5px;
font-family: Verdana, sans-serif;
background-color: #DDD;
}
ul, li, h3, h2, h1, p{
padding:0;
margin:0;
list-style:none;
}
.sidebar{
position:absolute;
right:5px;
top:15px;
}
#links{
border:1px solid black;
/*width:210px;*/
padding:10px;
background-color:white;
}
#links h3{
color:#933;
}
#links ul{
padding: 8px 0 3px 20px;
}
#links li{
list-style-type:circle;
}
#links a{
color:#69C;
}
h1{
margin:20px 0;
color:#5B739C;
}
h1 strong{
font-size:13px;
color:#777;
}
h2.title{
color:#933;
margin-bottom:10px;
text-align:right;
}
.clear{
clear:left;
}
</style>
</head>
<body>
<h1>Scrolling Horizontally and Vertically</h1>
<ul id="navigation">
<li >
<a href="#section1">Section 1</a>
<ul>
<li><a href="#section1b">Section 1-b</a></li>
<li><a href="#section1c">Section 1-c</a></li>
</ul>
</li>
<li >
<a href="#section2">Section 2</a>
<ul>
<li><a href="#section2b">Section 2-b</a></li>
<li><a href="#section2c">Section 2-c</a></li>
</ul>
</li>
</ul>
<div id="content">
<div >
<ul>
<li id="section1">
<h2>Section 1</h2>
<p>Hello. This is section 1. Click the arrow to advance.</p>
<a href="#section1b" >>></a>
</li>
<li id="section1b">
<h2>Section 1-b</h2>
<p>This is section 1 part b. Click the arrow to advance.</p>
<a href="#section1" ><<</a>
<a href="#section1c" >>></a>
</li>
<li id="section1c">
<h2>Section 1-c</h2>
<p>This is section 1 part c. Click the arrow to go back, or click on the menu to go elsewhere.</p>
<a href="#section1b" ><<</a>
</li>
</ul>
</div>
<div >
<ul>
<li id="section2" >
<h2>Section 2</h2>
<p>Hi</p>
<a href="#section2b" >>></a>
</li>
<li id="section2b">
<h2>Section 2-b</h2>
<p>Hello again.</p>
<a href="#section2" ><<</a>
<a href="#section2c" >>></a>
</li>
<li id="section2c">
<h2>Section 2-c</h2>
<p>Hello for the last time.</p>
<a href="#section2b" ><<</a>
</li>
</ul>
</div>
</div>
</body>
</html>
<html>
<head>
<!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<script>
$(document).ready(function()
{
// Scroll the whole document
$.localScroll();
});
</script>
<style >
#navigation, #content,.section{
padding:0;
margin:0;
list-style:none;
}
#content{
overflow:hidden;
width:630px;
background-color:white;
position:relative;
height:400px;
float:left;
}
#content h2{
color:#993333;
margin:20px 0pt;
}
#content a{
color:#777;
font-weight:bolder;
text-decoration:none;
}
#navigation{
float:left;
width:110px;
height:400px;
background-color:#5B739C;
}
#navigation .sup{
margin:26px 10px;
font-size:14px;
}
#navigation ul{
margin:5px 0;
list-style:circle;
padding-left:15px;
}
#navigation a{
color:white;
font-weight:bolder;
text-decoration:none;
}
#navigation .sup li{
margin: 3px 0 !important;
margin:-4px 0;
font-size:10px;
}
#navigation a.scrolling{
color:#933;
}
.section{
width:1900px;
position:relative;
}
.section .sub{
position:relative;
float:left;
padding:9px 21px 42px 45px;
width:567px;
height:352px;
}
.section .sub p{
width:550px;
margin:16px 0;
font-size:85%;
line-height:1.4em;
}
.section .next, .section .prev{
font-size:18px;
position:absolute;
bottom:15px;
letter-spacing:-2px;
}
.section .next{
right:30px;
}
.section .prev{
left:30px;
}
.message{
background:#EEE;
border:1px solid #999;
color:#333;
font-size:12px;
padding:1px;
position:absolute;
left:11px;
}
#first{
top:484px !important;
top:498px;
}
#second{
top:503px !important;
top:517px;
}
body{
padding: 0 5px;
font-family: Verdana, sans-serif;
background-color: #DDD;
}
ul, li, h3, h2, h1, p{
padding:0;
margin:0;
list-style:none;
}
.sidebar{
position:absolute;
right:5px;
top:15px;
}
#links{
border:1px solid black;
/*width:210px;*/
padding:10px;
background-color:white;
}
#links h3{
color:#933;
}
#links ul{
padding: 8px 0 3px 20px;
}
#links li{
list-style-type:circle;
}
#links a{
color:#69C;
}
h1{
margin:20px 0;
color:#5B739C;
}
h1 strong{
font-size:13px;
color:#777;
}
h2.title{
color:#933;
margin-bottom:10px;
text-align:right;
}
.clear{
clear:left;
}
</style>
</head>
<body>
<h1>Scrolling Horizontally and Vertically</h1>
<ul id="navigation">
<li >
<a href="#section1">Section 1</a>
<ul>
<li><a href="#section1b">Section 1-b</a></li>
<li><a href="#section1c">Section 1-c</a></li>
</ul>
</li>
<li >
<a href="#section2">Section 2</a>
<ul>
<li><a href="#section2b">Section 2-b</a></li>
<li><a href="#section2c">Section 2-c</a></li>
</ul>
</li>
</ul>
<div id="content">
<div >
<ul>
<li id="section1">
<h2>Section 1</h2>
<p>Hello. This is section 1. Click the arrow to advance.</p>
<a href="#section1b" >>></a>
</li>
<li id="section1b">
<h2>Section 1-b</h2>
<p>This is section 1 part b. Click the arrow to advance.</p>
<a href="#section1" ><<</a>
<a href="#section1c" >>></a>
</li>
<li id="section1c">
<h2>Section 1-c</h2>
<p>This is section 1 part c. Click the arrow to go back, or click on the menu to go elsewhere.</p>
<a href="#section1b" ><<</a>
</li>
</ul>
</div>
<div >
<ul>
<li id="section2" >
<h2>Section 2</h2>
<p>Hi</p>
<a href="#section2b" >>></a>
</li>
<li id="section2b">
<h2>Section 2-b</h2>
<p>Hello again.</p>
<a href="#section2" ><<</a>
<a href="#section2c" >>></a>
</li>
<li id="section2c">
<h2>Section 2-c</h2>
<p>Hello for the last time.</p>
<a href="#section2b" ><<</a>
</li>
</ul>
</div>
</div>
</body>
</html>