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

[wayneob]

when you say only working as css do you mean you can only control it by css?

[ideamarket]

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.

[wayneob]

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

Code: Select all

:<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/moomenu.js"></script>

is pointing to the folder /js/moomenu.js

your js has this line?

Code: Select all

Window.onDomReady(function() {new DropdownMenu($E('#hornav ul.menu_horiz'))});

did u check this

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]

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

Code: Select all

<jdoc:include type="head" />	

wich includes

Code: Select all

media/system/js/mootools.js

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

[OggieMagoo]

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

[ideamarket]

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.

[ideamarket]

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.

[OggieMagoo]

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.

[Kiristu]

Hi,

I have the same problem than arnel_cagatin, anyone has/solved this ??

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

Thanks,
K.

[Kiristu]

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:

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;
}

[edmx]

Thanks mate.

This post surely made my day

ps: Saves me a day of worthless hours coding something that is already there.

[Eckhard]

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.

[rblah]

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:

Code: Select all

#user3 ul ul {
clear: both;}

to my ieonly.css but it didn't fix anything.

how do I clear the float in IE for my pill menu?

[predesign]

Nice Tutorial Thank you for it!

[Eckhard]

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.

[jalex]

good!!
but my menu don't works in all pages. why?
http://www.impactovip.com

[blazeonline]

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.

[juf05t]

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

[ant]

Great Tut!

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" />

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

[unclebingo]

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

[ced1870]

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

[hampers]

Looks simply enough. I'll give it a try. So glad Joomla has a forum. I think I'm going to need it.

[yonghan79]

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

[QuickGold]

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]

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!

[raberrio]

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.

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:

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]

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.

[smith02]

Hello,
I'm so glad this thread is not dead yet,
It's never too late,
I have learned a lot.
Thanks everybody.

[donaldinho]

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

[spy2furious]

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

First, thanks fot the great tutorial, i followed all instruction and it''s works..

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{
}

make it same with :
/*Parent Link*/

Code: Select all

#hornav ul li a{
}

Oh yeah, do't forgot make change for child separator too..
/*Child Span*/

Code: Select all

#hornav ul li ul li .separator span{
}

make it same with child link
/*Child Link*/

Code: Select all

#hornav ul li li a{
}

Hope can help..