[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.
zerg_pirate
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Tue Dec 30, 2008 6:38 pm

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

Post by zerg_pirate » Thu Feb 12, 2009 3:01 pm

In this drop down menu no down arrow indicate.how can i add down arrow??
plz help me.......

thank u.

User avatar
d_spice
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Mar 28, 2008 5:23 pm
Location: NORCAL

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

Post by d_spice » Thu Feb 19, 2009 6:05 pm

Hey ah72,

I added this code in below to my template (skeleton tableless) so that IE would no longer make menu float right. That worked great, however my highlighting is no longer go the full width of the sub menu, any idea how i can fix this?

Thanks for your help as always.

My site can be found here.

http://www.spiceractive.com/sa

Also, how could i modify the css so that the main menu items were even placed and centered instead of to the left? This would need to be able to self adjust if a menu item was added as well.


ah72 wrote:Hello Nneon,

add this css

Code: Select all

#hornav ul li a {float:left;}
#hornav ul li ul {clear:both; top:40px;}

#hornav {position:relative; z-index:100;}
#wrapper {z-index:1;}
Regards

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 » Thu Feb 19, 2009 6:21 pm

One thing I hate about joomla is how bloated it can get if you add lots of eyecandy.

This menu for example, uses mootools, wich is 72kb when loaded.

It's like a joke. Jquery is 18kb

So for those who are using this, I recommend caching at least.

vickipayne
Joomla! Apprentice
Joomla! Apprentice
Posts: 49
Joined: Wed Jan 28, 2009 7:27 pm

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

Post by vickipayne » Thu Feb 19, 2009 10:58 pm

First of all, thanks so much for the tutorial. I changed the way the mootools.js file is called, as suggested, to:
<?php JHTML::script('moomenu.js', 'templates/'.$this->template.'/js/', true); ?>

That fixed the component pages issue -- now however the menu is breaking in FF 3.06, but only after I refresh the page. I've tried moving the js include lines elsewhere in the head, and even out of the head, but no change. It looks like the css is breaking down, rather than the js effect - but all other css is working fine. The menu looks great in IE6 & 7, before and after page refresh, only breaks in Firefox.

Any ideas??

User avatar
d_spice
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Mar 28, 2008 5:23 pm
Location: NORCAL

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

Post by d_spice » Fri Feb 20, 2009 10:26 pm

Hi Vicki, can you post a link, or a screenshot?
vickipayne wrote:First of all, thanks so much for the tutorial. I changed the way the mootools.js file is called, as suggested, to:
<?php JHTML::script('moomenu.js', 'templates/'.$this->template.'/js/', true); ?>

That fixed the component pages issue -- now however the menu is breaking in FF 3.06, but only after I refresh the page. I've tried moving the js include lines elsewhere in the head, and even out of the head, but no change. It looks like the css is breaking down, rather than the js effect - but all other css is working fine. The menu looks great in IE6 & 7, before and after page refresh, only breaks in Firefox.

Any ideas??

vickipayne
Joomla! Apprentice
Joomla! Apprentice
Posts: 49
Joined: Wed Jan 28, 2009 7:27 pm

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

Post by vickipayne » Sun Feb 22, 2009 5:23 pm

I've attached a small screenshot of the way the menu is breaking. Please note that this behavior is only after a page refresh, and only in Firefox.

The way I am including the mootools.js file (between head tags) is:

<?php if ($this->countModules('hornav')): ?>
<?php JHTML::script('moomenu.js', 'templates/'.$this->template.'/js/', true); ?>
<?php endif; ?>

Thanks in advance....
You do not have the required permissions to view the files attached to this post.

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 » Sun Feb 22, 2009 6:03 pm

Have you tried viewing your menu without moomenu?

vickipayne
Joomla! Apprentice
Joomla! Apprentice
Posts: 49
Joined: Wed Jan 28, 2009 7:27 pm

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

Post by vickipayne » Mon Feb 23, 2009 4:08 pm

Have you tried viewing your menu without moomenu?
Hi, Jeremy -

Great idea... I just tried it without the moomenu and it works fine before and after refresh (of course not with the moomenu theatrics, which I want to remain), so the problem definitely seems related to the altered way of calling the js file -

<?php if ($this->countModules('hornav')): ?>
<?php JHTML::script('moomenu.js', 'templates/'.$this->template.'/js/', true); ?>
<?php endif; ?>

Fault of the JHTML function, don't you think? If anyone can suggest an edit I can try on this function, I will try that -- or alternately a different way(s) of calling the file, I'll try that as well.

Is anyone else seeing this behavior on their moomenu? I know that it's not a huge issue, because most visitors will not refresh a page under normal circumstances - and they would also have to be using Firefox (or possibly other Mozilla based browsers). I think this is a terrific menu and hope to be able to get past the flaw.

ah72, are you still watching the topic?

vickipayne
Joomla! Apprentice
Joomla! Apprentice
Posts: 49
Joined: Wed Jan 28, 2009 7:27 pm

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

Post by vickipayne » Thu Feb 26, 2009 10:02 pm

Problem solved... I've discovered that part of the fault was in my css. I was trying to use first-child and last-child selectors to keep my parent menu from showing an end separator, and that's what was causing the different behavior in browsers. Thanks for the offers of help....

I have discovered that if I remove the [if IE] qualifiers from the following -
<!--[if IE]>
<script type="text/javascript">
window.addEvent('domready', function(){
var menu_li_els = document.getElementById('hornav').firstChild.childNodes;
for(var i=0;i<menu_li_els.length; i++) {
menu_li_els.insertBefore(document.createElement('div'), menu_li_els.lastChild);
}
});
</script>
<![endif]-->

that seems to fix the issue - AND I can still use first-child, last-child in my css, which is much easier than creating a separate menu for one of the end items, as I've done in the past.

If anyone is still following my rant, let me know if you think there may be problems with all this in Opera or Safari. And once again, GREAT MENU, thank you!!

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 » Thu Feb 26, 2009 10:20 pm

vickipayne wrote:
Have you tried viewing your menu without moomenu?
Hi, Jeremy -

Great idea... I just tried it without the moomenu and it works fine before and after refresh (of course not with the moomenu theatrics, which I want to remain), so the problem definitely seems related to the altered way of calling the js file -

<?php if ($this->countModules('hornav')): ?>
<?php JHTML::script('moomenu.js', 'templates/'.$this->template.'/js/', true); ?>
<?php endif; ?>

Fault of the JHTML function, don't you think? If anyone can suggest an edit I can try on this function, I will try that -- or alternately a different way(s) of calling the file, I'll try that as well.

Is anyone else seeing this behavior on their moomenu? I know that it's not a huge issue, because most visitors will not refresh a page under normal circumstances - and they would also have to be using Firefox (or possibly other Mozilla based browsers). I think this is a terrific menu and hope to be able to get past the flaw.

ah72, are you still watching the topic?

Just add it manually instead of through google code. Then if that works you know it's not calling it correctly through the Joomla code. If it doesn't work you have other javascript causing problems.

Jseb
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Thu Jan 15, 2009 8:32 pm

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

Post by Jseb » Fri Feb 27, 2009 9:47 pm

Alright i am having an issue that I never seen before. I been using the navigation model for about 3 weeks now (and yes i changed many things in the css to my own). However today i was just customizing the css of my search bar and since i just change it. Work great in FF but in IE7 if i refresh the page my entired menu wont show up unless i click on my other menu to go to the page frontpage or something like that

Here the link http://testsite.levoyageur.ca/Joomla

Oh and also my drop down menu are now just on the side way instead.

Kinda confused not to sure what going on. Is my css enter in some kind of mode that i didnt know. I never seen this before. OR would it be just cause my website is getting bigger. Need help on that one!

Thank.

Jseb
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Thu Jan 15, 2009 8:32 pm

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

Post by Jseb » Mon Mar 02, 2009 3:08 pm

Alright for some reason last week i put these code for my search bar:

Code: Select all

div.search{
	padding:0;
	margin:0;
}
div.search input#mod_search_searchword {
	width:250px;
	display:block;
	float:left;
	height:16px;
}
div.search input.button{
display:block;
float:left;
padding-left:5px;
}
since this i put this into my css my navigation in IE7 is slow to show and just doesnt show up unless i hit a link so i decide to take it off and now my navigation ul from second nav are show on the right of the link and on top not what i wanted it. Anyone can help me on this??? I dont think i did any other change that.

