Accordian Menu PDF Print E-mail
Written by Andrew Lechlak   
Tuesday, 14 July 2009 04:51

First off, thank you Steve Stronk for letting me use your website as an example here. I designed this website for Steve and his wildlife removal business. I love the accordian style menu that is used for his sidebar. It is done through javascript that can be found at Dynamic Drive. I can not remember where so here is a brief summer on how to use it.

Step One: Put all of this inside the header tag.

<script type="text/javascript" src="/joomla/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="/joomla/animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
animatedcollapse.addDiv('q1', 'hide=1')
animatedcollapse.init()
</script>

Step Two: Put this inside the body tag where you want it.

<script type="text/javascript">
animatedcollapse.down('q1')
</script>
<a href="javascript:animatedcollapse.toggle('q1')" style="color: #808080; font-size: 14px; text-decoration: none;">
<img alt=" "src="/joomla/images/creatures.png" style="border-style: 0; border-color: 0; text-decoration: none; border-width: 0px; " hspace="10" /></a>
<div id="q1"; display: none>
Whatever you want here….
</div>

And your done!

Now you can use that code and just change the values for it and away you go. Now you can create an accordian menu and look like a pro.

 

 

 

Last Updated on Tuesday, 14 July 2009 05:35
 

Add your comment

Your name:
Your email:
Your website:
Subject:
Comment: