The Glossy Accordion Menu is a very neat and cool javascript-based menu provided by www.dynamicdrive.com.

In case you're wondering what an "Glossy Accordion Menu" is, just take a look at the Table of Content appearing on the right of this paragraph. Take a look at Demo 1 and Demo 2. You can even include images in the menu. Pretty cool, isn't it?

What I've done is to wrap the original code from www.dynamicdrive.com into a Joomla plugin/mambot so that you can easily include the Glossy Accordion Menu in any of your content item.

1. Easily create a menu or table of contents within a content item or article.
2. You can float the menu to the left or right so that the main text flows around it.
3. You can easily customize the menu through css.

Please refer to the following:

• How to use the "Accordion Menu Apple style" plugin
• Customizing the menu with CSS
• Variations of the Menu

The syntax for both menus are exactly the same. Just remeber to replace all

{Accordion_Menu_Apple_style}
... menu items ... 
{/Accordion_Menu_Apple_style}

with:

{Glossy_Accordion_Menu}
... menu items ... 
{/Glossy_Accordion_Menu}

{Glossy_Accordion_Menu}
<a href="http://www.site1.com">General</a>
- <a href="url1">Introduction</a>
- <a href="url2">Unique Features</a>
- <a href="url3">How to Use</a>
- <a href="url4">Demo</a>
<a href="http://www.site1.com/links">Links</a>
- <a href="http://www.google.com">Google</a>
- <a href="http://www.yahoo.com">Yahoo</a>
- <a href="http://www.joomla.org/">Joomla</a>
- <a href="http://www.kksou.com">Demo</a>
Demo 1
- <a href="http://wwww.google.com" target=_blank>submenu 1.1</a>
- <a href="http://www.yahoo.com" target=_blank>submenu 1.2</a>
- <a href="http://www.kksou.com" target=_blank>submenu 1.3</a>
- 
- <a href="google.com"><img src="http://i27.tinypic.com/sy7295.gif" border=0/></a>
Demo 2
- <a href="http://wwww.google.com" target=_blank>submenu 2.1</a>
- <a href="http://www.yahoo.com" target=_blank>submenu 2.2</a>
- <a href="http://www.kksou.com" target=_blank>submenu 2.3</a>
- 
- <img src="http://i27.tinypic.com/sy7295.gif" />
{/Glossy_Accordion_Menu}

If you find the plugin useful and would like to use the plugin without the "Powered-by" links, you may do so by purchasing a "Powered-by" removal license for only USD $10 per site.

Secured payment is processed by 2checkout.com. All major credit cards are accepted, including Visa, Mastercard and American Express, etc. You can also pay by PayPal. Once the transaction is completed, you will be given a link to download the registered version with the "Powered by" links removed.

1. Download the plugin and unzip it into a folder.
2. From the Installers menu, select mambots. In the field "Install directory", enter the folder location (where you unzipped the file) and click Install.
3. From the Mambots menu, select Site Mambots.
4. Make sure the plugin "Glossy Accordion Menu" is published. If you see a cross in the Published column, just click on it. It will turn into a green tick.

You are now ready to use this plugin!

1. Download the plugin and unzip it into a folder.
2. From the Extensions menu, select Install/Uninstall. In the field "Install directory", enter the folder location (where you unzipped the file) and click Install.
3. From the Extensions menu, select Plugin Manager.
4. Enable the plugin "Glossy Accordion Menu" - make sure there is a green tick in the Enabled column.
5. Very Important: If you're using Joomla 1.5.8 and above, please refer to the article:
   How to enter HTML tags, javascript and PHP codes in Joomla 1.5.8?. Otherwise you might find that all your HTML tags, Javascript and PHP scripts will be removed the moment you click the Save or Apply button.

You are now ready to use this plugin!

• v1.0.2 (for Joomla 1.0) and v1.5.2 (for Joomla 1.5)
  Released October 7, 2008

You can now easily change the style of the menu (including font style, size, foreground color, background color, etc.) by editing the css file directly. The css file is located in the folder mambots/content/GlossyAccordionMenu for Joomla 1.0, and plugins/content/GlossyAccordionMenu for Joomla 1.5.

• v1.0.3 (for Joomla 1.0) and v1.5.3 (for Joomla 1.5)
  Released December 9, 2008
• Fixed the warning message "Undefined variable: module on line 43"
• Fixed the warning message "Undefined offset: 0 on line 55"
• v1.0.4 (for Joomla 1.0) and v1.5.4 (for Joomla 1.5)
  Released March 1, 2010

Added one more parameter: Width of Menu This is useful when you want to include graphics in your menu. You can adjust the width of the menu to fit your image.

Q1: Can I have more than one menu in the same page?

A1: By right, you should have only one menu per page.

However, go ahead and try it. You can actually put two or menus in the same page. There are two "problems" here, though:

• There will be only one active menu per page. This means that suppose you have three menus. If currently one of the menu items in Menu 1 is active, you will find that both Menu 2 and Menu 3 will be collapsed. The original javascript library from www.dynamicdrive.com only keeps one active menu item per page. Hence the reason.
• You cannot set different heights for the different menus. Try it. You will know what I mean. This is because the height of the menu is defined in the css definition. All the menus use the same css style, hence they will have the same height.