[TUT] How to add a drop down mootools menu to your template

[masssalem]

Hello massalem, if I get your question right:

Go to your menu, Click "NEW" and do the normal process BUT
You will see a box on the lower left called "Parent", just select a parent there.

Hope that helped. Don't be frustrated, it happens

Thank you so much for the reply. You have made my day!

That makes sense. Why I didn't think of that before I don't know.

Now that I know that, I have discoverd a problem

At first nothing would show up so I set the menu Module to list. Now I can see the test drop down but look what happens.

http://livingthenight.com/

1st menu in top menu. That won't do. Same result in Firefox and Safari.

[JTema]

The transition effects are set inside moomenu.js, to customize the transition add the following code before {duration: 300} (line 94 and 97)
Code:
{transition: Fx.Transitions.XXX.YYY},

where XXX is the transition you want to apply and YYY the mode (easeIn, easeOut or easeInOut)

Here's an example (change code from line 92 till 99 with this):
Code:
if (this.parent._id)
{
this.myFx2 = new Fx.Style(this, 'width', {transition: Fx.Transitions.Bounce.easeOut}, {duration: 300});
this.myFx2.set(0);
}else{
this.myFx2 = new Fx.Style(this, 'height', {transition: Fx.Transitions.Bounce.easeOut}, {duration: 300});
this.myFx2.set(0);
}

You can also set the duration you want

All the transition effects are below just put one of the effects to line into the correct place (moomenu.js) that I highlighted

if (this.parent._id)
{
this.myFx2 = new Fx.Style(this, 'width', {transition: Fx.Transitions.Bounce.easeOut}, {duration: 300});
this.myFx2.set(0);
}else{
this.myFx2 = new Fx.Style(this, 'height', {transition: Fx.Transitions.Bounce.easeOut}, {duration: 300});
this.myFx2.set(0);
}

EFFECT LİST;
Quad.easeOut
Quad.easeIn
Quad.easeInOut
Cubic.easeOut
Cubic.easeIn
Cubic.easeInOut
Quart.easeOut
Quart.easeIn
Quart.easeInOut
Quint.easeOut
Quint.easeIn
Quint.easeInOut
Expo.easeOut
Expo.easeIn
Expo.easeInOut
Circ.easeOut
Circ.easeIn
Circ.easeInOut
Sine.easeOut
Sine.easeIn
Sine.easeInOut
Back.easeOut
Back.easeIn
Back.easeInOut
Bounce.easeOut
Bounce.easeIn
Bounce.easeInOut
Elastic.easeOut
Elastic.easeIn
Elastic.easeInOut

[tehsaint]

I'm having an interesting problem. From the home page, all the sub-menus work great. but once I leave the home page, the first item in the submenu looks funny. If I go back to the home page, its back to normal.

Any thoughts?

here is the site: http://www.scstx.info/index.php

[JTema]

Everything seems normal on your site.

[tehsaint]

if you click on any of the "community" sub-menus, then go back to "community", the submenu where you currently are displays with a double ">>" and highlights the option weird. I notice that it doesn't do that if not on a page that is under the submenu, however...

[spollard]

Awesome tutorial. Thanks!

I've applied this to my school's website. It works fine apart from the fact that all of the menus are appearing on the left, one on top of the other. Any idea why this might be?

Link:

http://www.alexandrapark.haringey.sch.uk


Edit: The problem appears to be with IE6, which is used on all of the computers in the school. Is there some sort of fix I could apply for IE6?

Cheers.

[pearllysun]

Awesome tutorial. Thanks!

I've applied this to my school's website. It works fine apart from the fact that all of the menus are appearing on the left, one on top of the other. Any idea why this might be?

Link:

http://www.alexandrapark.haringey.sch.uk


Edit: The problem appears to be with IE6, which is used on all of the computers in the school. Is there some sort of fix I could apply for IE6?

Cheers.

wow ...ur site looks great .......can you pass me the tutorial for the menu ??

thanks

[JTema]

Great tutorial special thanks to ah72. I ve made a great professional template and a dropdown using this tutorial you can preview here;
http://www.joomlatema.net/futbolfan

[pearllysun]

Great tutorial special thanks to ah72. I ve made a great professional template and a dropdown using this tutorial you can preview here;
http://www.joomlatema.net/futbolfan

wow ! this template look's great .......

[JTema]

wow ! this template look's great .......

It's for sale.

[epsi]

Cheers piotr_cz,

Finally found drop down menu in combination with MooTools 1.2.x.
I'm using MenuMatic instead of moomenu or any JA_Purity based.

You can see experimental moo12 template showcase in iluni.org.
Don't mind the looks, template is shareable, and the site is non profit.
http://iluni.org/component/phocadownload/section/4-

http://forum.joomla.org/viewtopic.php?f=466&t=453476

~epsi

[crucialclick]

Wouldn't it make more sense to simply use an extension that does this for you? Then customize the CSS to match your style?

http://extensions.joomla.org/extensions ... menus/9135

Thanks for the tutorial, it's helpful for some, I'm sure - but with thousands of extensions available, and the entire purpose of extensions being features that extend the functionality of Joomla - wouldn't it make sense to just suggest a free menu extension that does this instead of explaining how to do it all from scratch?

