Glossy Accordion Menu
Written by kksou   
Saturday, 04 October 2008

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

In case you're wondering what an "Glossy 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 Glossy Accordion Menu in any of your content item.


Latest Version

v1.0.5 (for Joomla 1.0) and v1.5.5 (for Joomla 1.5)
Released May 6, 2010

Conforms 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 "Glossy Accordion Menu" 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.

Please refer to the following:


The syntax for both menus are exactly the same. Just remeber to replace all

{Accordion_Menu_Apple_style}
... menu items ... 
{/Accordion_Menu_Apple_style}

with:

{Glossy_Accordion_Menu}
... menu items ... 
{/Glossy_Accordion_Menu}

For example,

{Glossy_Accordion_Menu}
<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">Demo</a>
Demo 1
- <a href="http://wwww.google.com" target=_blank>submenu 1.1</a>
- <a href="http://www.yahoo.com" target=_blank>submenu 1.2</a>
- <a href="http://www.kksou.com" target=_blank>submenu 1.3</a>
- 
- <a href="google.com"><img src="http://i27.tinypic.com/sy7295.gif" border=0/></a>
Demo 2
- <a href="http://wwww.google.com" target=_blank>submenu 2.1</a>
- <a href="http://www.yahoo.com" target=_blank>submenu 2.2</a>
- <a href="http://www.kksou.com" target=_blank>submenu 2.3</a>
- 
- <img src="http://i27.tinypic.com/sy7295.gif" />
{/Glossy_Accordion_Menu}

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 registered 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 "Glossy Accordion Menu" 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 "Glossy Accordion Menu" - 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.2 (for Joomla 1.0) and v1.5.2 (for Joomla 1.5)
    Released October 7, 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/GlossyAccordionMenu for Joomla 1.0, and plugins/content/GlossyAccordionMenu for Joomla 1.5.

  • v1.0.3 (for Joomla 1.0) and v1.5.3 (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"
  • v1.0.4 (for Joomla 1.0) and v1.5.4 (for Joomla 1.5)
    Released March 1, 2010
  • 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.

FAQ (Frequently Asked Questions)


Q1: Can I have more than one menu in the same page?

A1: 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  

 
# Phillip od 2012-01-30 02:52
Hi there

Firstly, wanted to say great menu !!!
Will be using from here on...

But I have a question thou, will my menu still work if my server gets upgraded to PHP 5.33

Going to test this now on my new server, hopefully it works...
 
 
# kksou 2012-01-30 04:17
Hi Phillip,

It should. I've tested once using PHP 5.38. It worked. But everybody sets up their php.ini differently.

In case it doesn't, or if it shows any error messages or warning, please let me know the error/warning messages you see on the screen. Will try to resolve them for you, ok?

Regards,
/kksou
 
 
# pedropedro 2012-06-18 09:48
very usefull
 
 
# Chris S 2012-07-06 08:26
Hi, I've placed the menu code in my article, both in the wysiwyg editor and the html source code, and I can't get the menu to show. I've installed the module and enabled it through module manager, but I am unsure what I could be doing wrong. Help?
 
 
# kksou 2012-07-07 06:11
Hi,

Did you install the Glossy Accordion Menu plugin first?
Link here: http://www.kksou.com/php-gtk2/Joomla/Glossy-Accordion-Menu.php

The module makes use of the plugin. So you have to install the plugin first before the module will work.

Regards,
/kksou
 
 
# Chris S 2012-07-09 07:47
Hi yes, the plugin is installed and enabled, as well as the module, but the code still shows up in the article exactly as I typed it.
 
 
# kksou 2012-07-11 19:14
Hi Chris,

Can you uninstall the module first. Leave just the plugin.

Then create an article and add the tag to see if the plugin works within the article first.

This will allow us to see if the plugin works ok first.

Based on your description, it could be conflicts with your other plugins, modules or templates. Conflicts are very common in Joomla. The Joomla framework is too loose. And it doesn't provide any debugging tool to tell you where are the conflicts. So we have to do a bit of testing here.

Regards,
/kksou
 
< Prev   Next >

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