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

[zerg_pirate]

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

thank u.

[d_spice]

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.

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

[M4rc0]

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]

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

[d_spice]

Hi Vicki, can you post a link, or a screenshot?

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]

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

[jeremy217]

Have you tried viewing your menu without moomenu?

[vickipayne]

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]

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

[jeremy217]

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]

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]

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]

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

[sonatine]

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]

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]

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]

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

[xtr3mx7]

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.

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]

Hello People!

Help me, please

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



Who knows what happens?

Thank's

[M4rc0]

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]

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]

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]

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]

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]

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

[piotr_cz]

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

[masssalem]

1st post.

Call me a [redacted] 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]

No one?

[masssalem]

for the love of god...

[M4rc0]

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