[TUT] How to add a drop down mootools menu to your template
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
-
- 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
In this drop down menu no down arrow indicate.how can i add down arrow??
plz help me.......
thank u.
plz help me.......
thank u.
- d_spice
- 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
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.
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 cssRegardsCode: 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;}
- M4rc0
- 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
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.
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.
-
- 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
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??
<?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
- 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
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??
-
- 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
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....
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.
- jeremy217
- 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
Have you tried viewing your menu without moomenu?
-
- 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
Hi, Jeremy -Have you tried viewing your menu without moomenu?
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?
-
- 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
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!!
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
- 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
vickipayne wrote:Hi, Jeremy -Have you tried viewing your menu without moomenu?
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.
-
- 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
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.
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.
-
- 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
Alright for some reason last week i put these code for my search bar:
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
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;
}
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
-
- 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
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!!!
-
- 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
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
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
-
- 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
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:
The url is http://chameleondemo.com/agc/ ignore the browser layout bugs, I haven't cross-browser checked yet.
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'))});
-
- 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
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..
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..
-
- 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
I don't know much about Mootools, but maybe the transition code is out-of-date? I really have no idea
-
- 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
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.
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 ;-)
-
- 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
Hello People!
Help me, please
My menu have a bug in firefox. Not to appear correctly.
Who knows what happens?
Thank's
Help me, please
My menu have a bug in firefox. Not to appear correctly.
Who knows what happens?
Thank's
- M4rc0
- 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
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.
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.
-
- 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
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
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
-
- 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
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
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
-
- 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
Hi,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
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
-
- 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
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 ?
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 ?
-
- 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
I think you can better raise your question on BestOfJoomla site...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 ?
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
- 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
Hi,
has anybody been successful in using moomenu in combination with MooTools 1.2.x?
has anybody been successful in using moomenu in combination with MooTools 1.2.x?
-
- 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
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.
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.
-
- Joomla! Apprentice
- Posts: 6
- Joined: Thu Aug 27, 2009 3:09 pm
-
- 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
for the love of god...
- M4rc0
- 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
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
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