The Drop Down Menu Apple style is a very neat and cool javascript-based drop down menu provided by dynamicdrive.com.
Unique Features
- Support infinite levels of sub menus!
- Display of submenus is fast and responsive
- Easily create a drop down menu within a content item or article.
- Defining the submenus is as easy as 123.
- Complete customization of the menu's look and feel through css (e.g. foreground/background color, color, padding, margin, fonts, etc.)
- 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.
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="/php-gtk2/test1.html">Test1</a> + <a href="/php-gtk2/#">Item 1a</a> + <a href="/php-gtk2/#">Item 2a</a> + <a href="/php-gtk2/#">Item Folder 3a</a> ++ <a href="/php-gtk2/#">Sub Item 3.1a</a> ++ <a href="/php-gtk2/#">Sub Item 3.2a</a> ++ <a href="/php-gtk2/#">Sub Item 3.3a</a> ++ <a href="/php-gtk2/#">Sub Item 3.4a</a> + <a href="/php-gtk2/#">Item 4a</a> + <a href="/php-gtk2/#">Item Folder 5a</a> ++ <a href="/php-gtk2/#">Sub Item 5.1a</a> ++ <a href="/php-gtk2/#">Item Folder 5.2a</a> +++ <a href="/php-gtk2/#">Sub Item 5.2.1a</a> +++ <a href="/php-gtk2/#">Sub Item 5.2.2a</a> +++ <a href="/php-gtk2/#">Sub Item 5.2.3a</a> +++ <a href="/php-gtk2/#">Sub Item 5.2.4a</a> + <a href="/php-gtk2/#">Item 6a</a> <a href="/php-gtk2/test2.html">Test2</a> + <a href="/php-gtk2/#">Item 1b</a> + <a href="/php-gtk2/#">Item 2b</a> + <a href="/php-gtk2/#">Item Folder 3b</a> ++ <a href="/php-gtk2/#">Sub Item 3.1b</a> ++ <a href="/php-gtk2/#">Sub Item 3.2b</a> ++ <a href="/php-gtk2/#">Sub Item 3.3b</a> ++ <a href="/php-gtk2/#">Sub Item 3.4b</a> + <a href="/php-gtk2/#">Item 4b</a> + <a href="/php-gtk2/#">Item Folder 5b</a> ++ <a href="/php-gtk2/#">Sub Item 5.1b</a> ++ <a href="/php-gtk2/#">Item Folder 5.2b</a> +++ <a href="/php-gtk2/#">Sub Item 5.2.1b</a> +++ <a href="/php-gtk2/#">Sub Item 5.2.2b</a> +++ <a href="/php-gtk2/#">Sub Item 5.2.3b</a> + <a href="/php-gtk2/#">Item 6b</a> <a href="/php-gtk2/test3.html">Test3</a> <a href="http://www.kksou.com">Test4</a> + <a href="/php-gtk2/test31.html">test4.1</a> + <a href="/php-gtk2/test32.html">test4.2</a> + <a href="/php-gtk2/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.
Joomla\CMS\User\UserJoomla 1.5.x: DropDownMenuApplestyle_v1.56.zip
Joomla 1.6.x: DropDownMenuApplestyle_v1.66.zip
Joomla 1.7.x: DropDownMenuApplestyle_v1.76.zip
Joomla 2.5.x: DropDownMenuApplestyle_v2.56.zip
How to install (Joomla 1.0.x)
- Download the plugin and unzip it into a folder.
- From the Installers menu, select mambots. In the field "Install directory", enter the folder location (where you unzipped the file) and click Install.
- From the Mambots menu, select Site Mambots.
- 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)
- Download the plugin and unzip it into a folder.
- From the Extensions menu, select Install/Uninstall. In the field "Install directory", enter the folder location (where you unzipped the file) and click Install.
- From the Extensions menu, select Plugin Manager.
- Enable the plugin "Drop Down Menu Apple style" - make sure there is a green tick in the Enabled column.
- 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.
- To insert the Drop Down Menu Apple style, use the syntax:
- The default displays the menu as a "Drop Down Menu". To display the menu as a sidebar, use the syntax:
- Please refer to the sample code above. Each menu item is defined using the standard HTML links <a href="/php-gtk2/url">label</a>. For example:
- 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. - 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
: - 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:
- 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:
{DropDown_Menu_Apple_style} ... menu items ... {/DropDown_Menu_Apple_style}
{DropDown_Menu_Apple_style menutype:sidebar} ... menu items ... {/DropDown_Menu_Apple_style}
You can see a Live Demo here.
{DropDown_Menu_Apple_style} <a href="/php-gtk2/test1.html">Test1</a> + <a href="/php-gtk2/#">Item 1a</a> + <a href="/php-gtk2/#">Item 2a</a> + <a href="/php-gtk2/#">Item Folder 3a</a> ++ <a href="/php-gtk2/#">Sub Item 3.1a</a> ++ <a href="/php-gtk2/#">Sub Item 3.2a</a> ++ <a href="/php-gtk2/#">Sub Item 3.3a</a> ++ <a href="/php-gtk2/#">Sub Item 3.4a</a> + <a href="/php-gtk2/#">Item 4a</a> + <a href="/php-gtk2/#">Item Folder 5a</a> ++ <a href="/php-gtk2/#">Sub Item 5.1a</a> ++ <a href="/php-gtk2/#">Item Folder 5.2a</a> +++ <a href="/php-gtk2/#">Sub Item 5.2.1a</a> +++ <a href="/php-gtk2/#">Sub Item 5.2.2a</a> +++ <a href="/php-gtk2/#">Sub Item 5.2.3a</a> +++ <a href="/php-gtk2/#">Sub Item 5.2.4a</a> + <a href="/php-gtk2/#">Item 6a</a> {/DropDown_Menu_Apple_style}
{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}
{DropDown_Menu_Apple_style clear_both:1} ... menu items ... {/DropDown_Menu_Apple_style}
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
- ddlevelsmenu-base.css
- ddlevelsmenu-sidebar.css
- ddlevelsmenu-topbar.css
There are 3 css files:
Version History
- v1.02 (for Joomla 1.0) and v1.52 (for Joomla 1.5)
Released October 12, 2008 - 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 - v1.0.5 (for Joomla 1.0) and v1.5.5 (for Joomla 1.5)
Released May 6, 2010
You can now display two or more menus in the same content item!.
Fixed the warning message "Undefined property: Plugin_DropDownMenuApplestyle::$menu_height in DropDownMenuApplestyle.lib.php on line 126"
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
{DropDown_Menu_Apple_style}
... menu items ...
{/DropDown_Menu_Apple_style}
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
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
How do I assign a "module" to be displayed with an option in one of the menus instead of an external link.?
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...
RSS feed for comments to this post