The Drop Down Menu Apple style is a very neat and cool javascript-based drop down menu provided by www.dynamicdrive.com.

1. Support infinite levels of sub menus!
2. Display of submenus is fast and responsive
3. Easily create a drop down menu within a content item or article.
4. Defining the submenus is as easy as 123.
5. Optional "sliding" animation when sub menus are revealed.
6. Complete customization of the menu's look and feel through css (e.g. foreground/background color, color, padding, margin, fonts, etc.)
7. You can have more than one menu, each with different submenus, within the same content item.

Note that you might find that the plugin does not work right out of the box. You might need to tweak the css file a bit.

However, after trying out numerous Drop Down Menus out there, I find that this is one of the better implementations that are free. The code is relatively light-weight. The interface is clean and responsive. And it supports infinite levels of sub menus! (If you see something that is even better, let me know...)

That's why I still decide to go ahead and release this plugin. I would suggest you try this on a standard Joomla installation first (Joomla 1.0 ot Joomla 1.5). Once it works on your site, you can switch to your template and see if it works. If it doesn't, then follow some of the suggestions below to tweak the css file.

The follow shows a live multi-level drop down menu. Play with it to have a feel of the menu in action.

• Introduction
• Latest Version
• Unique Features
• Demo
• VIP: Read Me First!
• Version History

• Download
• VIP: Read Me First!

• VIP: Read Me First!
• Tweaking the CSS
• How to use

• Item 1a
• Item 2a
• Item Folder 3a
  • Sub Item 3.1a
  • Sub Item 3.2a
  • Sub Item 3.3a
  • Sub Item 3.4a
• Item 4a
• Item Folder 5a
  • Sub Item 5.1a
  • Item Folder 5.2a
    • Sub Item 5.2.1a
    • Sub Item 5.2.2a
    • Sub Item 5.2.3a
    • Sub Item 5.2.4a
• Item 6a

• Item 1b
• Item 2b
• Item Folder 3b
  • Sub Item 3.1b
  • Sub Item 3.2b
  • Sub Item 3.3b
  • Sub Item 3.4b
• Item 4b
• Item Folder 5b
  • Sub Item 5.1b
  • Item Folder 5.2b
    • Sub Item 5.2.1b
    • Sub Item 5.2.2b
    • Sub Item 5.2.3b
• Item 6b

• test4.1
• test4.2
• test4.3

You may use the sample code below to try out the menu. After installing the plugin, just copy and paste the following into your content item and you should see the menu:

{DropDown_Menu_Apple_style}
<a href="test1.html">Test1</a>
+ <a href="#">Item 1a</a>
+ <a href="#">Item 2a</a>
+ <a href="#">Item Folder 3a</a>
++ <a href="#">Sub Item 3.1a</a>
++ <a href="#">Sub Item 3.2a</a>
++ <a href="#">Sub Item 3.3a</a>
++ <a href="#">Sub Item 3.4a</a>
+ <a href="#">Item 4a</a>
+ <a href="#">Item Folder 5a</a>
++ <a href="#">Sub Item 5.1a</a>
++ <a href="#">Item Folder 5.2a</a>
+++ <a href="#">Sub Item 5.2.1a</a>
+++ <a href="#">Sub Item 5.2.2a</a>
+++ <a href="#">Sub Item 5.2.3a</a>
+++ <a href="#">Sub Item 5.2.4a</a>
+ <a href="#">Item 6a</a>

<a href="test2.html">Test2</a>
+ <a href="#">Item 1b</a>
+ <a href="#">Item 2b</a>
+ <a href="#">Item Folder 3b</a>
++ <a href="#">Sub Item 3.1b</a>
++ <a href="#">Sub Item 3.2b</a>
++ <a href="#">Sub Item 3.3b</a>
++ <a href="#">Sub Item 3.4b</a>
+ <a href="#">Item 4b</a>
+ <a href="#">Item Folder 5b</a>
++ <a href="#">Sub Item 5.1b</a>
++ <a href="#">Item Folder 5.2b</a>
+++ <a href="#">Sub Item 5.2.1b</a>
+++ <a href="#">Sub Item 5.2.2b</a>
+++ <a href="#">Sub Item 5.2.3b</a>
+ <a href="#">Item 6b</a>

