[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.
wayneob
Joomla! Apprentice
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

Post by wayneob » Mon Oct 06, 2008 6:34 pm

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

 
ideamarket
Joomla! Apprentice
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

Post by ideamarket » Mon Oct 06, 2008 6:49 pm

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

Post by wayneob » Mon Oct 06, 2008 8:41 pm

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

User avatar
M4rc0
Joomla! Explorer
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

Post by M4rc0 » Wed Oct 08, 2008 9:27 am

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

Post by OggieMagoo » Wed Oct 08, 2008 8:14 pm

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

Post by ideamarket » Thu Oct 09, 2008 10:35 pm

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

Post by ideamarket » Thu Oct 09, 2008 10:51 pm

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

Post by OggieMagoo » Fri Oct 10, 2008 12:52 pm

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

Post by Kiristu » Sun Oct 12, 2008 6:05 pm

Hi,

I have the same problem than arnel_cagatin, anyone has/solved this ??
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..
Thanks,
K.

Kiristu
Joomla! Fledgling
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

Post by Kiristu » Sun Oct 12, 2008 6:46 pm

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

Post by edmx » Tue Oct 14, 2008 11:43 am

Thanks mate.

This post surely made my day ;)

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

Eckhard
Joomla! Apprentice
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

Post by Eckhard » Mon Oct 20, 2008 3:14 am

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

Post by rblah » Tue Nov 04, 2008 12:15 am

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?

User avatar
predesign
Joomla! Intern
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

Post by predesign » Tue Nov 04, 2008 12:34 am

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

Eckhard
Joomla! Apprentice
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

Post by Eckhard » Tue Nov 04, 2008 1:25 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Sat Oct 04, 2008 6:07 pm

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

Post by jalex » Sun Nov 09, 2008 4:23 am

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

blazeonline
Joomla! Fledgling
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

Post by blazeonline » Mon Nov 10, 2008 10:38 pm

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.
Last edited by blazeonline on Thu Nov 13, 2008 8:53 pm, edited 1 time in total.

juf05t
Joomla! Fledgling
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

Post by juf05t » Thu Nov 13, 2008 6:43 pm

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

User avatar
ant
Joomla! Enthusiast
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

Post by ant » Fri Nov 14, 2008 10:14 am

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 :eek:

By the way, I also gave a try with the RedEvo_Aphelion template: same strange behaviour...
Ant at Artimediali Web Design
Realizzazione siti web Joomla!
http://www.artimediali.net

unclebingo
Joomla! Fledgling
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

Post by unclebingo » Mon Nov 24, 2008 3:16 am

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

Post by ced1870 » Thu Nov 27, 2008 9:42 am

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

hampers
Joomla! Fledgling
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

Post by hampers » Fri Nov 28, 2008 12:02 am

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

yonghan79
Joomla! Apprentice
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

Post by yonghan79 » Sun Nov 30, 2008 5:49 am

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

Post by QuickGold » Fri Dec 05, 2008 9:39 pm

Got the script working, but how do I get the menu to "animate" in the style that it does at http://www.joomlaperformance.com/ ?

User avatar
predesign
Joomla! Intern
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

Post by predesign » Fri Dec 05, 2008 10:53 pm

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

raberrio
Joomla! Fledgling
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

Post by raberrio » Mon Dec 08, 2008 3:20 am

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

User avatar
jeremy217
Joomla! Apprentice
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

Post by jeremy217 » Fri Dec 19, 2008 2:36 am

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

Post by smith02 » Tue Jan 20, 2009 12:08 pm

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

donaldinho
Joomla! Fledgling
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

Post by donaldinho » Mon Feb 02, 2009 4:27 pm

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

User avatar
spy2furious
Joomla! Apprentice
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

Post by spy2furious » Mon Feb 02, 2009 9:26 pm

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
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..
My online portofolio - http://www.spicatheme.com
*i'm sorry about My english.. i still learn it.

 

Locked

Return to “Templates for Joomla! 1.5”