Page 5 of 6

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

Posted: Thu Feb 12, 2009 3:01 pm
by zerg_pirate
In this drop down menu no down arrow indicate.how can i add down arrow??
plz help me.......

thank u.

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

Posted: Thu Feb 19, 2009 6:05 pm
by 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.


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

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

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

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

Posted: Thu Feb 19, 2009 10:58 pm
by 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??

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

Posted: Fri Feb 20, 2009 10:26 pm
by d_spice
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??

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

Posted: Sun Feb 22, 2009 5:23 pm
by 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....

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

Posted: Sun Feb 22, 2009 6:03 pm
by jeremy217
Have you tried viewing your menu without moomenu?

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

Posted: Mon Feb 23, 2009 4:08 pm
by 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?

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

Posted: Thu Feb 26, 2009 10:02 pm
by 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!!

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

Posted: Thu Feb 26, 2009 10:20 pm
by jeremy217
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.

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

Posted: Fri Feb 27, 2009 9:47 pm
by 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.

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

Posted: Mon Mar 02, 2009 3:08 pm
by 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

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

Posted: Fri Mar 20, 2009 1:14 am
by 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!!! :D

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

Posted: Sat Apr 18, 2009 3:01 pm
by 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

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

Posted: Wed Apr 22, 2009 9:29 am
by 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.

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

Posted: Wed Apr 22, 2009 2:08 pm
by 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..

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

Posted: Thu Apr 23, 2009 1:00 am
by Yaheed
I don't know much about Mootools, but maybe the transition code is out-of-date? I really have no idea :laugh:

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

Posted: Wed May 06, 2009 6:47 am
by 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.
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 ;-)

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

Posted: Tue May 19, 2009 12:40 am
by drag16
Hello People!

Help me, please :(

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

Image

Who knows what happens? :(

Thank's

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

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

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

Posted: Thu Jul 16, 2009 5:53 pm
by 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

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

Posted: Mon Jul 27, 2009 2:13 pm
by 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

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

Posted: Mon Jul 27, 2009 4:50 pm
by johnranjans
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

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

Posted: Mon Jul 27, 2009 7:50 pm
by 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 ?

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

Posted: Tue Jul 28, 2009 4:32 pm
by johnranjans
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

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

Posted: Tue Aug 04, 2009 11:21 am
by piotr_cz
Hi,
has anybody been successful in using moomenu in combination with MooTools 1.2.x?

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

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

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

Posted: Thu Aug 27, 2009 9:56 pm
by masssalem
No one? :'(

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

Posted: Sat Aug 29, 2009 11:01 am
by masssalem
for the love of god...

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

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