<a href="test3.html">Test3</a>

<a href="http://www.kksou.com">Test4</a>
+ <a href="test31.html">test4.1</a>
+ <a href="test32.html">test4.2</a>
+ <a href="test33.html">test4.3</a>
{/DropDown_Menu_Apple_style}

Extremely Important: Please make sure you read the Read Me First! if you want to make this plugin work.

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 "Drop Down 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!

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 "Drop Down 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!

I've tweaked the original code a bit so that it now works inside Joomla. However, while it works on the default template for Joomla 1.0 (i.e. rhuk_solarflare_ii) and Joomla 1.5 (i.e. rhuk_milkyway), you might find that it doesn't work right out of the box when used with your site template.

Don't worry. The javascript code itself is ok. You should actually see the menus and submenus displayed. But it might not be positioned in the right place. All you need is to add or modify a couple of lines in the css file of the plugin to make it work.

So, please make sure you read the following if you want to make this plugin work with your template.

• First of all, please take a look at the description of the menu on dynamicdrive.com:
  http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm
• As highlighted in the article,

  Important Note: The HTML for the drop down menus themselves which are hidden by default via CSS, should be added to the <BODY> of your page outside any other element. A good spot would be the bottom of the page, right above the </BODY> tag.

  This means that the original code from dynamicdrive.com will not work in a Joomla site because a Joomla content item or article is usually inside several levels of <div> within the the <BODY> ... </BODY> tag. If you want to place the menu code right above the </BODY> tag, that would mean you need to change the Joomla core, which is undesirable.

• The css file is ddlevelsmenu.css. It is located in the folder mambots/content/DropDownMenuApplestyle for Joomla 1.0, and plugins/content/DropDownMenuApplestyle for Joomla 1.5:

Note that if you have downloaded the original version from dynamicdrive.com, the css file ddlevelsmenu.css is a combination of the following two files:

• ddlevelsmenu-topbar.css. Most of the css definitions for the menu bar resides here.
• ddlevelsmenu-base.css. This contains the css definitions for the multi-level submenus.
• Please compare the two css files with the original one provided by dynamicdrive.com. You will learn a lot comparing the two, and see what I've modified to change this into the Apple style as used in the Accordion Menu Apple style. You will also see the few lines that I've added to make the menu works with the default template of Joomla 1.0 and 1.5.

As mentioned above, you might need to do some tweaking to the CSS file to make the plugin work with your template.

Below are the additional css codes I've added to make the original version work with the default template of Joomla 1.0 and 1.5. Please use them as reference. If you really cannot figure out what to add to make the plugin work with your template, you may post your request on the Forum. I'm sure there will be some CSS experts out there who are willing to offer some advice.

• rhuk_milkyway. This is the default template of Joomla 1.5. You need to add the following to the css file (note: I've already added this in the default installation of this plugin):

table.contentpaneopen li {
	margin-bottom: 0px !important;
}

• rhuk_solarflare_ii This is the default template of Joomla 1.0. You need to add the following to the css file (note: I've already added this in the default installation of this plugin):

#main2 ul li {
padding: 0;
margin: 0;
line-height: 1em;
}

#main2 ul {
list-style-type: none;
padding: 0;
margin: 0;
}

#main2 {
	position: static !important;
}

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 Drop Down Menu Apple style, use the syntax:

{DropDown_Menu_Apple_style}
... menu items ... 
{/DropDown_Menu_Apple_style}

2. Please refer to the sample code above. Each menu item is defined using the standard HTML links <a href="url">label</a>. For example:

