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

General

Introduction
Latest Version
Unique Features
Demo

Download

Download
Remove "Powered by" links

Documentation

How to install
How to use
Customizing menu with CSS
Variations of the menu
Display menu in module
FAQ
Version History

User Reviews

kksou.com
extensions.joomla.org

Demo 1

submenu 1.1
submenu 1.2
submenu 1.3
image with links

Demo 2

submenu 2.1
submenu 2.2
submenu 2.3
image without links

Powered by JoomlaGadgets

In case you're wondering what an "Apple style 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 Apple style Accordion Menu in any of your content item.

You can now easily change the look and feel of the menu through css. Included in the standard installation of this plugin are two variations:

• Varation 1

Highlights: No colored background bar for level 1 menus. Level 1 menus are now preceded by a triangle.

• Varation 2

Highlights: Level 2 menus are now preceded by a star. Level 2 menus are now in Times New Roman italics.

• Glossy Accordion Menu
• Drop Down Menu Apple style

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.

1. To insert the Accordion Menu Apple style, use the syntax:

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

2. Starting version 1.02/1.52, each menu item is defined using the standard HTML links <a href="url">label</a>. For example:

{Accordion_Menu_Apple_style}
<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/php-gtk2/Joomla/Accordion-Menu-Apple-style.php#demo">Demo</a>
{/Accordion_Menu_Apple_style}

3. The menu supports two levels. For the first level menu item, just enter the link. For the second level menu item, precedes each link with "- " (a hyphen followed by a space).


4. Image with links: Just use the standard HTML syntax. Note that this is only allowed in level 2 menu items:

- <a href="url"><img src="img_url" border=0 /></a>

5. Image without links: Just use the standard HTML syntax. Note that this is only allowed in level 2 menu items:

- <img src="img_url" border=0 />

6. Height of the menu: The default height of the menu is 100px. If you want to change the menu height, to say, 60px, use the following syntax:

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

7. Make the menu float left: To make the menu float left, use the following syntax:

{Accordion_Menu_Apple_style 60 float:left}
... menu items ... 
{/Accordion_Menu_Apple_style}

8. Make the menu float right: To make the menu float right, use the following syntax:

{Accordion_Menu_Apple_style 60 float:right}

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

9. Add some padding: When you make the menu float left or right, if you wish to give some space or padding between the menu and the text flowing around the menu, use the following syntax (assuming you want a padding of 10px):

{Accordion_Menu_Apple_style 60 float:right10}
... menu items ... 
{/Accordion_Menu_Apple_style}

10. Open the link in a new tab/window: You can open the link in a new tab/window with the standard HTML's target=_blank:

{Accordion_Menu_Apple_style}
<a href="http://www.site1.com/links" target=_blank>Links</a>
- <a href="http://www.google.com" target=_blank>Google</a>
- <a href="http://www.yahoo.com" target=_blank>Yahoo</a>
- <a href="http://www.joomla.org/" target=_blank>Joomla</a>
{/Accordion_Menu_Apple_style}

11. Plain text for level 1 menu item: If you only want to use plain text (i.e. without any links) for level 1 menu items, just enter the line in plain text without any <a href="url">label</a>:

{Accordion_Menu_Apple_style}
This is a plain text level 1 menu item
- <a href="http://www.google.com" target=_blank>Google</a>
- <a href="http://www.yahoo.com" target=_blank>Yahoo</a>
- <a href="http://www.joomla.org/" target=_blank>Joomla</a>
{/Accordion_Menu_Apple_style}

12. Reveal Type (Global Setting). You can set the reveal type as "click" or "mouseover" in the Parameters page in the Plugin Manager. "Mouseover" means that the submenu will automatically reveal when your mouse is over the level 1 menu. If you set the reveal type as "click". Then the user need to click on the level 1 menu to reveal the level 2 menus.

Note that this is a global setting that applies to all menus.



13. Reveal Type (LocalSetting). You can also overwrite the global setting of the reveal type in your content item.

To set the reveal type as "click" for the current content item (regardless of the setting in the Parameters page), use the following:

