Sliding Content
Well i don’t know about you but i like Sliding menus. Well here is a code for similar sliding menus.
The menus are smooth and easy to navigate. Though sometimes you might need to scroll page.
They are good where the content to show in each tab is little.
The tabs are easy to customize.
code for index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Motion</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/accordian.pack.js"></script>
</head>
<body onload="new Accordian('accordian',3,'header_highlight');">
<div id="header">
<h1><a href="#">motion</a></h1>
<h2>A free CSS Template by Six Shooter Media</h2>
</div>
<div id="accordian" ><!--Parent of the Accordion-->
<!--Start of each accordion item-->
<div id="test-header" >Welcome</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div>
<img src="images/img_example.jpg" alt="image example" />
<p>Hello and welcome to Motion, a free template by <a href="http://www.sixshootermedia.com/free-templates">Six Shooter Media</a>. For this template I have gone in a completely different direction and created something quite specific in its design ideals. Motion is designed for someone wishing to display a fairly small amount of information, elegantly in a single page whilst still be able to wow the user. The accordion effect used in this template is based on <a href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/">this</a> fabulous piece of work which you should refer to for any help/discussion regarding the Javascript used within this template.</p>
<p>The design is simple, but should be elegant and innovative enough to engage the user and make them want to read more about your company/product. Orange was the colour chosen for the basis of the colour scheme but you could of course easily change that.</p>
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test1-header" >Examples</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test1-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div>
<h2>List Example</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla lacus ipsum, semper eget, faucibus a, porttitor non, ante. Etiam quam. Quisque condimentum enim eget mauris.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla lacus ipsum, semper eget, faucibus a, porttitor non, ante. Etiam quam. Quisque condimentum enim eget mauris.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla lacus ipsum, semper eget, faucibus a, porttitor non, ante. Etiam quam. Quisque condimentum enim eget mauris.</li>
</ul>
<h2>Blockquote Example</h2>
<blockquote>
<em>
But the Forest <em>is</em> queer. Everything in it is very much more alive, more aware of what is going on, so to speak, than things are in the Shire. And the trees do not like strangers. They watch you. They are usually content merely to watch you, as long as daylight lasts, and don't do much. Occasionally the most unfriendly ones may drop a branch, or stick a root out, or grasp at you with a long trailer. But at night things can be most alarming, or so I am told.
</em>
</blockquote>
<h2>Image Example</h2>
<p><img src="http://www.sixshootermedia.com/ssm2/wp-content/themes/Six%20Shooter%20Media/images/logo.jpg" alt="" /> </p>
<h2>Table Example</h2>
<table>
<tbody><tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>2</td>
<td>23</td>
<td>76</td>
</tr>
<tr>
<td>54</td>
<td>233</td>
<td>1233</td>
</tr>
</tbody></table>
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test2-header" >Contact</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test2-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div>
<p>Here's an example contact form. This is not an operation form, just an example!</p>
<form action="">
<input value="Name" /><br />
<input value="Email Address" /><br />
<textarea cols="5" rows="5">
</textarea><br />
<input type="submit" />
</form>
<p>Some additional text regarding contact information.</p>
</div>
</div>
<!--End of each accordion item-->
<!--Start of each accordion item-->
<div id="test3-header" >Links</div><!--Heading of the accordion ( clicked to show n hide ) -->
<!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
<div id="test3-content"><!--DIV which show/hide on click of header-->
<!--This DIV is for inline styling like padding...-->
<div>
<p>Some links for your viewing pleasure:</p>
<ul>
<li><a href="http://www.sixshootermedia.com">Six Shooter Media</a></li>
<li><a href="http://www.sixshootermedia.com/free-templates/">Free Templates</a></li>
<li><a href="http://www.opendesigns.org">More Free Templates</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/">Simple Accordions</a></li>
<li><a href="http://www.famfamfam.com/lab/icons/silk/">FamFamFam Silk Icons</a></li>
</ul>
</div>
</div>
<!--End of each accordion item-->
</div><!--End of accordion parent-->
<div id="footer">
<p><a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/">CSS</a><br /><a href="#content">Top</a></p>
<!-- Please leave this line intact -->
<p>Design: <a href="http://www.sixshootermedia.com">Six Shooter Media</a>. <br />
AJAX: <a href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/">Simple Accordions</a>. Iconography: <a href="http://www.famfamfam.com/lab/icons/silk/">FamFamFam</a>. Sponsor: <a href="http://www.yours4money.com" rel="nofollow">Casino</a><br />
<!-- you can delete below here -->
© All your copyright information here.</p>
</div>
</body>
</html>
The code uses Java scripts and css.
You can VIEW DEMO
Download Files [Expires in 4 weeks 2 days (05:37, 17 Jan 2010)]
BlueJavax by bluejavax is licensed under a Creative Commons Attribution-Share Alike 2.5 India License.
