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.

Unique Features

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 for

• 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.

Accordion Menu Apple style module

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.

Download

Note: Due to the recent "warning" from my host that my site's CPU usage is too high, I have to resort to a more primitive method of downloading that does not take up much CPU resource. (The original AJAX version uses too much CPU and mysql resources.) As javascript is used, you have to enable javascript to download the files. Thank you for your understanding.

Joomla 1.0.x: AccordionMenuApplestyle_v1.0.10.zip
Joomla 1.5.x: AccordionMenuApplestyle_v1.5.10.zip

How to install (Joomla 1.0.x)

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!

How to install (Joomla 1.5.x)

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.

You are now ready to use this plugin!

Version History

• 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

FAQ (Frequently Asked Questions)

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.

User reviews   Average user ratings:    4.5   (from 11 users)

1. ssnobben
   October 03, 2008 2:11am
   Very nice as a l w a y s!
   

   Hi again! :-)
   
   really like what you are doing kksou!
   
   One of best/smartest Joomla community devs in my mind. :-)
   
   One question/possible enhancement for this very nice Accordion menu though.
   
   I would like to have more sub menus that can flip out to down-right or down-left vertical as options after you have open the first menu accordion effect(s).
   
   Is this possible?
   
   I know I have not seen this at dynamic drive so maybe this is a tricky one. Hope you understand what I mean.
   
   Also If the accordion sub menus also could be open dynamically with some kind of Ajax effect that would be really really cool!
   
   rgds

2. kksou
   October 03, 2008 2:21am
   
   

   Hi ssnobben,
   
   Thanks for the encouraging notes. But the credit should goes to dynamicdrive.com. They're the one who wrote the original stuff. What I did was only to wrap this into a plugin and module so that one can use this menu easily in Joomla.
   
   

   I would like to have more sub menus that can flip out to down-right or down-left vertical as options after you have open the first menu accordion effect(s).
   
   Is this possible?"

   
   
   If you have seen such a menu somewhere, and the author is providing the tool free for public use like what dynamicdrive.com is doing, let me know and I'll wrap this into a Joomla plugin.
   
   I think I've seen something similar done using mootools or YUI. I'll try to search for it too.
   
   Regards,
   /kksou

3. ssnobben
   October 03, 2008 2:23am
   More sub levels?
   

   Hi
   
   wonder also if it is possible with several sub levels than 2?
   
   rgds

4. kksou
   October 03, 2008 11:04am
   
   

   Hi ssnobben,
   
   As mentioned in the previous post, the core stuff is written by dynamicdrive.com. I only wrap it into a Joomla plugin.
   
   The original code only allows 2 levels. You have all the source codes. As you can see, the file jquery-1.2.2.pack.js is encoded. So it might be difficult to decipher how to make it support multiple levels.
   
   An easier way is to see if you can find another menu that supports multiple levels, and we wrap it into a Joomla plugin.
   
   Regards,
   /kksou

5. kksou
   October 13, 2008 5:39pm
   
   

   Hi ssnobben,
   
   You mentioned earlier that:
   
   

   I would like to have more sub menus that can flip out to down-right or down-left vertical as options after you have open the first menu accordion effect(s).
   
   Is this possible?"

   
   
   Have just written a plugin that allows you to add a side bar menu with infinite levels of sub menus. Think this is what you have in mind.
   
   Have submitted to extensions.joomla.org. Might take a few days to get approved.
   
   In the mean time, you can try it first at:
   http://www.kksou.com/php-gtk2/Joomla/Side-Bar-Menu-Apple-style.php
   
   There is also a module version at:
   http://www.kksou.com/php-gtk2/Joomla/Side-Bar-Menu-Apple-style-module.php
   
   Note that the plugin seems to work with all templates, but the modules doesn't seem to work on some of the templates. I'm still trying to find out why.
   
   Please try it on the default Joomla template first i.e. rhuk_solarflare_ii for Joomla 1.0 and rhuk_milkyway for Joomla 1.5. Make sure it works on your machine with the default template. Then switch to your template and see if it's ok.
   
   Regards,
   /kksou

6. Leon
   October 16, 2008 6:20am
   Problem?
   

   Hi kksou,
   thanks for this nice menu applet, but I have a problem with it. I use the plugin together with the module. The problem is that I have the first field which is a menulink with 2 levels (with about 8 submenu links), then the second field is a 1-level menulink, the third a link with 2 levels again (with about 4 submenu's), but if I move the mouse over the third link, the submenu will not open. Only if I move the mouse to the second link, the third menu link will open up and show the submenu, but I can't click on that third submenu, since if I try to do, the menu will close again.
   
   Do you know what the problem can be? Is there any restriction in which of the menu's can have submenu's? I mean can only the last menulinks have submenu's or only the first or can I just mix everything? I tried to adjust the height, but this doesn't fix my problem.
   
   If this menu works, it's abslolute a very nice menu!
   
   Thanks in advance for any info on this.
   
   Kind regards,
   Leon

7. teddyimsuff
   October 27, 2008 6:55am
   question refering to the height of the menu
   

   Hi, i find this menu great, bur i have a question:
   
   is it possible to make the height of the menu some kind of dynamic? when i have a menu point with 2 subpoints the menu require the same height as if i activate a menupoint with 10 subpoints. is it possible to change that? so that the menu automaticly chooses the height that all subs are shown correctly and so space in the height is "unused"?
   
   hope you understood my problem :)

8. teddyimsuff
   October 27, 2008 8:46am
   did it myself
   

   okay, i found a solution on my own :)
   
   you just have to change the term:
   
   height: {$menu_height}px;
   
   to
   
   height:auto;
   
   in the css file of the menu! again, great work!

9. Leon
   October 29, 2008 4:49am
   After knowing how the menu behaves -> 5 stars!
   

   Hi kksou,
   thanks for your excellent support via email! Your advice helped me further with this very nice menu. After I know how the menu behaves my problems are solved! (For anyone who have the same problem as me -> the menu always try to open the sub-level menu if there is one. So this can create a problem when you not carefully think about your menustructure. But knowing this you can work with it and the menu works excellent!)
   
   Also the auto-height suggestion mentioned in above comment works perfect for me!!
   
   This menu AND kksou definitly deserve all 5 stars!
   
   Thanks kssou,
   Leon

10. Jason
    November 20, 2008 10:13am
    Help with Reveal Type (LocalSetting)
    

    1st off, you have done tons of nice coding here! My problem is I can't seem to get the Reveal Type (LocalSetting) to work. I am using the "Glossy_Accordion_Menu" and the code that I have to do a local reveal type override is:
    {Glossy_Accordion_Menu revealtype:mouseover} but i am unable to get this to work.
    
    What am I doing wrong? --thanks--

11. Jason
    November 20, 2008 11:36am
    Help with Reveal Type (LocalSetting)
    

    1st off, you have done tons of nice coding here! My problem is I can't seem to get the Reveal Type (LocalSetting) to work. I am using the "Glossy_Accordion_Menu" and the code that I have to do a local reveal type override is:
    {Glossy_Accordion_Menu revealtype:mouseover} but i am unable to get this to work.
    
    What am I doing wrong? --thanks--

Note: You have to be a registered member to leave a comment. Free registration here.