its in div id="menunouvelle" Please i need help in this. In FF its work great. And i try the development tools for IE7 doesnt show any coding errors. and i do know i have about 3 mistake from FF tools.

Thank in advance

Update: Ok i am not to sure what going on anymore. I am just asking if somebody could tell me how to put back my css back to normal if possible. Thank

graywolf336
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Thu Mar 19, 2009 10:52 pm

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

Post by graywolf336 » Fri Mar 20, 2009 1:14 am

Wow man! You have just saved my day!!! I have been in the process of learning how to create a template for Joomla. All week I've been working on it, almost non-stop, and then I came to a dead end. I couldn't figure out for the life of me how to create a drop down menu for Joomla. I then Googled it and this came up. Thanks a bunch!!! :D

sonatine
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sun Mar 22, 2009 12:41 am

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

Post by sonatine » Sat Apr 18, 2009 3:01 pm

This is just great :) thanks a lot for the tutorial..

I have a question, a css question I think :-[

I would like to have my menu above all the elements (positions).. above the position user3.. in the top of everything.. but I can't undersand where is defined the hornav position in the page!!!! where is defined that hornav is under user3????

I tryed some changes in the template.css.. but didn't work :-[

thanks

Yaheed
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Tue Jan 29, 2008 5:06 am

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

Post by Yaheed » Wed Apr 22, 2009 9:29 am

Thanks for the great tut for the mootools menu. I've added the Fx.Transitions on to the menu, but the only place that the actual 'transition' animation is working is on Safari 3 (Mac). The duration part of the Fx.Style is working, but not the transition.

I've used it on my own template, and change the moomenu.js accordingly to fit my Ids and class names.

Fx.transitions:

Code: Select all

if (this.parent._id)
				{
					this.myFx2 = new Fx.Style(this, 'width', {transition: Fx.Transitions.Bounce.easeOut}, {duration: 1000});
					this.myFx2.set(0);
				} else {
					this.myFx2 = new Fx.Style(this, 'height', {transition: Fx.Transitions.Bounce.easeOut}, {duration: 1000});
					this.myFx2.set(0);
				}

...

Window.onDomReady(function() {new DropdownMenu($E('#mainNav ul.menu'))});
The url is http://chameleondemo.com/agc/ ignore the browser layout bugs, I haven't cross-browser checked yet.

sonatine
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sun Mar 22, 2009 12:41 am

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

Post by sonatine » Wed Apr 22, 2009 2:08 pm

hi Yaheed

really like your menu, ando your site :) I'm trying to change the look of my menu, I made the changes in the template.css but nothing happens!!!