[piotr_cz]

epsi > Thanks!
crucialclick > I guess it depends on your preferences.
Many extensions are way too bloaty and in simple case like a menu, I prefer to add (do) the code myself.

MooTools 1.1.x may be too restricting if you'd like to play more with the site (in other words, 1.1.x is pretty outdated) so whenever it's possible I use 1.2.x instead. Joomla 1.6 will finally use it anyway when it's out.

[JTema]

Wouldn't it make more sense to simply use an extension that does this for you? Then customize the CSS to match your style?

http://extensions.joomla.org/extensions ... menus/9135

Thanks for the tutorial, it's helpful for some, I'm sure - but with thousands of extensions available, and the entire purpose of extensions being features that extend the functionality of Joomla - wouldn't it make sense to just suggest a free menu extension that does this instead of explaining how to do it all from scratch?

I remember that I ve had some browser problems with that extension.And I could not fixed.

[ilia_gjoka]

Hello,

First i would like to thank you for the great menu and all the tips i found in this blog.
I have installed the menu in my website and work great, but the problem is that after the installation i am having real problem in Internet Explorer. The website work and look great in Firefox but in IE i cant see the articles and also despair also the menu in the left position of my RedEvo_Aphelion template.
Here is the URL of my website: www.fratia-al.com

If anyone can help me please leave a replay to this.

Thank You!
Ilia Gjoka.

[arminbaig]

@ ah72,

I have been trying to apply your method for getting drop downs on my top navigation menu.

Just registered with forum.joomla.org but apparently I can't download any attachments posted.

I am stuck at the moomenu.js stage. Is there any other way I can get this file.

tried searching for it on the web but cant find it.

Thanks
armin

[JTema]

You can download here;
http://mootools.net/download/get/mootoo ... core-nc.js

[popolvuh]

Hi ah72!

I followed the steps but I got some issues , Any idea why I can got this in my template?

http://www.mexicoespectacular.com/

Thanks.

Edgar

[ced1870]

hi
if you are looking for a dropdown menu, you can
- do it yourself in the template, a tuto based on what is said in this topic :
http://www.joomlack.fr.nf/en/tutorials- ... ontal.html

or
- use a module which make the job for you
http://www.joomlack.fr.nf/en/joomla-ext ... anced.html

[popolvuh]

Hi ced1870,

I use the second option and almost solve the problem, but now the module display the submenus in a incorrect way ...like the pic shows...

Any suggestion?

Edgar

[ced1870]

hi
tested on my site with rhuk, the subitems shows vertically.
Try to use option 'use css of the module' to 'yes' and tell me what happen

[ced1870]

Re , question : what browser do you use ?

[popolvuh]

Google chrome...

[ced1870]

did you test with option 'use menu css' ?
by my side it looks to work well

[C0nw0nk]

Thanks for this tut so useful and amazing!

[garfield19]

OKie... I have this website for which I am using the rhuk_milkyway template. I was able to create the drop down menu. But the whole formatting is getting screwed up! I was just not able to figure out where to begin setting things right!

I am not aware of php programming or extensive web development or css modifications. So any help or guidance in this regard would be a great favor!

I even read through the entire set of posts here, but cudn't figure out how to solve the problem. I've attached the snapshots of the issue. U'll be able to see that,

1. The drop down, isn't actually dropping down from the parent menu button, but actually appears on TOP of it.

2. The background of the drop-down is all dark and not pleasant to look at.

I've attached the css template too. Please.. plz plz plz help!

[garfield19]

I am not aware of php programming or extensive web development or css modifications. So any help or guidance in this regard would be a great favor!

I even read through the entire set of posts here, but cudn't figure out how to solve the problem. I've attached the snapshots of the issue. U'll be able to see that,

1. The drop down, isn't actually dropping down from the parent menu button, but actually appears on TOP of it.

2. The background of the drop-down is all dark and not pleasant to look at.

I've attached the css template too. Please.. plz plz plz help!

any help... on this please?!

[rogue13_13]

Hello, I am curious, does this tutorial work on 1.7 templates; the Atomic templates in particular?

I made the changes suggested in this tutorial within my Atomic template, but the output is the default vertical menu. Atomic uses Blueprint, and I think that is my problem, I can't figure out where the CSS should be posited. I tried to put it in:screen.css, template.css, and src.css.

Any help would be appreciated.

Note: I believe my problem is due to the location of the CSS because my original horizontal menu without dropdown did not disappear until I saved the CSS.

The url with this issue is www.blahstopper.com

[lanamana]

Hello lizaa,
You can add a specific id to each class and attach style to it. I've found some explanation here:
http://css-tricks.com/the-difference-be ... and-class/
Basically 'ID’s are unique' and 'Classes are NOT unique'. And ID's and Classes names should be without space (class="active_item1").
I think you should try to use some editor like 'Dreamweaver' it may help you with syntax, but probably not all css options are there.

Hope that helps.
Łukasz

Thank you Lukasz for your replay, I just want to say that i didn't create this classes by my self i just viewed the source of my web page and saw these classes, i don't know exactly where did they come from? (i think it is generated dynamically ), any way all i need is to write these classes on my css file and add a background image for each menu item.

can you help me on that?
thank you.