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

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
masssalem
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Thu Aug 27, 2009 3:09 pm

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

Post by masssalem » Sat Aug 29, 2009 6:58 pm

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.

 
User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 617
Joined: Sun Apr 13, 2008 8:10 pm

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

Post by JTema » Thu Sep 17, 2009 6:56 am

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
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

tehsaint
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Tue Sep 29, 2009 1:36 am

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

Post by tehsaint » Tue Sep 29, 2009 3:24 am

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

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 617
Joined: Sun Apr 13, 2008 8:10 pm

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

Post by JTema » Wed Sep 30, 2009 6:11 pm

Everything seems normal on your site.
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

tehsaint
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Tue Sep 29, 2009 1:36 am

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

Post by tehsaint » Wed Sep 30, 2009 7:20 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue Oct 06, 2009 10:52 am

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

Post by spollard » Tue Oct 06, 2009 11:16 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Fri Jun 05, 2009 9:31 pm

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

Post by pearllysun » Fri Oct 23, 2009 12:16 am

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

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 617
Joined: Sun Apr 13, 2008 8:10 pm

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

Post by JTema » Mon Nov 09, 2009 9:50 pm

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
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

pearllysun
Joomla! Apprentice
Joomla! Apprentice
Posts: 30
Joined: Fri Jun 05, 2009 9:31 pm

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

Post by pearllysun » Tue Nov 10, 2009 12:20 am

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

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 617
Joined: Sun Apr 13, 2008 8:10 pm

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

Post by JTema » Sun Nov 22, 2009 9:37 pm

pearllysun wrote: wow ! this template look's great ....... :)
It's for sale. :D
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

User avatar
epsi
Joomla! Apprentice
Joomla! Apprentice
Posts: 26
Joined: Wed May 20, 2009 7:32 pm
Contact:

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

Post by epsi » Sun Dec 20, 2009 7:13 am

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 226
Joined: Thu Oct 09, 2008 1:42 am

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

Post by crucialclick » Mon Dec 21, 2009 3:35 am

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?
------------------------------------------------------------
Custom Joomla! Templating and Site Building
Latest Crucial Click Joomla! Creation: FCCHI
Best Name Badges - Name Tags
Fusion Badge - Name Badges

User avatar
piotr_cz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 164
Joined: Mon Mar 30, 2009 11:27 am
Location: Europe
Contact:

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

Post by piotr_cz » Mon Dec 21, 2009 9:29 am

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.

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 617
Joined: Sun Apr 13, 2008 8:10 pm

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

Post by JTema » Mon Dec 21, 2009 3:02 pm

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.
http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

ilia_gjoka
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Feb 08, 2010 6:24 pm

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

Post by ilia_gjoka » Wed Feb 10, 2010 5:28 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri Mar 26, 2010 12:55 pm

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

Post by arminbaig » Fri Mar 26, 2010 1:42 pm

@ 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

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 617
Joined: Sun Apr 13, 2008 8:10 pm

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

Post by JTema » Fri Mar 26, 2010 1:59 pm

http://www.joomlatema.net - Joomla Extensions and Templates
http://eranews.joomlatema.net/ - EraNews Responsive Joomla News And Magazine Template

User avatar
popolvuh
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Fri Sep 02, 2005 8:26 pm
Location: Mexico
Contact:

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

Post by popolvuh » Thu Sep 23, 2010 11:44 pm

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
You do not have the required permissions to view the files attached to this post.

ced1870
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 128
Joined: Sun Oct 19, 2008 10:18 am
Location: Alsace
Contact:

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

Post by ced1870 » Fri Sep 24, 2010 10:42 am

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
Tutorials, extensions, design and template for Joomla!
http://www.joomlack.fr
Maximenu_CK for drop-down, multicolumn, link description, module loading, and documentation
Template Creator CK - the Joomla! component to create your own templates

User avatar
popolvuh
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Fri Sep 02, 2005 8:26 pm
Location: Mexico
Contact:

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

Post by popolvuh » Sat Sep 25, 2010 3:10 am

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
You do not have the required permissions to view the files attached to this post.

ced1870
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 128
Joined: Sun Oct 19, 2008 10:18 am
Location: Alsace
Contact:

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

Post by ced1870 » Sat Sep 25, 2010 7:35 am

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
Tutorials, extensions, design and template for Joomla!
http://www.joomlack.fr
Maximenu_CK for drop-down, multicolumn, link description, module loading, and documentation
Template Creator CK - the Joomla! component to create your own templates

ced1870
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 128
Joined: Sun Oct 19, 2008 10:18 am
Location: Alsace
Contact:

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

Post by ced1870 » Sat Sep 25, 2010 7:36 am

Re , question : what browser do you use ?
Tutorials, extensions, design and template for Joomla!
http://www.joomlack.fr
Maximenu_CK for drop-down, multicolumn, link description, module loading, and documentation
Template Creator CK - the Joomla! component to create your own templates

User avatar
popolvuh
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Fri Sep 02, 2005 8:26 pm
Location: Mexico
Contact:

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

Post by popolvuh » Sat Sep 25, 2010 3:38 pm

Google chrome...

ced1870
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 128
Joined: Sun Oct 19, 2008 10:18 am
Location: Alsace
Contact:

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

Post by ced1870 » Sun Sep 26, 2010 4:10 pm

did you test with option 'use menu css' ?
by my side it looks to work well
Tutorials, extensions, design and template for Joomla!
http://www.joomlack.fr
Maximenu_CK for drop-down, multicolumn, link description, module loading, and documentation
Template Creator CK - the Joomla! component to create your own templates

User avatar
C0nw0nk
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 248
Joined: Tue Jun 15, 2010 1:12 am
Location: United Kingdom, London
Contact:

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

Post by C0nw0nk » Sat Apr 30, 2011 12:21 pm

Thanks for this tut :D so useful and amazing!

garfield19
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Wed Apr 27, 2011 12:48 am

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

Post by garfield19 » Sun May 01, 2011 5:35 pm

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!
You do not have the required permissions to view the files attached to this post.

garfield19
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Wed Apr 27, 2011 12:48 am

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

Post by garfield19 » Mon May 02, 2011 4:55 pm

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

rogue13_13
Joomla! Apprentice
Joomla! Apprentice
Posts: 26
Joined: Sat Oct 29, 2011 4:19 pm

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

Post by rogue13_13 » Sun Nov 20, 2011 2:26 am

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Nov 30, 2011 8:32 am
Contact:

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

Post by lanamana » Wed Nov 30, 2011 8:38 am

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.

 

Locked

Return to “Templates for Joomla! 1.5”