Originally posted by: Quintox
How do I put this on my site? It says DL and refer to the demo.html but it doesn't tell you shit ('scuse me)
http://www.javascriptkit.com/s...pt2/tabset/index.shtml
it's pretty self-explanatory dude!
unzip everything into your site's root or wherever you want to keep it but make sure you keep all relative paths the same (ie: the .js and .css files in the same directory as demo.htm and the images in the '/images' directory
it works!
to customize it, open demo.htm and take a look at the code. the 2 <HREFs> at the top tell the page where the .js and .css files are found (you can change that if you want just make sure it points to the files)
to create your menu just copy and paste this part:
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="
http://www.javascriptkit.com"><span>Home</span></a></li>
<li><a href="
http://www.javascriptkit.com" rel="joey"><span>Joey</span></a></li>
<li><a href="
http://www.javascriptkit.com" rel="suzy"><span>Suzy</span></a></li>
<li><a href="
http://www.javascriptkit.com" rel="george"><span >George</span></a></li>
<li><a href="
http://www.javascriptkit.com"><span>Contact Us</span></a></li>
</ul>
</div>
and change the links and captions to whatever you want
then copy and paste this part:
<!-- Sub Menus container. Do not remove -->
<div id="dolphin_inner">
<div id="joey" class="innercontent">
Joey's statue of a white dog was originally given to Jennifer Aniston as a good luck present from her best friend.
</div>
<div id="suzy" class="innercontent">
During this period, then-locally famous Suzy Waud anchored evening broadcasting.
</div>
<div id="george" class="innercontent">
George Louis Costanza is a fictional character on the United States based television sitcom Seinfeld (1989?1998).
</div>
<!-- End Sub Menus container -->
</div>
</div>
<script type="text/javascript">
//dolphintabs.init("ID_OF_TAB_MENU_ITSELF", SELECTED_INDEX)
dolphintabs.init("dolphinnav", 1)
</script>
and change it to suit your needs. as you can see, each tab has a small description text underneath it, the div ID of the second section of code matches the REL part of the first section, so for example when you select:
<li><a href="
http://www.javascriptkit.com" rel="george"><span >George</span></a></li>
it shows the DIV from the second part of the code which referrs to 'GEORGE', ie:
<div id="george" class="innercontent">
George Louis Costanza is a fictional character on the United States based television sitcom Seinfeld (1989?1998).
</div>
so basically you can just edit it to meet your needs but make sure your div IDs match the REL fields.
sorry if this is confusing did it help at all?
personally i prefer simpler CSS menus, with no javascript, here's a great site that has all the code ready to copy and paste from, it's great for learning:
listamatic - plenty of horizontal and vertical menus for free
Facebook
Twitter