Page 6 of 6

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

Posted: Sat Aug 29, 2009 6:58 pm
by masssalem
M4rc0 wrote: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 :D
Thank you so much for the reply. You have made my day! :D

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

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.

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

Posted: Thu Sep 17, 2009 6:56 am
by 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

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

Posted: Tue Sep 29, 2009 3:24 am
by 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

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

Posted: Wed Sep 30, 2009 6:11 pm
by JTema
Everything seems normal on your site.

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

Posted: Wed Sep 30, 2009 7:20 pm
by 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...

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

Posted: Tue Oct 06, 2009 11:16 am
by 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.

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

Posted: Fri Oct 23, 2009 12:16 am
by pearllysun
spollard wrote: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

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

Posted: Mon Nov 09, 2009 9:50 pm
by 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

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

Posted: Tue Nov 10, 2009 12:20 am
by pearllysun
muratyil wrote: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 ....... :)

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

Posted: Sun Nov 22, 2009 9:37 pm
by JTema
pearllysun wrote: wow ! this template look's great ....... :)
It's for sale. :D

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

Posted: Sun Dec 20, 2009 7:13 am
by 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

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

Posted: Mon Dec 21, 2009 3:35 am
by 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?

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

Posted: Mon Dec 21, 2009 9:29 am
by 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.

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

Posted: Mon Dec 21, 2009 3:02 pm
by JTema
crucialclick wrote: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.

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

Posted: Wed Feb 10, 2010 5:28 pm
by 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.

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

Posted: Fri Mar 26, 2010 1:42 pm
by 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

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

Posted: Fri Mar 26, 2010 1:59 pm
by JTema

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Thu Sep 23, 2010 11:44 pm
by 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

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Fri Sep 24, 2010 10:42 am
by 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

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Sat Sep 25, 2010 3:10 am
by 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? :pop

Edgar

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Sat Sep 25, 2010 7:35 am
by 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

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Sat Sep 25, 2010 7:36 am
by ced1870
Re , question : what browser do you use ?

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Sat Sep 25, 2010 3:38 pm
by popolvuh
Google chrome...

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Sun Sep 26, 2010 4:10 pm
by ced1870
did you test with option 'use menu css' ?
by my side it looks to work well

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Sat Apr 30, 2011 12:21 pm
by C0nw0nk
Thanks for this tut :D so useful and amazing!

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Sun May 01, 2011 5:35 pm
by 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!

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Mon May 02, 2011 4:55 pm
by garfield19
garfield19 wrote: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?!

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Sun Nov 20, 2011 2:26 am
by 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

Re: [TUT] How to add a drop down mootools menu to your templ

Posted: Wed Nov 30, 2011 8:38 am
by lanamana
Lukasz wrote: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.