[TUT] How to add a drop down mootools menu to your template
-
- Joomla! Apprentice
- Posts: 14
- Joined: Fri Oct 03, 2008 8:00 pm
Re: [TUT] How to add a drop down mootools menu to your template
when you say only working as css do you mean you can only control it by css?
-
- Joomla! Apprentice
- Posts: 13
- Joined: Mon Oct 02, 2006 7:14 am
Re: [TUT] How to add a drop down mootools menu to your template
Just that the javascript effects/transitions will not apply. Basically what you are seeing on the site is just what is generated by the CSS.
-
- Joomla! Apprentice
- Posts: 14
- Joined: Fri Oct 03, 2008 8:00 pm
Re: [TUT] How to add a drop down mootools menu to your template
Ok i can only suggest some things, dont take them in patronising way "not intended"
Firstly i would strongly recommend going through TUT again just to make sure .... and read all posts questions and fixes (helped me fix all)
2nd is your path to the .js correct? I mean your is pointing to the folder /js/moomenu.js
your js has this line?
did u check this


Firstly i would strongly recommend going through TUT again just to make sure .... and read all posts questions and fixes (helped me fix all)
2nd is your path to the .js correct? I mean your
Code: Select all
:<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/moomenu.js"></script>
your js has this line?
Code: Select all
Window.onDomReady(function() {new DropdownMenu($E('#hornav ul.menu_horiz'))});
Code: Select all
go to the admin panel >> Module Manager >> Click on the main menu
under "Advanced Parameters" set "Menu Class Suffix" to "_horiz" (without quotes)

- M4rc0
- Joomla! Explorer
- Posts: 311
- Joined: Wed Sep 27, 2006 1:47 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hi,
I'm desperately looking for a moomenu like this one.
I can't get it to work. I've tried everything:
- module positions (works as the menu is loaded)
- including css (works, if i add red border on the nav it shows a red border)
- js (not sure)
- menu tag id is "hornav"
- menu classs suffix is "_horiz"
What else could be missing?
I'm doing my own template, I don't have any joomla default CSS in it.
Also I'm not loading mootools but i have wich includes in the head of the template.
The CSS is beeing loaded, but it looks so ugly that i don't know if it should look like that.
Everything is a mess (i have many child items on some items) and i see bullet list images and default link styling. But CSS is not a problem, I have my own suckerfish CSS here and that's easy to fix and find, what's really needed and usefull is the mootools effect.
Any suggestions? I really need this.
I'm considering in using jquery for it as i tested and it worked, but that can mess things up a bit with together with mootools
I'm desperately looking for a moomenu like this one.
I can't get it to work. I've tried everything:
- module positions (works as the menu is loaded)
- including css (works, if i add red border on the nav it shows a red border)
- js (not sure)
- menu tag id is "hornav"
- menu classs suffix is "_horiz"
What else could be missing?
I'm doing my own template, I don't have any joomla default CSS in it.
Also I'm not loading mootools but i have
Code: Select all
<jdoc:include type="head" />
Code: Select all
media/system/js/mootools.js
The CSS is beeing loaded, but it looks so ugly that i don't know if it should look like that.
Everything is a mess (i have many child items on some items) and i see bullet list images and default link styling. But CSS is not a problem, I have my own suckerfish CSS here and that's easy to fix and find, what's really needed and usefull is the mootools effect.
Any suggestions? I really need this.
I'm considering in using jquery for it as i tested and it worked, but that can mess things up a bit with together with mootools

