Drop Down Menu Apple style
Written by kksou   
Thursday, 09 October 2008

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

Unique Features

  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.

Latest Version
v1.5.6 (for Joomla 1.5), v1.6.6 (for Joomla 1.6), v1.7.6 (for Joomla 1.7) and v2.5.6 (for Joomla 2.5)
Released Feb 25, 2012

  • Native support for Joomla 1.6, 1.7 and 2.5!
  • Updated the plugin with the latest code from dynamicdrive.com
  • The default menu is "Drop Down Menu" or "topbar". Demo here.
  • There is now an additional "sidebar" menu type. Demo here. Use menutype:sidebar to switch to sidebar.
  • Note: For some reason, the latest code from dynamicdrive.com does not work within Joomla 1.0. So the version for Joomla 1.0 stays at v1.05. Also, the Joomla 1.0 version does not support sidebar.

Demo

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

Sample Code

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}

Download

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

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

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

Read Me First!

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

How to use the "Drop Down Menu Apple style" 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?
For Joomla 2.5, please refer to: How to enter HTML tags, javascript and PHP codes in Joomla 2.5?
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:
  2. {DropDown_Menu_Apple_style}
    ... menu items ... 
    {/DropDown_Menu_Apple_style}
    

  3. The default displays the menu as a "Drop Down Menu". To display the menu as a sidebar, use the syntax:
  4. {DropDown_Menu_Apple_style menutype:sidebar}
    ... menu items ... 
    {/DropDown_Menu_Apple_style}
    

    You can see a Live Demo here.

  5. Please refer to the sample code above. Each menu item is defined using the standard HTML links <a href="url">label</a>. For example:
  6. {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}
    

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

  8. 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:
  9. {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}
    

  10. 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:
  11. {DropDown_Menu_Apple_style clear_both:1}
    ... menu items ... 
    {/DropDown_Menu_Apple_style}
    

  12. 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:
  13. Menu 1 definition:

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

    Menu 2 definition:

    {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.
  • 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

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"

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


 

Comments  

 
# naru 2012-02-22 02:57
:lol:
 
 
# Suran 2012-03-09 23:48
I m confused where do i insert the code:
{DropDown_Menu_ Apple_style}
... menu items ...
{/DropDown_Menu_A pple_style}
 
 
# kksou 2012-03-10 20:28
Hi,

This is a plugin. As the name suggests, a plugin is for use within a Joomla article.

So go to the Article Manager, create a new article and insert the tags or code you've listed above into the article. You will see the menu appearing within the article.

Regards,
/kksou
 
 
# Ola 2012-03-22 16:20
Hello sir, pls i have a top menu navigation bar and i want to make those tabs at the top drop down using this module..pls how do i go about it??
 
 
+1 # kksou 2012-03-22 18:37
Hi,

This is a plugin. As the name suggests, a plugin is for use within a Joomla article.

This plugin is used for displaying a simple menu within an article - especially if the article is very long.

If you want to achieve something like the top of this page is doing - navigation bar with drop down menus, this is done in the Joomla template, and not by a plugin or module.

Regards,
/kksou
 
 
# Walter Johnson 2012-09-26 09:22
Ola, all you have to do is use the normal menu you have established in Joomla as your top menu - unpublish it. Get an "Article as Module" kind of module for Joomla and install it. Then make a menu article and put the dropdownmenuapp lestyle coding into that. Then publish and save that article. Then in the Article as Module module, select your menu article as the artcle to be displayed, and set the position for the module to whatever the position is for your top module. Save it all and good luck. That should get you started.
 
 
# Walter Johnson 2012-09-26 09:23
Sorry top menu position, not top module for position of the module
 
 
# caroline leonard 2013-03-18 03:51
Hi, the plugin doesn't appear to be working for me any suggestions?
 
 
# Marcel Upfold 2013-03-20 01:11
On Joomla 2.5 using JA-T3 Framework Blank Template the menu options are not displayed corredtly horizontally, however with the sidebar option it is displayed vertically. Horizontally it is displayed as steps. Menu1, line break, menu2 line break etc.
How do I assign a "module" to be displayed with an option in one of the menus instead of an external link.?
 
 
# Marcel Upfold 2013-03-22 05:05
I have tried the plugin. It seems to be sort of OK bar that it displays a yeloow background x-rows high.
Also the menu is not lined up with the background gray banner.
Any help on how and where in the CSS files one can play...
 
< Prev   Next >

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