{Accordion_Menu_Apple_style 60 float:right revealtype:click}
... menu items ... 
{/Accordion_Menu_Apple_style}

To set the reveal type as "mouseover" for the current content item (regardless of the setting in the Parameters page), use the following:

{Accordion_Menu_Apple_style 60 float:right revealtype:mouseover}
... menu items ... 
{/Accordion_Menu_Apple_style}

14. Width of the menu: The default width of the menu is defined in the Parameters in Plugin Manager. If you want to change the menu width locally to say, 200px, use the following syntax:

{Accordion_Menu_Apple_style 60 width:200}
... menu items ... 
{/Accordion_Menu_Apple_style}

• 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 following folder:
  • Joomla 1.0: mambots/content/ddaccordion
  • Joomla 1.5: plugins/content/ddaccordion

• The default css file is AccordionMenuApplestyle.css. However, you can also specify a different css files for different menus with the following syntax:

{Accordion_Menu_Apple_style 60 float:right css:your_css_file.css}
... menu items ... 
{/Accordion_Menu_Apple_style}

• You may want to take a look at some of the variations of this menu using css.

If you wish to include the Apple style Accordion Menu into a module (as oppose to another content item), use the following module which I've written: Accordion Menu Apple style module.

Include the Apple style Accordion Menu into another content item => use this plugin.

Include the Apple style Accordion Menu into another module => use the Accordion Menu Apple style module.

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 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 "Accordion Menu Apple style" 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 "Accordion Menu Apple style" - 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.3 (for Joomla 1.0) and v1.5.3 (for Joomla 1.5)
  Released October 3, 2008
  

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.

In case you didn't notice it. There's also another parameter Reveal Type. The default is "mouseover". This mean that the submenu automatically reveal when your mouse is over the level 1 menu. If you set the reveal type as "click". Then the user need to click on the level 1 menu to reveal the level 2 menus.

• v1.0.7 (for Joomla 1.0) and v1.5.7 (for Joomla 1.5)
  Released October 5, 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/ddaccordion for Joomla 1.0, and plugins/content/ddaccordion for Joomla 1.5

• v1.0.8 (for Joomla 1.0) and v1.5.8 (for Joomla 1.5)
  Released October 6, 2008
  

You can set the reveal type as "click" or "mouseover" in the Parameters page in the Plugin Manager. This is the global setting that applies to all. This latest version now allows you to overwrite the global setting in your content item:

• To set the reveal type as "click" for the current content item (regardless of the setting in the Parameters page), use the following:

{Accordion_Menu_Apple_style 60 float:right revealtype:click}
... menu items ... 
{/Accordion_Menu_Apple_style}

• To set the reveal type as "mouseover" for the current content item (regardless of the setting in the Parameters page), use the following:

{Accordion_Menu_Apple_style 60 float:right revealtype:mouseover}
... menu items ... 
{/Accordion_Menu_Apple_style}

• v1.0.9 (for Joomla 1.0) and v1.5.9 (for Joomla 1.5)
  Released October 6, 2008
  

You can now select different css files for different menus with the following syntax:

{Accordion_Menu_Apple_style 60 float:right css:your_css_file.css}
... menu items ... 
{/Accordion_Menu_Apple_style}

Note that your css file should be placed in the folder mambots/content/ddaccordion for Joomla 1.0, and plugins/content/ddaccordion for Joomla 1.5

• v1.0.10 (for Joomla 1.0) and v1.5.10 (for Joomla 1.5)
  Released October 7, 2008

You can now overwrite the global setting of the menu width locally. See here for details.

• v1.0.11 (for Joomla 1.0) and v1.5.11 (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"

Q1: I want the link to launch to a new tab or new window when the user clicks on the click.

A1: Use the following use the following syntax:

{Accordion_Menu_Apple_style}
[url=http://www.site1.com/links]Links[/url]
- [url=http://www.google.com 1]Google[/url]
- [url=http://www.yahoo.com 1]Yahoo[/url]
- [url=http://www.joomla.org/ 1]Joomla[/url]
{/Accordion_Menu_Apple_style}

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

A2: 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.