CSS导航与滑动门的结合

<script src="/texiao/zzsc_demo/cfcoda.js" language="javascript"></script>
<style>
a:link,
a:visited {
 color: #505050;
 text-decoration: none;
 }
a:hover,
a:active {
 color: #505050;
 text-decoration: underline;
 }
#toolbarwrap {
 width: 415px;
 height: 45px;
 margin: 0 auto;
 padding: 0;
 background: #101010 url(/texiao/zzsc_demo/header.gif) repeat-x 0 0;
 border-bottom: 6px solid #790000;
 position: relative;
 }
ul.navigation {
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
ul.navigation li {
 float: left;
 padding: 0 0 0 25px;
 }
ul.navigation li a {
 float: left;
 line-height: 38px;
 border-top: 5px solid #202020;
 color: #707070;
 }
ul.navigation li a:hover {
 text-decoration: none;
 border-top: 5px solid #606060;
 color: #BCBCBC;
 }
ul.navigation li.active {
 color: #BCBCBC;;
 text-decoration: underline;
}
ul.navigation li.inactive {
 text-decoration: none;
 color: #707070;
}

#frame {
 overflow: hidden;
 margin: 0 auto;
 width: 413px;
 border-left: 1px solid #606060;
 border-right: 1px solid #606060;
 border-bottom: 1px solid #606060;
}
#scroller {
 width: 415px;
 margin: 0 auto; 
 overflow: hidden;
}
#content {
 width: 2490px;
}
.section {
 width: 405px;
 float: left;
 padding: 5px;
 text-align: center;
 background-color: #151515;
}
</style>

<div id="toolbarwrap">
 <ul id="toolbar" class="navigation">
  <li id="home-tab"><a href="#" onclick="javascript:ScrollSection('home-pane', 'scroller', 'home-pane'); return false">Home</a></li>
  <li id="about-tab"><a href="#" onclick="javascript:ScrollSection('about-pane', 'scroller', 'home-pane'); return false">About</a></li>
  <li id="scripts-tab"><a href="#" onclick="javascript:ScrollSection('scripts-pane', 'scroller', 'home-pane'); return false">Scripts</a></li>
  <li id="downloads-tab"><a href="#" onclick="javascript:ScrollSection('downloads-pane', 'scroller', 'home-pane'); return false">Downloads</a></li>
  <li id="faq-tab"><a href="#" onclick="javascript:ScrollSection('faq-pane', 'scroller', 'home-pane'); return false">FAQ</a></li>
  <li id="contact-tab"><a href="#" onclick="javascript:ScrollSection('contact-pane', 'scroller', 'home-pane'); return false">Contact</a></li>
 </ul>
</div>

<div id="frame">
 <div id="scroller">
  <div id="content">
   <div class="section" id="home-pane">
   This would be the content for the 'Home' navigation item.
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Contact</a>    <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">About</a> »
   <br />
   </div>
   <div class="section" id="about-pane">
   This would be the content for the 'About' navigation item.
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Home</a>    <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Scripts</a> »
   <br />
   </div>
   <div class="section" id="scripts-pane">
   This would be the content for the 'Scripts' navigation item.
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">About</a>    <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Downloads</a> »
   <br />
   </div>
   <div class="section" id="downloads-pane">
   This would be the content for the 'Downloads' navigation item.
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Scripts</a>    <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">FAQ</a> »
   <br />
   </div>
   <div class="section" id="faq-pane">
   This would be the content for the 'FAQ' navigation item.
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Downloads</a>    <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Contact</a> »
   <br />
   </div>
   <div class="section" id="contact-pane">
   This would be the content for the 'Contact' navigation item.
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">FAQ</a>    <a href="javascript:ScrollArrow('right','toolbar','scroller','home-pane');">Home</a> »
   <br />
   </div>
  </div>
 
 </div>
</div>