Accordion Menu Apple style |
| Written by kksou | ||||||||||||||
| Tuesday, 30 September 2008 | ||||||||||||||
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 MenuYou can now easily change the look and feel of the menu through css. Included in the standard installation of this plugin are two variations:
Other MenusLatest Versionv1.0.11 (for Joomla 1.0) and v1.5.11 (for Joomla 1.5)
Unique Features
How to use the "Accordion Menu Apple style" pluginImportant: If you're using Joomla 1.5.8, please refer to the article:
{Accordion_Menu_Apple_style}
... menu items ...
{/Accordion_Menu_Apple_style}
{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}
- <a href="url"><img src="img_url" border=0 /></a> - <img src="img_url" border=0 />
{Accordion_Menu_Apple_style 60}
... menu items ...
{/Accordion_Menu_Apple_style}
{Accordion_Menu_Apple_style 60 float:left}
... menu items ...
{/Accordion_Menu_Apple_style}
{Accordion_Menu_Apple_style 60 float:right}
... menu items ...
{/Accordion_Menu_Apple_style}
{Accordion_Menu_Apple_style 60 float:right10}
... menu items ...
{/Accordion_Menu_Apple_style}
{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}
{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}
Note that this is a global setting that applies to all menus. 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}
{Accordion_Menu_Apple_style 60 width:200}
... menu items ...
{/Accordion_Menu_Apple_style}
Customizing the menu with CSS
{Accordion_Menu_Apple_style 60 float:right css:your_css_file.css}
... menu items ...
{/Accordion_Menu_Apple_style}
Accordion Menu Apple style moduleIf 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. DownloadRemove the "Powered by" linksYou 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)
You are now ready to use this plugin! How to install (Joomla 1.5.x)
You are now ready to use this plugin! Version History
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. 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 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:
{Accordion_Menu_Apple_style 60 float:right revealtype:click}
... menu items ...
{/Accordion_Menu_Apple_style}
{Accordion_Menu_Apple_style 60 float:right revealtype:mouseover}
... menu items ...
{/Accordion_Menu_Apple_style}
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 Released October 7, 2008 You can now overwrite the global setting of the menu width locally. See here for details. 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:
User reviews Average user ratings: 4.5 (from 21 users) Note: You have to be a registered member to leave a comment. Free registration here. |
||||||||||||||
| < Prev | Next > |
|---|
Joomla 1.0 Articles
- How to create a module with DirectPHP plugin?
- How to include modules in Content item?
- How to include modules in Section/Content Description
- How to include PHP commands in Section/Content Description
- How to make plugins process Section/Category descriptions
- Include Code Listing plugin - More Tips and Techniques
- How to have DirectPHP plugin process RSS feed?
- How to have the plugins processed when genrating PDF documents of content items?
- How to have DirectPHP commands processed in Joomla search?
Joomla 1.5 Articles
- How to create a module with DirectPHP plugin?
- How to include modules in Content item?
- How to include modules in Section/Content Description
- How to include PHP commands in Section/Content Description
- How to make plugins process Section/Category descriptions
- Include Code Listing plugin - More Tips and Techniques
- How to have DirectPHP plugin process RSS feed?
- How to have the plugins processed when genrating PDF documents of content items?
- How to have DirectPHP commands processed in Joomla search?
Joomla Plugins
Joomla Components
Joomla Gadgets
- Google Image Search
- Google News Search
- Wikipedia Search
- Google Book Search
- Google Video Search
- Google Currency Converter - AJAX version
- Yahoo Currency Converter - AJAX version
- Yahoo Stock Quote (AJAX module version)
- Yahoo Stock Quote (AJAX component/ module version)
- googleSearch_cse component
- googleSearch_cse module
- googleMaps plugin












4.5 (from 21 users)
October 03, 2008 1:11am
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
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.
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
October 03, 2008 1:23am
Hi
wonder also if it is possible with several sub levels than 2?
rgds
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
October 13, 2008 4:39pm
Hi ssnobben,
You mentioned earlier that:
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
October 16, 2008 5:20am
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
October 27, 2008 5:55am
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 :)
October 27, 2008 7:46am
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!
October 29, 2008 3:49am
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
November 20, 2008 9:13am
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--
November 20, 2008 10:36am
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--
January 14, 2009 4:21pm
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.
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
January 14, 2009 4:41pm
I have checked and the plugin is enabled, could it be a problem with the template I'm using?
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
January 23, 2009 7:22am
thank
February 05, 2009 10:12am
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
March 30, 2009 7:19am
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!
April 05, 2009 1:39am
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
April 08, 2009 2:09am
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
April 13, 2009 9:31pm
I'm just wondering if this is seo friendly?