-
- Joomla! Fledgling
- Posts: 2
- Joined: Mon Feb 26, 2007 2:02 pm
Re: [TUT] How to add a drop down mootools menu to your template
Thanks so much for your brilliany tut!!! Got everything working after spending endless hours trying to figure it out. Really appreciate you taking the time to post this!!
-
- Joomla! Apprentice
- Posts: 13
- Joined: Mon Oct 02, 2006 7:14 am
Re: [TUT] How to add a drop down mootools menu to your template
I'm still unable to get the JavaScript working. The CSS portion of the ul menu is there and working, but the JavaScript isn't working with the menu. When I turn off JavaScript for my browser it makes no difference. Is there anyone that can take a look and see if there is something that I've missed. I've gone through the TUT multiple times so I'm not being lazy...just dumb.
The site is www.yourprefix.com which is running on Joomla 1.5.7
Thanks to anyone that can help.
The site is www.yourprefix.com which is running on Joomla 1.5.7
Thanks to anyone that can help.
-
- Joomla! Apprentice
- Posts: 13
- Joined: Mon Oct 02, 2006 7:14 am
Re: [TUT] How to add a drop down mootools menu to your template
Heh. Minutes after my plea for help I discovered the solution myself. Thanks to everyone who tried to help. My template wasn't loading this...
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
So of course without the core there wasn't going to be any JavaScript effects.
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
So of course without the core there wasn't going to be any JavaScript effects.
-
- Joomla! Fledgling
- Posts: 2
- Joined: Mon Feb 26, 2007 2:02 pm
Re: [TUT] How to add a drop down mootools menu to your template
Hi Everyone,
I have got the drop down menu working, only thing is that when I hover over the menu, the drop down works, but as I move over to select it, the menus disapear.
Appreciate your input in solving this.
I have got the drop down menu working, only thing is that when I hover over the menu, the drop down works, but as I move over to select it, the menus disapear.
Appreciate your input in solving this.
-
- Joomla! Fledgling
- Posts: 2
- Joined: Sat Oct 11, 2008 5:25 pm
Re: [TUT] How to add a drop down mootools menu to your template
Hi,
I have the same problem than arnel_cagatin, anyone has/solved this ??
K.
I have the same problem than arnel_cagatin, anyone has/solved this ??
Thanks,arnel_cagatin wrote:Hi,
I have used the tutorial and just having a lil problem with my search box. In mozilla firefox their is no problem but when I used internet explorer the search box is not shown. Can anyone help me with this?? DOnt have much of a knowledge in this stuff. Tanx in advance..
K.
-
- Joomla! Fledgling
- Posts: 2
- Joined: Sat Oct 11, 2008 5:25 pm
Re: [TUT] How to add a drop down mootools menu to your template
I found a solution:
I moved the user4 module in the header (just before the last div closure), and modified the #user4 in template.css to:
I moved the user4 module in the header (just before the last div closure), and modified the #user4 in template.css to:
Code: Select all
#user4 {
position:absolute;
right:0;
top:74px;
background:url(../images/user4bg-l.jpg) top left no-repeat;
padding-left:38px;
color:#000;
z-index:1000;
}
-
- Joomla! Fledgling
- Posts: 1
- Joined: Sun Dec 10, 2006 6:39 am
Re: [TUT] How to add a drop down mootools menu to your template
Thanks mate.
This post surely made my day
ps: Saves me a day of worthless hours coding something that is already there.
This post surely made my day

ps: Saves me a day of worthless hours coding something that is already there.
-
- Joomla! Apprentice
- Posts: 41
- Joined: Sun Jan 28, 2007 2:33 am
Re: [TUT] How to add a drop down mootools menu to your template
Hi
worked around it for 2 hours. Think i did follow thw instructions quite well.
In the position Hornav i did not see anything.
When i put it into user 3 and did the change in JS, I get it showing up, but no "action". It is just a flat all covering menu.
I have the 1.5.7 and latest version of the template.
Please let me know hoe to solve the trouble.
www.ningbolife.com
I have disabled it for the moment.
It is interesting, that extended menu is also not working with transitions.
worked around it for 2 hours. Think i did follow thw instructions quite well.
In the position Hornav i did not see anything.
When i put it into user 3 and did the change in JS, I get it showing up, but no "action". It is just a flat all covering menu.
I have the 1.5.7 and latest version of the template.
Please let me know hoe to solve the trouble.
www.ningbolife.com
I have disabled it for the moment.
It is interesting, that extended menu is also not working with transitions.
-
- Joomla! Fledgling
- Posts: 3
- Joined: Mon Oct 27, 2008 8:36 am
Re: [TUT] How to add a drop down mootools menu to your template
Having a bit of trouble with IE - The separator in the pill menu (milkyway) is showing thru in the child menus. Most of the menu floats left, but the separator floats right. I added: to my ieonly.css but it didn't fix anything.
how do I clear the float in IE for my pill menu?
Code: Select all
#user3 ul ul {
clear: both;}
how do I clear the float in IE for my pill menu?
- predesign
- Joomla! Intern
- Posts: 76
- Joined: Thu Jun 21, 2007 5:19 pm
- Location: Peru Cusco
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Nice Tutorial Thank you for it!
Don't loose this oportunity 10% discount for first 10 people who reserve any tours asap
http://www.innovatravelperu.com
Free latin america channels online
http://www.fullcanales.com
http://www.innovatravelperu.com
Free latin america channels online
http://www.fullcanales.com
-
- Joomla! Apprentice
- Posts: 41
- Joined: Sun Jan 28, 2007 2:33 am
Re: [TUT] How to add a drop down mootools menu to your template
I took a freelancer for finally solving the problem. Did cost me US$ 20, but was worth it.
now www.ningbolife.com works fine with the drop down.
now www.ningbolife.com works fine with the drop down.
-
- Joomla! Apprentice
- Posts: 6
- Joined: Sat Oct 04, 2008 6:07 pm
-
- Joomla! Fledgling
- Posts: 1
- Joined: Sat Nov 08, 2008 2:09 pm
Re: [TUT] How to add a drop down mootools menu to your template
First of all, the tutorial works great. No problems at all when implementing. Well just one actually, but I haven't figured out if it's an IE7 problem or a problem with the menu.
My problem is that when I use the menu in IE7 the dropdownmenu (actually only the subitems in the menu) disappears under a div that's below the menu, and I can't select the items in the menu's dropdown list (both the menu and the div below use a png as backgroundimage). I already fiddled around with the z-depth, but that doesn't do the trick.
in Fx it works okay. So I'm guessing it's an IE only thing. But does anybody have a solution for this problem?
UPDATE:
I fixed my problem by integrating the background of the div below into the body background. It's not the most ideal option but it works.
My problem is that when I use the menu in IE7 the dropdownmenu (actually only the subitems in the menu) disappears under a div that's below the menu, and I can't select the items in the menu's dropdown list (both the menu and the div below use a png as backgroundimage). I already fiddled around with the z-depth, but that doesn't do the trick.
in Fx it works okay. So I'm guessing it's an IE only thing. But does anybody have a solution for this problem?
UPDATE:
I fixed my problem by integrating the background of the div below into the body background. It's not the most ideal option but it works.
Last edited by blazeonline on Thu Nov 13, 2008 8:53 pm, edited 1 time in total.
-
- Joomla! Fledgling
- Posts: 1
- Joined: Thu Nov 13, 2008 6:10 pm
Re: [TUT] How to add a drop down mootools menu to your template
hi...ah72
first i want to thank for your tutorial..
i have try to follow all your tutorial, but i don't find the solution
the problem is the dropdown menu in IE7 does'nt working great
i try to customize my ja-purity template... can you helpme please
sorry for my english grammer
first i want to thank for your tutorial..
i have try to follow all your tutorial, but i don't find the solution
the problem is the dropdown menu in IE7 does'nt working great
i try to customize my ja-purity template... can you helpme please
sorry for my english grammer
- ant
- Joomla! Enthusiast
- Posts: 158
- Joined: Sun Sep 18, 2005 1:22 pm
- Location: Italy
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Great Tut!
Anyway here is happening a strange thing: in a template of mine, if I include the joomla head statement like this:
the dropdown menu doesn't work anymore in IE7.
As usual, no problem with FF. Neither in IE7 if I DON'T include the head statement
By the way, I also gave a try with the RedEvo_Aphelion template: same strange behaviour...
Anyway here is happening a strange thing: in a template of mine, if I include the joomla head statement like this:
Code: Select all
<jdoc:include type="head" />
As usual, no problem with FF. Neither in IE7 if I DON'T include the head statement

