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

  • 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

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.


 

Comments  

 
# Tengis 2012-09-04 20:09
Where should i put all those codes. in the source? I am actually planning to add side bar in the article.
 
 
# gusmang 2012-09-26 06:44
Yeah I have the same question too .. where should I Put the code ?? :sad: :-?
 
 
# kksou 2012-09-26 07:17
Hi,

This is a plugin. As the name suggests, a plugin is for use within a Joomla article.

So what you need to do is to create a new article and then place the tags inside anywhere in the article where you want the menu to appear.

Regards,
/kksou
 
 
# shuvo 2013-01-22 02:08
Have you Joomla 2.5 Accordion menu ?
 
 
# Raphalitos 2013-02-05 03:38
does it work with joomla 2.8 due it does not work with the syntax :-/
 
 
# PlatformEelements 2013-04-30 04:48
Hello kksou,
I use the plg on www.betzenstein.de since 2008. Yesterday we moved to a new vServer. Especially we changes from php5.2 to php5.3.
I updated your plg to the latest version 1.5.12 under Joomla 1.5.26.
Apparently my css file does not get a call from the plg anymore.
Please, what can I do to fix this issue ..?

Best regards
Steffen
 
 
# kksou 2013-05-01 21:22
Hi Steffen,

There are too many possibilities? Can you do some testing on your side and provide more clues e.g. what you see on the screen? Any error messages? etc.

Regards,
/kksou
 
 
# bil78 2013-06-17 02:22
Hello, kksou!

I have the same problem like Steffen. We have php upgrade too. There is no error messages, but there is no css for the menu. Now we have php 5.3.26 an joomla 1.5.22. Do you have any solution, because we use eight accordion menus on our website!

Thank you!

Best regards!
Bil
 
< Prev   Next >

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