Accordion Menu Apple style
Written by kksou   
Tuesday, 30 September 2008
download button
faq button

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

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.


Variations of the Menu

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.

Other Menus

Latest Version

v1.0.12 (for Joomla 1.0) and v1.5.12 (for Joomla 1.5)
Released April 23, 2010

Conform to joomla.org guidelines.

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.

How to use the "Accordion Menu Apple style" plugin

Important: If you're using Joomla 1.5.8, 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.

  1. To insert the Accordion Menu Apple style, use the syntax:
  2. {Accordion_Menu_Apple_style}
    ... menu items ... 
    {/Accordion_Menu_Apple_style}
    

  3. Starting version 1.02/1.52, each menu item is defined using the standard HTML links <a href="url">label</a>. For example:
  4. {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}
    

  5. 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).

  6. Image with links: Just use the standard HTML syntax. Note that this is only allowed in level 2 menu items:
  7. - <a href="url"><img src="img_url" border=0 /></a>
    

  8. Image without links: Just use the standard HTML syntax. Note that this is only allowed in level 2 menu items:
  9. - <img src="img_url" border=0 />
    

  10. 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:
  11. {Accordion_Menu_Apple_style 60}
    ... menu items ... 
    {/Accordion_Menu_Apple_style}
    

  12. Make the menu float left: To make the menu float left, use the following syntax:
  13. {Accordion_Menu_Apple_style 60 float:left}
    ... menu items ... 
    {/Accordion_Menu_Apple_style}
    

  14. Make the menu float right: To make the menu float right, use the following syntax:
  15. {Accordion_Menu_Apple_style 60 float:right}
    
    ... menu items ... 
    {/Accordion_Menu_Apple_style}
    

  16. 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):
  17. {Accordion_Menu_Apple_style 60 float:right10}
    ... menu items ... 
    {/Accordion_Menu_Apple_style}
    

  18. 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:
  19. {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}
    

  20. 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>:
  21. {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}
    

  22. 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.
  23. Note that this is a global setting that applies to all menus.


  24. Reveal Type (LocalSetting). You can also overwrite the global setting of the reveal type in your content item.
  25. 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}
    

  26. 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:
  27. {Accordion_Menu_Apple_style 60 width:200}
    ... menu items ... 
    {/Accordion_Menu_Apple_style}
    

Customizing the menu with CSS


  • 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

Remove the "Powered by" links

You may not edit or remove any copyright or Powered by statements in the Accordion Menu Apple style plugin.

However, 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.

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

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

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

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 24 users)
  1. ssnobben
    October 03, 2008 1: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 1: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 1:23am
    More sub levels?

    Hi

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

    rgds

  4. kksou
    October 03, 2008 10: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 4: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 5: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 5: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 7: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 3: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 9: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 10: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--

  12. chr1s
    January 14, 2009 4:21pm
    Problem

    Hi, I've installed the module, ticked it to go green and in my article added the example to the HTML. It doesnt load though :S

    http://www.jorgensen.net.au/index.php?option=com_content&view=article&id=2&Itemid=3

    Can someone tell me what i've done wrong?

    Cheers.

  13. kksou
    January 14, 2009 4:37pm

    Hi Chr1s,

    Took a look at your website. The tag {Accordion_Menu_Apple_style} and {/Accordion_Menu_Apple_style}are still there. It means the plugin is not processed at all.

    Could you please check if you have enabled the plugin?

    Regards,
    /kksou

  14. chr1s
    January 14, 2009 4:41pm

    I have checked and the plugin is enabled, could it be a problem with the template I'm using?

  15. kksou
    January 14, 2009 5:07pm

    Hi Chr1s,

    I don't think it's because of your template. But if you want to be
    sure, you could try switching back to the default joolma template and
    see if it works.

    The only other reason I could think of is plugin conflict.

    To see which one is the main cause, you could install a fresh joomla
    some where and install just the "Accordion Menu Apple style" plugin.

    If it works, switch to your template and see if it works.

    If it works, it means it's not your template problem. It could then be
    plugin conflict.

    Regards,
    /kksou

  16. alper
    January 23, 2009 7:22am
    thank

    thank

  17. devo.uk
    February 05, 2009 10:12am
    Great Work but one query

    Hi there..
    I came across your site and i love it .. loads to play with but i was wondering if the accordion menu plugin and module can be set or revised to include the features which are in the original dymaic drive script

    i wish when loading the page with menu {as a menu in joomla} that i can have it so all the headers (level1) are closed and not expanded until the user hover or click over

    in the dd script it uses this

    quote

    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.

    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)

    or if you can alter the script to do something similar i would be really gratefull

    but once again i am sure i will learn a lot from articles on your site.

    thanks

    devo

  18. eledu
    March 30, 2009 7:19am
    same as Leon problem

    Hi all.

    First of all, this is a very nice menu. But I have come across with the same problem as Leon did. As he told: if you have one item without sublevels and you press it, the menu opens the first menu item with sublevels behind this one.

    So, I guess 2 solutions:
    - or you put for every level a sublevel, although you don't need it (e.g. with the same name of the 1st level item) -> not nice
    - or you put the items without sublevels, the last ones.

    But... could anyone manage to find a better solution? Because I need to make a menu with a fixed order of items and I don't like the solution of putting a sublevel with the same name of the first level item.

    Apart from it, this menu is very nice. But if I don't find a solution for this problem I will need to find another one, because I am new in php, javascript, ... and I am not sure I am able to modify this behaviour :(

    Thanks in advance!

  19. cii
    April 05, 2009 1:39am
    Cannot make 1st Level Link to Work

    Hi

    Very Nice Menu indeed sorted my problem customized the colours as I like but I have an issue.

    I cannot make the 1st Level Link to Work even if there are no 2nd level items.

    I can see the hyperlink on the status bar but when I click on it makes nothing

    I used the original code from this website to test it removing the 2nd Level items from the "Links" Tab.

    Can anyone help ?

    Thanks

  20. Halaster
    April 08, 2009 2:09am
    Expand Pblem

    Hi,
    I have a pblem, i hope anyone can help me..
    so..
    In my menu, my first section have only 1 level, and my second have level 1 + 2 sub menu in level 2..

    My problem is... When my cursor move over my 1rst Section.. My second section expand...

    ( Sorry for my english :x

  21. mark
    April 13, 2009 9:31pm
    Is this SEO Friendly?

    I'm just wondering if this is seo friendly?

  22. finc
    April 11, 2010 11:58am
    as module

    If this could be a module outside the content area it would be great

  23. kksou
    April 11, 2010 8:42pm

    Hi Finc,

    In case you're not aware, there is a corresponding Accordion Menu Apple style module.

    Is this what you have in mind?

    Regards,
    /kksou

  24. finc
    April 11, 2010 9:51pm

    Maybe I messed it up, but what I was thinking is when an article is devided in pages you can have such kind of list on top of the article to go to the page you want. Somehow this link-list to those pages should be taken out of the article and put into a module.
    This way the layout of the article stays clean.

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

 
< Prev   Next >

Blog - Forum - Privacy Policy - Contact Us
Copyright © 2006-2009. kksou.com. All Rights Reserved