By the way, I also gave a try with the RedEvo_Aphelion template: same strange behaviour...
-
- Joomla! Fledgling
- Posts: 1
- Joined: Mon Nov 24, 2008 1:44 am
Re: [TUT] How to add a drop down mootools menu to your template
Ah72
I understand this tutorial isn't intended to provide drop downs on other templates but I have tried to apply it to the Milkyway pill menu without success. Upon uploading the modified files all menu items disappear, leaving a fully collapsed pill menu.
I have reviewed your suggested changes in response to dizzi's feedback, but would appreciate your looking over my index.php, templateDetails.xml, template.css providing the board admin will grant attachments / or I can email you them?
Thanks in advance
I understand this tutorial isn't intended to provide drop downs on other templates but I have tried to apply it to the Milkyway pill menu without success. Upon uploading the modified files all menu items disappear, leaving a fully collapsed pill menu.
I have reviewed your suggested changes in response to dizzi's feedback, but would appreciate your looking over my index.php, templateDetails.xml, template.css providing the board admin will grant attachments / or I can email you them?
Thanks in advance
You do not have the required permissions to view the files attached to this post.
-
- 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 template
Hello,
First thank for this good tuto !
The moomenu works fine with FF3, IE7, IE6, Opera. I fixed a bug with the weblinks component with integrating this:
<?php JHTML::script('moomenu.js', 'templates/'.$this->template.'/js/', true); ?>
But... it still doesn't work with the component Fireboard (forum).
Is there any help for this ??
Thanks
CEd
First thank for this good tuto !
The moomenu works fine with FF3, IE7, IE6, Opera. I fixed a bug with the weblinks component with integrating this:
<?php JHTML::script('moomenu.js', 'templates/'.$this->template.'/js/', true); ?>
But... it still doesn't work with the component Fireboard (forum).
Is there any help for this ??
Thanks
CEd
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
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
-
- Joomla! Fledgling
- Posts: 2
- Joined: Thu Nov 27, 2008 6:16 pm
Re: [TUT] How to add a drop down mootools menu to your template
Looks simply enough. I'll give it a try. So glad Joomla has a forum. I think I'm going to need it. 

