The Drop Down Menu Apple style is a very neat and cool javascript-based drop down menu provided by 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. Complete customization of the menu's look and feel through css (e.g. foreground/background color, color, padding, margin, fonts, etc.)
6. 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!

As mentioned earlier, the original code was from dynamicdrive.com. What I've done is to wrap the original code into a Joomla plugin so that you can display the menu within a Joomla article.

The installer on this page will work with the standard Joomla template. However, I find that the css codes sometimes do not work with some of the Joomla templates.

If this is the case for you, 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. You might need to modify a couple of lines in the css files of the plugin to make it work.

To modify the css files, please refer to: Customizing the menu with CSS

1. To insert the Drop Down Menu Apple style, use the syntax:

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

2. The default displays the menu as a "Drop Down Menu". To display the menu as a sidebar, use the syntax:

{DropDown_Menu_Apple_style menutype:sidebar}
... menu items ... 
{/DropDown_Menu_Apple_style}

You can see a Live Demo here.

3. 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}

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



5. 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}

6. 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}

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

• 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.
• For Joomla 1.0, the css file is located in the folder: mambots/content/DropDownMenuApplestyle. Name of the css file: ddlevelsmenu.css
• For Joomla 1.5, 1.6, 1.7 and 2.5, the css files are located in the folder: plugins/content/DropDownMenuApplestyle

There are 3 css files:

• ddlevelsmenu-base.css
• ddlevelsmenu-sidebar.css
• ddlevelsmenu-topbar.css

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

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

Conforms to joomla.org guidelines.

Questions? Problems?

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