jQuery Slide-Down-Box Menu for Joomla 2.5 & 3.x

Preview Download 2.5 3.0+

Here is my a navigation menu, that is a special module, which works with Joomla 2.5. This module use the jQuery library and the jQuery Easing Plugin to render the slide-down and image animation. This module is perfect for those websites that needs more animation then the other ones.

The module setup require some explanation, so I will teach you how to use it:

1. Download the module and install it to your Joomla system.

2. Publish it on a module position after you are happy with the parameter setup

2.1. jQuery = Enable or disable the latest jQuery library (that is loaded from google). If another module or your default template is already using the jQuery library, you don’t have to load it via this module.

2.2. Module Width = The default value is 960 (in pixels), but you can change this to fit into any template.

2.3. Number of Items = Here you will have to insert the number of first level menu items, to fit the full with of menu container (in this case 960 pixels). I would recommend you using between 5-7 menu items. With less or more items, the menu will not look very nice.

The other parameters do not require any explanation.

3. Go to Menu Manager > Your Menu and create a new menu item. Set up the title and choose an image for the menu item, using the parameters in the Link Type Options tab. See the image:

4. Save the menu item and repeat the step 3.

5. You can add second level items as well. The module does not support more then 2 levels.

Future development of the SlideDown Box Menu

I’m planning to add more parameters for better customization. Would like to make the su-menus to go deeper. Would like to do some improvements on how the menu items are displayed and disable the the “Number of Items” parameter.

Hope you like and enjoy this slick navigation menu. I’m waiting for your feedback and bug reporting. Thank you!

donkuliano October 3, 2012 Reply

Is there a vertical version of this menu?…I think its great and my head just spinning with ideas.

    Hi! There is no vertical styling available for this menu. Will consider creating one in the future.

When enabling multiple Jextensions in Joomla 3 it disables any of the others you have enabled. So you can effectively only have 1 enabled at a time. Would be nice to have them all working on the same page.

    Hi! This module can be used only once on the same page. We will consider updating the module in the next days, so you can use multiple modules on the same page.

hi, this is an awesome plugin, but i dont get it to work in combination with “fun supersized” extension http://tiny.cc/dfizlw – if you have any hints, please tell me – best regards

    Hi! In the source code of your website, I saw that you are loading jQuery twice (the latest version with our menu module and 1.6.4 version with the funsupersized module). I would recommend you to disable the jQuery library on our module and see if this still works. If it does not, disable the 1.6.4 version, if that is possible. This is what I can suggest.
    Please let us know if you were able to fix it!

hi, thanks for taking a look, i have allready tried vica versa as both modules can disable jquery and also noconflict in jquery easy but doesnt solve the problem sadly

    Maybe the problem comes from other jQuery plugins. This menu use the jQuery Easing 1.3 plugin. Now I have added the feature to disable this in the module parameters.
    Update the module, disable the jQuery and the Easing plugin, and let me know what happens. If it does not work, will try something else.

thanks again for ultrafast suppert, but if i disable easing and jquery supersized works your menu doesnt

    If it is not very urgent for you, please wait few days and we will develop the slideshow, that has no conflicts with the menu.

no its not ultra urgent and it would be awesome if you could solve this -thanks a lot

    Omikron, please check the main page for the newly released image gallery. Test it, and let me know if there is any problem.

you are the man, thanks a lot now it works with some little improvements it will be perfect

omg!!. I first came across this menu on another jquery site. I managed to get it working in my site. Then i discovered CMSMS. After some painstaking hours i finally got it working in there as well. Then i discovered Joomla. I have been spending the last days frustrated to try and get it to work in joomla. I was almost ready and just needed the easing plugin. So now, after 4 days puzzling i find this version of this fantastic menu!. You can imagine how hard i hit myself on the head! 4 days work and frustration that werent really neccesary!. Guess i need to search better :).. Oh well, i’m just really glad this menu is here for joomla.

I tried to get this Menu to look as neat as the Demo, but somewhere along the way I seem to miss some options. How could I exactly duplicate the demo?

    The tutorial is not helping you? Probably I should do a video tutorial for the setup.

Any help here would be nice. I’m missing the options to get a linebreak and a change of font/color.

Welcome! (Linebreak?)
Welcome to jextensions (other font, center, smaller and gray)

    So you are referring to the small text under the menu name. That actually is the menu title, that can be added to the menu, when creating or editing it.

Hi mr. admin,

This great.
I really like your module JE SlideDown Box Menu.
I tried on my default joomla template protostar, but when I click on the sub menu after that I wanna go back home and click again home menu the dropdown was not working, what should I do with the parameter?
Big Thanks.

    Is the jQuery library loaded via this module or your template loads it? It is possible that on your sub page there is some javascript conflict because of the template or other modules and that is why the menu is not working properly. If you would have an online demo it would be easier for me to tell why it is not working.

Join the Discussion!

Your email address will not be published. Required fields are marked *