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

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

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

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

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.



User reviews   Average user ratings:    4.0   (from 7 users)
  1. jolemo
    December 09, 2008 10:53am

  2. ronnie
    May 05, 2009 4:08pm
    very kewl menus

    Hello I love these menus but I'm very new to Joomla. I installed this plugin but don't know how to make it use for default menus. Any help would be greatly appreciated.

  3. Bradley D. Thornton
    June 12, 2009 1:49pm
    Yowza! Just what I needed!

    Fantastci plugin! Using it on almost all of my sites!

  4. Pierre Allemand
    September 02, 2009 2:01am
    Basic question

    Thank you for all the explanations which seem very clear and precise. I am quite sure that Glossy accordion menu would work very fine on my site.
    My unique and basic question is :
    When you say "use the following syntax..." my asking is : "where ?" (I mean in what file, located where ?)
    (This is a very basic question from a very new user....)

  5. Charlie Davidson
    September 03, 2009 5:12am
    Charlie Davidson

    I love the plugin, and the module.. i'm using this and the apple style accordion module, it works fine when i enable the plug in but it ruins my other modules.. i cant find why it does that.. it specifically screws up gk photo slider, gk news slider, accordion menu..

  6. Harry Splinter
    September 15, 2009 11:20pm
    Solution to module interfering

    Hi there,

    the problem lies within the ddaccordion.js due to use of the $ variable. If you want a patched version send us an email (info@blackmonx.com)

    kinds.

  7. Clark
    December 19, 2009 7:30pm
    Were do you put the Syntax

    Where in the world do you put the syntax?????

    {Glossy_Accordion_Menu} ... {/Glossy_Accordion_Menu} ...........????

    Pleas Help
    Thanks

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