Accordion Menu Apple style module
Written by kksou   
Wednesday, 01 October 2008

This is the module version of the Apple style Accordion Menu plugin.

The plugin version allows you to insert the menu in a content item or article. If you want the menu to appear in a module position, then use this module.

Very Important: This module makes use of the Apple style Accordion Menu plugin. So please make sure you have installed this plugin too for this module to work.

Live Demo


You can see three live demos of the module:

Latest Version

v1.0.2 (for Joomla 1.0) and v1.5.2 (for Joomla 1.5)
Released December 19, 2008

Fixed the warning message "Notice: Undefined property: stdClass::$params in tmpl/default.php on line 20".

How to use the "Accordion Menu Apple style" module

  1. Download and install the module.
  2. Publish the module.
  3. Go to Modules Manager and click on the module.
  4. In the Modules Parameter, enter the menu items definition in the field Content. The syntax of the menu items definition is exactly the same as that of the Apple style Accordion Menu plugin. Please refer to that article.

Download

How to install


  1. First, make sure you have installed the plugin Apple style Accordion Menu. This module DOES NOT work without the Apple style Accordion Menu plugin.
  2. Download and install the Apple style Accordion Menu module.
  3. Make sure both the plugin and the module is published / enabled.
  4. Select a module position where you want to place the module.
  5. Go to Module Manager and click on "Apple style Accordion Menu Module".
  6. In the parameter "Content", enter the menu item definitions following the syntax as outlined here. For example,
  7. {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-module.php#demo">Demo</a>
    {/Accordion_Menu_Apple_style}
    

Version History

  • v1.0.1 (for Joomla 1.0) and v1.5.1 (for Joomla 1.5)
    Released October 7, 2008

  • Thanks to Guido van de Camp who informed me that there was an extra letter in the .xml installation file of the previous version. It won't install with the extra letter. Have fixed this in this new version..

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 12 users)
  1. ssnobben
    October 03, 2008 1:20am
    Very nice as a l w a y s!

    Already commment the plg but this is a great Joomla addon!

    Kudos to kksou!

  2. Marylka
    October 03, 2008 10:50am
    I have a problem

    I installed the plug, and now what to do to the Apple Menu, Accordion style to work in Joomla!

  3. kksou
    October 03, 2008 10:56am

    Hi Marylka,

    1. Create a new content item or article.

    2. Copy and paste the following text into the content:

    {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-module.php#demo">Demo</a>
    {/Accordion_Menu_Apple_style}

    3. Load the content item. Did you see the menu?

    4. Once the menu is working, you can add the rest of the text to the content. You can also add the float:left or float:right attribute so that the menu floats to the left or right of the paragraph.

    Regards,
    /kksou

  4. kksou
    October 03, 2008 11:02am

    Hi Marylka,

    Oops, just realized this is the module, not the plugin.

    For the module,

    1. Go to module manager and click on "Accordion Menu Apple style module".

    2. In the Parameters area, copy and paste the following into the parameter "content":
    {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-module.php#demo">Demo</a>
    {/Accordion_Menu_Apple_style}

    3. Make sure you have enabled the module and publish the module to a module position of your choice.

    4. Save and close the module. Now reload the page. Did you see the module display the menu?

    Regards,
    /kksou

  5. Marylka
    October 03, 2008 12:54pm

    I have already installed the module, now I can not deal with the setting of this code into my web page.

  6. kksou
    October 03, 2008 5:41pm

    Hi Marylka,

    Would you mind elaborate a bit more what do you mean by "I can not deal with the setting of this code into my web page"?

    I've outlined 4 steps above. Which step is getting problem? And what's the problem? Any error message?

    Need a bit more clues to be able to address your issue more relevantly.

    Regards,
    /kksou

  7. Jack Cybre
    October 26, 2008 2:24pm
    Difficulty in Firefox

    Hi,

    I am impressed with this mod and i have encountered a minor difference with the highligting of the links. In IE it works as it should, but in FF the links dont light up when i move the mouse over it.

    Is there a solution for this ?

    Greetz, Jack

  8. Chris
    January 06, 2009 8:28pm

    i was just wondering if there is the same module but instead of inputing the menu items it will automatically get the menu items from the menu manager, where you can choose from main menu and etc...

  9. kksou
    January 06, 2009 10:42pm

    Hi Chris,

    As I've highlighted in the article where you downloaded the plugin, the original code is not written by me. What I've done is to wrap this into a Joomla plugin/module so that you can use this in Joomla.

    The original code does not do what you have in mind. You might want to send a note to the original author and ask them if they can do it for you.

    Regards,
    /kksou

  10. Kayode
    April 14, 2009 7:02am
    How to remove the authors label below the accordion

    Firstly, this is fantastic. Best of the all the Joomla modules i have seen and first i have been able to implement easily.

    Buy I have a challenge. I will like to remove the authors label below the accordion. I want to state here that my intention is not to discredit the author's work. But i will like not to display it because i am using the accordion on a corporate organization's website.

  11. martin
    June 25, 2009 11:50am
    Help to make it look nice!

    Hi kksou, as you´ll see on my site: www.tintaa.com.ar/site/ I can´t make the menu look like the one you have here at the demo page. I mean, I want all of the headers toghether with no vertical spaces in between, also, the white background of submenues is wider than the header. Coul you please take a look and tell me what do I have to chage to get the same aspect of your demo menu? Thank you! (SOrry for my english, writing from Argentina)

  12. martin
    June 25, 2009 12:06pm
    Help to make it look nice!

    Hi kksou, as you´ll see on my site: www.tintaa.com.ar/site/ I can´t make the menu look like the one you have here at the demo page. I mean, I want all of the headers toghether with no vertical spaces in between, also, the white background of submenues is wider than the header. Coul you please take a look and tell me what do I have to chage to get the same aspect of your demo menu? Thank you! (SOrry for my english, writing from Argentina)

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