Slider Navigation
The Slider WordPress Theme uses a sliding navigation, created with jQuery. The state of the navigation is maintained using cookies. If you would like to reuse this navigation, here are the requirements and steps to make it happen:
Demo | Download
Requirements:
jquery.js
jquery.cookie.js
slider.js
slider.css
JavaScript and Cookies must be enabled in the browser
Step 1: Setup Page Header
Link the four required files to your page header
<link rel="stylesheet" href="slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="slider.js"></script>
Step 2: Create Slider Container Div’s
Add the slider container and slider div blocks to your page. All navigation content must be placed within the slider div.
<div id="sliderContainer">
<div id="slider">
</div>
</div>
Step 3: Create Navigation Sections
Create a navigation header and content area within the slider div from Step 2. Here is an example header and content area for blogroll navigation:
<h5><a href="javascript:;" id="blogrollLink">Blogroll</a></h5>
<div id="blogrollContent">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</div>
Make sure to use the following id format for the title link and content div.
Title id = <name>Link
Content div id = <name>Content
In the above sample code the id’s are blogrollLink and blogrollContent. Repeat Step 3 for other navigation items and content.
Step 4: Finito
Test your file to make sure the navigation works. If you encounter any issues, please post a comment to this post.