{DropDown_Menu_Apple_style}
<a href="test1.html">Test1</a>
+ <a href="#">Item 1a</a>
+ <a href="#">Item 2a</a>
+ <a href="#">Item Folder 3a</a>
++ <a href="#">Sub Item 3.1a</a>
++ <a href="#">Sub Item 3.2a</a>
++ <a href="#">Sub Item 3.3a</a>
++ <a href="#">Sub Item 3.4a</a>
+ <a href="#">Item 4a</a>
+ <a href="#">Item Folder 5a</a>
++ <a href="#">Sub Item 5.1a</a>
++ <a href="#">Item Folder 5.2a</a>
+++ <a href="#">Sub Item 5.2.1a</a>
+++ <a href="#">Sub Item 5.2.2a</a>
+++ <a href="#">Sub Item 5.2.3a</a>
+++ <a href="#">Sub Item 5.2.4a</a>
+ <a href="#">Item 6a</a>
{/DropDown_Menu_Apple_style}

3. The menu supports multi-levels.
• For the first level menu item, just enter the link.
• For the second level menu item, precedes each link with "+ " (i.e. a plus sign followed by a space).
• For the third level menu item, precedes each link with "++ " (i.e. two plus signs followed by a space).
• For the fourthlevel menu item, precedes each link with "+++ " (i.e. threeplus signs followed by a space), etc.



4. 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:

{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}

5. Reveal Animate (Global Setting). There is a parameter called "Reveal Animate" in the Module Manager. If you set this to true, you will see sliding animation when the sub menus are displayed. I've set the default as false. Although it looks nice at first, it becomes a bit irritating after a while.

Note that this is a global setting that applies to all menus.



6. Reveal Animate (LocalSetting). You can also overwrite the global setting of the reveal animate in your content item.

To set the reveal animate as "true" for the current content item (regardless of the setting in the Parameters page), use the following:

{DropDown_Menu_Apple_style revealanimate:true}
... menu items ... 
{/DropDown_Menu_Apple_style}

7. There are times when you want to have a <br clear=all /> immediately after the menu so that the text following the menu does not flow round the menu. The syntax is as follows:

{DropDown_Menu_Apple_style clear_both:1}
... menu items ... 
{/DropDown_Menu_Apple_style}

8. This plugin allows you to display two or more drop down menus in the same content item. However, to display two or more menus, you have to specify a unique menu id for each of the menu as shown below:

Menu 1 definition:

• Menu1.1
• Menu1.2
• Menu1.3
• Item 1a
• Item 2a
  • Sub Item 1.1a
  • Sub Item 1.2a
  • Sub Item 1.3a
• Item 3a
• Item 1a
  • Sub Item 1.1a
  • Sub Item 1.2a
• Item 1a
  • Sub Item 1.1a
• Item 2a
  • Sub Item 1.2a
• Item 3a

{DropDown_Menu_Apple_style menu_id:menu1}
... menu items ... 
{/DropDown_Menu_Apple_style}

Menu 2 definition:

• Menu2.1
• Menu2.2
• Menu2.3
• Menu2.4
• Item 1a
  • Sub Item 1.1a
  • Sub Item 1.2a
  • Sub Item 1.3a
• Item 2a
• Item 3a
• Item 1a
  • Sub Item 1.1a
• Item 2a
  • Sub Item 1.2a
• Item 3a
• Item 1a
  • Sub Item 1.1a
  • Sub Item 1.2a
• Item 1a
• Item 2a
• Item 3a

{DropDown_Menu_Apple_style menu_id:menu2}
... menu items ... 
{/DropDown_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 for

• The default css file is ddlevelsmenu.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}

Version History

• v1.02 (for Joomla 1.0) and v1.52 (for Joomla 1.5)
  Released October 12, 2008

You can now display two or more menus in the same content item!.

• 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 December 16, 2008

Fixed the warning message "Undefined property: Plugin_DropDownMenuApplestyle::$menu_height in DropDownMenuApplestyle.lib.php on line 126"

Questions? Problems?

If you still have problems getting the plugin to work with your templates, feel free to post your questions in the Forum.

User reviews   Average user ratings:    5.0   (from 1 user)

1. ssnobben
   October 16, 2008 5:22am
   Wow cant wait to test this!
   

   This is a menu I have been waiting for two year for Joomla! lol
   
   I will test this but I know that you as always have done it!
   
   King of menus!

Note: You have to be a registered member to leave a comment. Free registration here.