but I have already find out how to change the position..

Yaheed
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Tue Jan 29, 2008 5:06 am

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

Post by Yaheed » Thu Apr 23, 2009 1:00 am

I don't know much about Mootools, but maybe the transition code is out-of-date? I really have no idea :laugh:

xtr3mx7
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed May 06, 2009 6:41 am

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

Post by xtr3mx7 » Wed May 06, 2009 6:47 am

Hello :) Thanks a lot for this nice tutorial. It is really helpful. Somehow I am having the same problem as DavePayne as per his post quoted below.

The submenu does not stay active in IE7 or any other IE version. My test website is http://p108380.typo3server.info/

I would be much grateful if you can help me solving this issue. Many thanks.
DavePayne wrote:Hi,

first thx a lot for your code, it was exactly what I was looking for.

But I can`t use it correctly with the ie7, the menu`s submenu doesn`t stay active when I navigate through it.
The FF3 has no problems with it. But the ie7 seems to forget that the subs were active, as soon as I hover out of the first child item of the horizontal menu.

The page isn`t avialable atm, I`m using a local server. So I can`t show you how it`s "not" working ;-)

drag16
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue May 12, 2009 10:24 am

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

Post by drag16 » Tue May 19, 2009 12:40 am

Hello People!

Help me, please :(

My menu have a bug in firefox. :'( Not to appear correctly.

Image

Who knows what happens? :(

Thank's

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 » Fri Jun 26, 2009 9:06 am

I have a weird problem..

The only way to make my menu work, is if i put the mootools on the top of the moomenu.js code. That way i remove the mootools in the template (avoiding beeing called twice) with the code and it works.

But if I remove mootools from moomenu.js and put in a separate file, or not forcing the mootools removal it doesn't work!

I though mootools on the top of moomenu would be the same thing because it's one less request. But when i tried using other components that require mootools, it wouldn't work.

I'm confused of why is this happening. If anybody got any ideas.

johnranjans
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Thu Jul 09, 2009 6:19 pm

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

Post by johnranjans » Thu Jul 16, 2009 5:53 pm

Hello All,

I think you can also try the Joomla 1.5 Native module... that can be downloaded from the following linke...
http://www.hexadesigners.com/our-joomla ... oomla.html
Please check this module it might be helpful to you...

Regards,
John

UpMax
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Mon Jul 27, 2009 1:59 pm

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

Post by UpMax » Mon Jul 27, 2009 2:13 pm

I have a little problem with a template using a MooMenu. It's works just fine in FireFox 3.5 and IE 8 however, it fails in IE7.

A quick fix would be to delete the line "<jdoc:include type="head" />" from the template index.php.. However, it removes the meta elements and titles with it..

Does someone know how to fix this problem without removing the "<jdoc:include type="head" line ?

Thanks in advance

johnranjans
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Thu Jul 09, 2009 6:19 pm

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

Post by johnranjans » Mon Jul 27, 2009 4:50 pm

UpMax wrote:I have a little problem with a template using a MooMenu. It's works just fine in FireFox 3.5 and IE 8 however, it fails in IE7.

A quick fix would be to delete the line "<jdoc:include type="head" />" from the template index.php.. However, it removes the meta elements and titles with it..

Does someone know how to fix this problem without removing the "<jdoc:include type="head" line ?

Thanks in advance
Hi,

I think you are using a mootools source downloaded from other site...
If I am correct.. Please try to use default Mootool Script used by Joomla.. Which can be included in the template using JHTML::_('behavior.mootools');

Also, I suggest you can use the moomenu module that can be downloaded from above link in my previous post reply.
I am copying it here again...
http://www.hexadesigners.com/our-jooml ... oomla.html

Thanks & Regards,
John

UpMax
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Mon Jul 27, 2009 1:59 pm

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

Post by UpMax » Mon Jul 27, 2009 7:50 pm

I'm using a modified version of this theme :
http://www.bestofjoomla.com/component/o ... 6/id,1928/

Is there another solution to this ? I don't want to use the MooTool.. (the theme has it's own MooMenu)

If I remove the "<jdoc:include type="head" what exactly would I loose ?

EDIT : I've heard that this is a z-index bug in Internet Explorer, does anybody know how to fix it ?

johnranjans
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Thu Jul 09, 2009 6:19 pm

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

Post by johnranjans » Tue Jul 28, 2009 4:32 pm

UpMax wrote:I'm using a modified version of this theme :
http://www.bestofjoomla.com/component/o ... 6/id,1928/

Is there another solution to this ? I don't want to use the MooTool.. (the theme has it's own MooMenu)

If I remove the "<jdoc:include type="head" what exactly would I loose ?

EDIT : I've heard that this is a z-index bug in Internet Explorer, does anybody know how to fix it ?
I think you can better raise your question on BestOfJoomla site...
But if you have issue with z-index then put higher z-index value for the sub menu ul... also to the holder of the menu..

i.e If you include the menu postion as follows

<div id="topnav">
<jdoc:include type="modules" name="menu" />
</div>

Then in css put something like this:

#topnav {
z-index:50;
---- Other CSS As you need ---
}

#topnav li ul {
z-index:51;
---- Other CSS As you need ---
}

Thanks & Regards,
John

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 » Tue Aug 04, 2009 11:21 am

Hi,
has anybody been successful in using moomenu in combination with MooTools 1.2.x?

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 » Thu Aug 27, 2009 5:39 pm

1st post.

Call me a moron but how do you add the submenus themselves? Did the tut, think I might have done it right but I need to test it to see if it worked. Silly, I know but I'm a noob. How do I add the submenus after the codes have been applied? ???


Thank 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 » Thu Aug 27, 2009 9:56 pm

No one? :'(

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 11:01 am

for the love of god...

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 » Sat Aug 29, 2009 5:16 pm

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


Locked

Return to “Templates for Joomla! 1.5”