-
- Joomla! Apprentice
- Posts: 15
- Joined: Fri Nov 21, 2008 7:42 am
Re: [TUT] How to add a drop down mootools menu to your template
Hi ah72,thanks for the tutor.I've downloaded the edited template that you upload.I want to ask,i'm using firefox 3.0.3.When i try it,the fonts are big..I've edited as you teach by editing the 14em,i change it to 12em,also with the fx transistion.It doesn't work..Anyway,i'm using localhost so i can't let you see the problems...Thanks...
-
- Joomla! Fledgling
- Posts: 4
- Joined: Fri Dec 05, 2008 8:31 pm
Re: [TUT] How to add a drop down mootools menu to your template
Got the script working, but how do I get the menu to "animate" in the style that it does at http://www.joomlaperformance.com/ ?
- predesign
- Joomla! Intern
- Posts: 76
- Joined: Thu Jun 21, 2007 5:19 pm
- Location: Peru Cusco
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
I think there is the posibility to download a template with drop down mootools menu to your template , but some of them you have to pay for it!
Don't loose this oportunity 10% discount for first 10 people who reserve any tours asap
http://www.innovatravelperu.com
Free latin america channels online
http://www.fullcanales.com
http://www.innovatravelperu.com
Free latin america channels online
http://www.fullcanales.com
-
- Joomla! Fledgling
- Posts: 1
- Joined: Mon Dec 08, 2008 2:12 am
Re: [TUT] How to add a drop down mootools menu to your template
I think that I have the same problem... I follow the TUT step by step, but the moomenu doesn't work on my site. The menu appears like a normal menu. I'm using this template:ideamarket wrote:I'm still unable to get the JavaScript working. The CSS portion of the ul menu is there and working, but the JavaScript isn't working with the menu. When I turn off JavaScript for my browser it makes no difference. Is there anyone that can take a look and see if there is something that I've missed. I've gone through the TUT multiple times so I'm not being lazy...just dumb.
The site is http://www.yourprefix.com which is running on Joomla 1.5.7
Thanks to anyone that can help.
http://www.themza.com/joomla1.5/back-to ... plate.html
I have visited your site, and the menu works fine... how do you solve the problem?
thanks
- jeremy217
- Joomla! Apprentice
- Posts: 39
- Joined: Mon Apr 24, 2006 10:49 pm
- Location: Tulsa, Oklahoma
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Make sure the moomenu js has the right ID set for the menu. The default for this tutorial is #hornav. If you changed your css you need to chaneg the moomenu js as well.
I am trying to get the moomenu js updated to mootools 1.2. Has anyone already done this or in the process of doing this? I also tried implementing a delay so the menu doesn't leave the screen so quick but was unsuccessful with my coding.
I am trying to get the moomenu js updated to mootools 1.2. Has anyone already done this or in the process of doing this? I also tried implementing a delay so the menu doesn't leave the screen so quick but was unsuccessful with my coding.
-
- Joomla! Fledgling
- Posts: 4
- Joined: Sun Oct 12, 2008 4:49 am
Re: [TUT] How to add a drop down mootools menu to your template
Hello,
I'm so glad this thread is not dead yet,
It's never too late,
I have learned a lot.
Thanks everybody.
I'm so glad this thread is not dead yet,
It's never too late,
I have learned a lot.

Thanks everybody.
-
- Joomla! Fledgling
- Posts: 1
- Joined: Tue Jan 27, 2009 6:58 pm
Re: [TUT] How to add a drop down mootools menu to your template
Hi,
I followed the tutorial and everything seems to be working fine, but there is a problem when I try to place a separator into the menu. It doesn't appear in the same style as the other parent items. Can anyone offer any advice?
Thanks
I followed the tutorial and everything seems to be working fine, but there is a problem when I try to place a separator into the menu. It doesn't appear in the same style as the other parent items. Can anyone offer any advice?
Thanks
- spy2furious
- Joomla! Apprentice
- Posts: 32
- Joined: Sun Oct 05, 2008 10:55 am
- Location: Indonesia
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
First, thanks fot the great tutorial, i followed all instruction and it''s works..donaldinho wrote:Hi,
I followed the tutorial and everything seems to be working fine, but there is a problem when I try to place a separator into the menu. It doesn't appear in the same style as the other parent items. Can anyone offer any advice?
Thanks
for the separator i thought it's span, you can find it in css file, i forgot it, but when you still use #hornav id, it's would be like this "
/*Parent Span*/
Code: Select all
#hornav ul li .separator span{
}
/*Parent Link*/
Code: Select all
#hornav ul li a{
}
/*Child Span*/
Code: Select all
#hornav ul li ul li .separator span{
}
/*Child Link*/
Code: Select all
#hornav ul li li a{
}
My online portofolio - http://www.spicatheme.com
*i'm sorry about My english.. i still learn it.
*i'm sorry about My english.. i still learn it.