[TUT] How to add a drop down mootools menu to your template
-
- Joomla! Apprentice
- Posts: 37
- Joined: Sun Jul 13, 2008 10:03 am
Re: [TUT] How to add a drop down mootools menu to your template
Thanks for this tutorial, it works good.
But, how to modify the size (width) of the submenu ? It's too large for just a few letters.
I tried to modify the CSS but I'm not really good at it...
Need some help,
But, how to modify the size (width) of the submenu ? It's too large for just a few letters.
I tried to modify the CSS but I'm not really good at it...
Need some help,
-
- Joomla! Explorer
- Posts: 290
- Joined: Sat Mar 15, 2008 9:43 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hello,
in the given css code change all instances of "14em" to the value you want:
in the given css code change all instances of "14em" to the value you want:
Regards#hornav{
clear:both;
display:block;
height:40px;
}
#hornav .moduletable{
margin:0;
}
#hornav ul{
margin:0;
padding:0;
width:auto;
}
#hornav ul li{
margin:0;
padding:0;
height:40px;
float:left;
position:relative;
}
#hornav ul li a{
color:#d0d0d0;
text-transform:uppercase;
padding:10px;
height:20px;
display: block;
background:url(../images/topmenu-vline.jpg) no-repeat;
background-position:0px 2px;
}
#hornav ul li a:hover{
text-decoration:none;
}
#hornav ul li ul {
display:block;
height:auto;
width: 14em;
position:absolute;
z-index:99;
left: -999em;
background-color:#333333;
}
#hornav ul li ul ul {
margin: -40px 0 0 14em;
}
#hornav ul li li {
width: 14em;
}
#hornav ul li li a{
color:#d0d0d0;
text-transform:none;
display: block;
background:none;
padding:10px;
}
#hornav ul li ul {
left: -999em;
}
#hornav ul li:hover ul ul, #hornav ul li:hover ul ul ul {
left: -999em;
}
#hornav ul li:hover ul, #hornav ul li li:hover ul, #hornav ul li li li:hover ul {
left: auto;
}
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!
-
- Joomla! Apprentice
- Posts: 37
- Joined: Sun Jul 13, 2008 10:03 am
Re: [TUT] How to add a drop down mootools menu to your template
Thanks,
It did work well
It did work well

-
- Joomla! Apprentice
- Posts: 37
- Joined: Sun Jul 13, 2008 10:03 am
Re: [TUT] How to add a drop down mootools menu to your template
Hi,
I'd like to use now this menu vertically, but the vertical menu will not have the same style as my actual top menu.
I also want my vertical menu to display like an accordion when the user mouse is over the menu containing submenu.
Thanks for help,
I'd like to use now this menu vertically, but the vertical menu will not have the same style as my actual top menu.
I also want my vertical menu to display like an accordion when the user mouse is over the menu containing submenu.
Thanks for help,
-
- Joomla! Explorer
- Posts: 290
- Joined: Sat Mar 15, 2008 9:43 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hello,
http://forum.joomla.org/viewtopic.php?f=469&t=304955
Best Regards
check thisHeilong wrote:I also want my vertical menu to display like an accordion when the user mouse is over the menu containing submenu.
http://forum.joomla.org/viewtopic.php?f=469&t=304955
Best Regards
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!
- dizzi
- Joomla! Virtuoso
- Posts: 3136
- Joined: Fri Dec 21, 2007 9:36 pm
- Location: Yorkshire, UK
Re: [TUT] How to add a drop down mootools menu to your template
Hi
I would like to place a colour block or image as the background for the currently selected top level menu item - for example as "Forum" is highligted with a black background in the menubar above. Any help with implementing this will be deeply appreciated.
Cheers
I would like to place a colour block or image as the background for the currently selected top level menu item - for example as "Forum" is highligted with a black background in the menubar above. Any help with implementing this will be deeply appreciated.
Cheers
Freedom of expression ... some may try to suppress it but they can never take it away ...
There is no problem a good miracle can't fix.
There is no problem a good miracle can't fix.
- dizzi
- Joomla! Virtuoso
- Posts: 3136
- Joined: Fri Dec 21, 2007 9:36 pm
- Location: Yorkshire, UK
Re: [TUT] How to add a drop down mootools menu to your template
Hey
I have been trying to set up a dropdown menu in the Rhuk Milkyway template using the procedure outlined here and its been a bit of a nightmare
. Ok maybe not that terrible but its not exactly been a breeze
. I have been able to deal with a few issues but there are some that I have been grappling with for hours without success. These have been listed below:
IE7 & Firefox 3.0.1
=================
1. Although the first child level extends the full 14em, only the portion occupied by the sub-menu item title text is clickable (The text is left aligned). Clicking on the right side of the sub-menu where no letters appear, has no effect.
2. The background image only extends as far as the menu item title text when hovering over the first child level.
3. The Pill menu separator line appears within the child menu (similar to a "repeat-y" CSS directive) when the child menu's right edge extends beyond its parent's cell.
IE7 Only
=======
4. The child menu originates below the menu item to the immediate right of its parent instead of the expected location. As an example placing the pointer over "Community" item on the menubar at the top of this page would result in the sub-menu appearing under "Documentation".
Regarding the following two steps found in the instructions, since none of the css files in the rhuk milkyway template contain the IDs specified, where are the adjustments made (if at all)?
Find "#header .bgbl" in "template.css" and change its bottom padding to 0:
Now we need to correct something for ie, add "position:relative;" and "z-index: 1;" to "#header" in "template.css"
If anyone can provide solutions to any of the above, I will be extremely grateful and maybe do a cartwheel or two
.
Cheers
Local server running:
Joomla 1.5.5
PHP 5.2.5
Apache 2.2.6
MySQL 5.0.45
I have been trying to set up a dropdown menu in the Rhuk Milkyway template using the procedure outlined here and its been a bit of a nightmare


IE7 & Firefox 3.0.1
=================
1. Although the first child level extends the full 14em, only the portion occupied by the sub-menu item title text is clickable (The text is left aligned). Clicking on the right side of the sub-menu where no letters appear, has no effect.
2. The background image only extends as far as the menu item title text when hovering over the first child level.
3. The Pill menu separator line appears within the child menu (similar to a "repeat-y" CSS directive) when the child menu's right edge extends beyond its parent's cell.
IE7 Only
=======
4. The child menu originates below the menu item to the immediate right of its parent instead of the expected location. As an example placing the pointer over "Community" item on the menubar at the top of this page would result in the sub-menu appearing under "Documentation".
Regarding the following two steps found in the instructions, since none of the css files in the rhuk milkyway template contain the IDs specified, where are the adjustments made (if at all)?
Find "#header .bgbl" in "template.css" and change its bottom padding to 0:
Now we need to correct something for ie, add "position:relative;" and "z-index: 1;" to "#header" in "template.css"
If anyone can provide solutions to any of the above, I will be extremely grateful and maybe do a cartwheel or two

Cheers
Local server running:
Joomla 1.5.5
PHP 5.2.5
Apache 2.2.6
MySQL 5.0.45
Freedom of expression ... some may try to suppress it but they can never take it away ...
There is no problem a good miracle can't fix.
There is no problem a good miracle can't fix.
-
- Joomla! Apprentice
- Posts: 17
- Joined: Thu Jul 10, 2008 1:59 am
Re: [TUT] How to add a drop down mootools menu to your template
ah72 wrote:Hello,add the following at the last line of the head section in your template index.phpbut it displays vertically in IE6RegardsCode: Select all
<!--[if IE]> <style type="text/css"> #hornav ul li a {display:inline-block;} </style> <![endif]-->
also encountered the same problem with tazlikesrobots. I added now the codes in the last line of the head section in the index.php it solve the problem of displaying it horizontally but now whenever i hover over the menu the submenus appear at the left side of the main menu instead of showing in the bottom. Have i done something wrong with the code? I'm making our schools website and im still new at joomla and css. here's the site that im working on http://sccpag.edu.ph
-
- Joomla! Explorer
- Posts: 290
- Joined: Sat Mar 15, 2008 9:43 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hello,
dizzi, can you provide a link, (if it is still on localhost upload it to a test subdirectory on your site)
Best way in my opinion to deal with ie6 is to consider it outdated and time consumer for designers, and to notify ie6 visitors with a small message that they are using an outdated browser and should upgrade, check this tool from yootheme http://tools.yootheme.com/yootools/free ... check.html
Regards
dizzi, can you provide a link, (if it is still on localhost upload it to a test subdirectory on your site)
add the following in the head section of your template index.phparnel_cagatin wrote:but now whenever i hover over the menu the submenus appear at the left side of the main menu instead of showing in the bottom
Code: Select all
<!--[if lte IE 6]>
<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[i].insertBefore(document.createElement('div'), menu_li_els[i].lastChild);
}
});
</script>
<![endif]-->
Regards
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!
-
- Joomla! Apprentice
- Posts: 17
- Joined: Thu Jul 10, 2008 1:59 am
Re: [TUT] How to add a drop down mootools menu to your template
Should i remove the previously added code and change it with the new one or should I just add this code above it? I have tried putting it but still the same.. Sorry for such many questions, i dont have any background in css and php. I'm still working my way around this stuff. I've put it in my site but the problem still exists.
-
- Joomla! Explorer
- Posts: 290
- Joined: Sat Mar 15, 2008 9:43 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hello,
I checked the source code of your page, you added the code, but you used a text processor (like ms word) not a text editor (like notepad) and that resulted in adding some other characters and crap to the code. so remember always to use a pure text editor when editing files containing code, you can use notepad or notepad++ or komodo(which I use most) , alternatively you can directly use joomla admin panel to edit template source files (menu Extensions >> Template Manager >> Select template and click buttom Edit >> click "Edit HTML" --in our case--)
here's how the code appears in your file:
(you need to remove all instances of " " from it)
Remember to put additional code at the bottom of the head section and not at the most top before the meta tags and the head code generated by joomla.
If you already have a conditional statement for ie6 (<!--[if lte IE 6]>...<![endif]-->), no need to add another one just put the additional code inside it.
some css tweaks: go to file "templates/redevo_aphelion/css/template.css" line 103 and change "background-position" property for css selector "#header .bgbl" to "25px 2px"
I like the fact that you implemented the "iecheck" extension, but you put it in the "left" position of the template, you can create a new module position as explained in the first post of this tutorial, but this time put it exactly below the <body> tag, then set the iecheck module position to the newly created position.
sorry for too much stuff at once, if you don't get it right attach your template as a compressed file and I'll be happy to make the required changes for you.
Keep up with the good work and you'll see quickly the results of your poll being reversed
Best Regards
I checked the source code of your page, you added the code, but you used a text processor (like ms word) not a text editor (like notepad) and that resulted in adding some other characters and crap to the code. so remember always to use a pure text editor when editing files containing code, you can use notepad or notepad++ or komodo(which I use most) , alternatively you can directly use joomla admin panel to edit template source files (menu Extensions >> Template Manager >> Select template and click buttom Edit >> click "Edit HTML" --in our case--)
here's how the code appears in your file:
Code: Select all
<!--[if lte IE 6]>
<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[i].insertBefore(document.createElement('div'), menu_li_els[i].lastChild);
}
});
</script>
<![endif]-->
Remember to put additional code at the bottom of the head section and not at the most top before the meta tags and the head code generated by joomla.
If you already have a conditional statement for ie6 (<!--[if lte IE 6]>...<![endif]-->), no need to add another one just put the additional code inside it.
some css tweaks: go to file "templates/redevo_aphelion/css/template.css" line 103 and change "background-position" property for css selector "#header .bgbl" to "25px 2px"
Code: Select all
#header .bgbl{
background:url(../images/headerbg_bl.jpg) no-repeat;
background-position:25px 2px;
height:auto!important;
height:100px;
min-height:100px;
padding:0px 24px 0px 24px;
position:relative;
}
sorry for too much stuff at once, if you don't get it right attach your template as a compressed file and I'll be happy to make the required changes for you.
Keep up with the good work and you'll see quickly the results of your poll being reversed

Best Regards
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!
-
- Joomla! Apprentice
- Posts: 17
- Joined: Thu Jul 10, 2008 1:59 am
Re: [TUT] How to add a drop down mootools menu to your template
Hi,
I've already deleted all the   instances in my index.php file.. tanx so much for the info. The only problem now is when i follow the css tweaking my google search box disappear. About the module of the iecheck i'm still having a hard time in creating a new position of the module or creating a new position for the module. Here's the attachment for my template. Tanx for the information. It really helps me a lot. Also is there a way if you can teach me on how to properly set up the pop in module in joomla?
I've already deleted all the   instances in my index.php file.. tanx so much for the info. The only problem now is when i follow the css tweaking my google search box disappear. About the module of the iecheck i'm still having a hard time in creating a new position of the module or creating a new position for the module. Here's the attachment for my template. Tanx for the information. It really helps me a lot. Also is there a way if you can teach me on how to properly set up the pop in module in joomla?
You do not have the required permissions to view the files attached to this post.
- dizzi
- Joomla! Virtuoso
- Posts: 3136
- Joined: Fri Dec 21, 2007 9:36 pm
- Location: Yorkshire, UK
Re: [TUT] How to add a drop down mootools menu to your template
Thanks for replying. The site is at http://pmnet.hostbot.com. I have placed a "Polls" sub-menu item under "News" in the horizontal top menu.(from ah72)
dizzi, can you provide a link, (if it is still on localhost upload it to a test subdirectory on your site)
Regards
Freedom of expression ... some may try to suppress it but they can never take it away ...
There is no problem a good miracle can't fix.
There is no problem a good miracle can't fix.
-
- Joomla! Apprentice
- Posts: 8
- Joined: Mon Jul 14, 2008 2:05 am
Re: [TUT] How to add a drop down mootools menu to your template
Hi great tutorial there, can i ask how to do change the font size of the navigation? i having this problem where my navigation goes over to the next line. I attach a screenshot of my problem. Thank in advance
You do not have the required permissions to view the files attached to this post.
-
- Joomla! Explorer
- Posts: 290
- Joined: Sat Mar 15, 2008 9:43 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hello all,
sorry for being late on replying, I've been out last 2 days
To link to a popup window in joomla: create a new menu item >> select type: "External link" >> under "Menu Item Details" >> put the following in the "Link" field
change http://google.com with the link to your popup content
you can add other settings inside window.open to customize the popup window, check here
to css selector "#user3 ul li li a" in template.css line 860
from css selector "#user3 ul li" in template.css line 822
to the end of this file "templates/redevo_aphelion/css/template.css" (change the font-size value as required)
Happy tweaking!
Best Regards
sorry for being late on replying, I've been out last 2 days
find attached the template with required changesarnel_cagatin wrote:Here's the attachment for my template
Search box moved to the "header" portion of the template instead of the "container"arnel_cagatin wrote:when i follow the css tweaking my google search box disappear
new position (called "user5" created in "templateDetails.xml" and added to template "index.php" right below the body tag, Please go to admin panel >> menu Extensions >> Module Manager >> click on iecheck >> set its position to "user5"arnel_cagatin wrote:About the module of the iecheck i'm still having a hard time in creating a new position of the module
To link to a popup window in joomla: create a new menu item >> select type: "External link" >> under "Menu Item Details" >> put the following in the "Link" field
Code: Select all
javascript:popup('http://google.com'); function popup(popup_url){window.open(popup_url,'Popup','resizable=yes,width=400,height=400');}
you can add other settings inside window.open to customize the popup window, check here
adddizzi wrote:1. Although the first child level extends the full 14em, only the portion occupied by the sub-menu item title text is clickable (The text is left aligned). Clicking on the right side of the sub-menu where no letters appear, has no effect.
2. The background image only extends as far as the menu item title text when hovering over the first child level.
Code: Select all
width:14em;
text-align:left;
removedizzi wrote:3. The Pill menu separator line appears within the child menu
Code: Select all
height:40px;
add this code to the head section of the template "index.php"dizzi wrote:IE7 Only
=======
4. The child menu originates below the menu item to the immediate right of its parent instead of the expected location. As an example placing the pointer over "Community" item on the menubar at the top of this page would result in the sub-menu appearing under "Documentation".
Code: Select all
<!--if IE]>
<style type="text/css">
#user3 ul ul {clear:both;} /* this is because "rhuk milkyway" uses floats for menu items */
#user3 li li {height:auto;} /* for ie6 */
</style>
<![endif]-->
That was template specific tweaking, you don't need to do it for other templates.dizzi wrote:Regarding the following two steps found in the instructions, since none of the css files in the rhuk milkyway template contain the IDs specified, where are the adjustments made (if at all)?
addqwerty5 wrote:how to do change the font size of the navigation?
Code: Select all
#hornav ul {font-size:0.8em;}
Happy tweaking!
Best Regards
You do not have the required permissions to view the files attached to this post.
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!
-
- Joomla! Apprentice
- Posts: 6
- Joined: Thu Aug 14, 2008 1:29 am
Re: [TUT] How to add a drop down mootools menu to your template
Hey loving the tut so far, just having a bit of trouble... trying it out on my customized version of the rhuk_milkyway template.
I'm currently unable to get the mootools fx.transitions to work, although i used the example that you have posted earlier and secondly the drop-down elements don't appear in IE.
If you (or anyone else) could check out my source code and point me in the right direction it would be much appreciated.
http://rotomo.com.au/index.php is the site
Thanks in advance
I'm currently unable to get the mootools fx.transitions to work, although i used the example that you have posted earlier and secondly the drop-down elements don't appear in IE.
If you (or anyone else) could check out my source code and point me in the right direction it would be much appreciated.
http://rotomo.com.au/index.php is the site

Thanks in advance
-
- Joomla! Explorer
- Posts: 290
- Joined: Sat Mar 15, 2008 9:43 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hello Nneon,
You missed this stepNneon wrote:I'm currently unable to get the mootools fx.transitions to work, although i used the example that you have posted earlier and secondly the drop-down elements don't appear in IE.
Regardsah72 wrote:go to the admin panel >> Module Manager >> Click on the main menu
under "Advanced Parameters" set "Menu Class Suffix" to "_horiz" (without quotes)
(Note: if you choose a menu class suffix other than _horiz you need to edit moomenu.js)
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!
- dizzi
- Joomla! Virtuoso
- Posts: 3136
- Joined: Fri Dec 21, 2007 9:36 pm
- Location: Yorkshire, UK
Re: [TUT] How to add a drop down mootools menu to your template
Hi ah72
Nice one m8, things are beginning to look a bit better
, although I had to modify your recommendations a bit.
For:
Oddly enough, 14em proved to be too wide, althought this was the value that had been specified throughout. Anyhow 12.2em did the trick
For:
However, I followed your recommendation and added the following code to the index.php template file but it had no effect. The sub-menus are still appearing under the wrong parent (ie they are appearing under the item to the right) as before.
Anyway I shall continue to tweak things to see if I can solve this. If you have other ideas though I will be grateful for them
.
Regards
Nice one m8, things are beginning to look a bit better

For:
Code: Select all
width:14em;
text-align:left;

For:
I adjusted the height to 25px to correspond to the height of my background image (why didn't I think of this befor) and presto the height of the separators were correctly adjusted.removefrom css selector "#user3 ul li" in template.css line 822.Code: Select all
height:40px;
However, I followed your recommendation and added the following code to the index.php template file but it had no effect. The sub-menus are still appearing under the wrong parent (ie they are appearing under the item to the right) as before.
Code: Select all
<!--if IE]>
<style type="text/css">
#user3 ul ul {clear:both;} /* this is because "rhuk milkyway" uses floats for menu items */
#user3 li li {height:auto;} /* for ie6 */
</style>
<![endif]-->

Regards
Last edited by dizzi on Fri Aug 15, 2008 11:32 am, edited 1 time in total.
Freedom of expression ... some may try to suppress it but they can never take it away ...
There is no problem a good miracle can't fix.
There is no problem a good miracle can't fix.
-
- Joomla! Explorer
- Posts: 290
- Joined: Sat Mar 15, 2008 9:43 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hello dizzi,
instead of
Best Regards
sorry there was a typo in my code , correct first line to readdizzi wrote:However, I followed your recommendation to and added the following code to the index.php template file but it had no effect.
Code: Select all
<!--[if IE]>
Code: Select all
<!--if IE]>
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!
-
- Joomla! Apprentice
- Posts: 6
- Joined: Thu Aug 14, 2008 1:29 am
Re: [TUT] How to add a drop down mootools menu to your template
Thanks mate,
I had placed _hornav in the module class suffix by mistake.
I'm now having issues in IE similar to what dizzi was talking about... the submenu appears directly to the right of the parent item instead of below.
I tried using the following code but didn't work for me?
Even tired using #hornav instead of #user3 but still no luck for me 
I had placed _hornav in the module class suffix by mistake.
I'm now having issues in IE similar to what dizzi was talking about... the submenu appears directly to the right of the parent item instead of below.
I tried using the following code but didn't work for me?
Code: Select all
<!--[if IE]>
<style type="text/css">
#user3 ul ul {clear:both;} /* this is because "rhuk milkyway" uses floats for menu items */
#user3 li li {height:auto;} /* for ie6 */
</style>
<![endif]-->

-
- Joomla! Explorer
- Posts: 290
- Joined: Sat Mar 15, 2008 9:43 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hello Nneon,
add this css
Regards
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;}
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!
-
- Joomla! Apprentice
- Posts: 6
- Joined: Thu Aug 14, 2008 1:29 am
Re: [TUT] How to add a drop down mootools menu to your template
Works perfectly,
Thanks heaps
Thanks heaps

- dizzi
- Joomla! Virtuoso
- Posts: 3136
- Joined: Fri Dec 21, 2007 9:36 pm
- Location: Yorkshire, UK
Re: [TUT] How to add a drop down mootools menu to your template
Oh fantastic m8 that solved it alright! Yup missed that opening square bracket tooah72 wrote:
sorry there was a typo in my code , correct first line to readinstead ofCode: Select all
<!--[if IE]>
Code: Select all
<!--if IE]>


Freedom of expression ... some may try to suppress it but they can never take it away ...
There is no problem a good miracle can't fix.
There is no problem a good miracle can't fix.
-
- Joomla! Explorer
- Posts: 290
- Joined: Sat Mar 15, 2008 9:43 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hello,
Nneon, I'm glad you resolved the issue.
Regards
Nneon, I'm glad you resolved the issue.
try thisdizzi wrote:Place a background colour or image for the active top level menu item
Code: Select all
#user3 ul li.active {
background: transparent url(../images/blue/mw_menu_active_bg.png) repeat-x;
background-position:0px 0px;
}
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!
- dizzi
- Joomla! Virtuoso
- Posts: 3136
- Joined: Fri Dec 21, 2007 9:36 pm
- Location: Yorkshire, UK
Re: [TUT] How to add a drop down mootools menu to your template
Thanks m8, top stuff as usualah72 wrote:try thisdizzi wrote:Place a background colour or image for the active top level menu itemCode: Select all
#user3 ul li.active { background: transparent url(../images/blue/mw_menu_active_bg.png) repeat-x; background-position:0px 0px; }

Code: Select all
#user3 ul li.active a {
background: transparent url(../images/blue/mw_menu_active_bg.png) repeat-x;
background-position:0px 0px;
color:#ffffff;
}
Code: Select all
#user3 li:hover {
background: #006699; /**change #006699 to any desired colour**/
}
Once again maximum thanks to ah72

Cheers
Freedom of expression ... some may try to suppress it but they can never take it away ...
There is no problem a good miracle can't fix.
There is no problem a good miracle can't fix.
-
- Joomla! Explorer
- Posts: 306
- Joined: Sun Mar 23, 2008 9:54 pm
Re: [TUT] How to add a drop down mootools menu to your template
Possibly off topic, but is it possible to indent the menu items and submenu items using a math function?
First child on 5px, second on 10, third on 15,...
Should this be tackled in the css or in the js file, assuming it is possible in the first place.
Result would be something like:
Menu
---Item 1
------Item 2
---------Item 3
...
Thanks for the tutorial btw
First child on 5px, second on 10, third on 15,...
Should this be tackled in the css or in the js file, assuming it is possible in the first place.
Result would be something like:
Menu
---Item 1
------Item 2
---------Item 3
...
Thanks for the tutorial btw
-
- Joomla! Explorer
- Posts: 290
- Joined: Sat Mar 15, 2008 9:43 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hello,
Yup, possible with css using padding-left
example:
Regards
Yup, possible with css using padding-left
example:
Code: Select all
ul.menu li {padding-left:5px;}
ul.menu li li {padding-left:10px;}
ul.menu li li li {padding-left:15px;}
ul.menu li li li li {padding-left:20px;}
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!
-
- Joomla! Explorer
- Posts: 306
- Joined: Sun Mar 23, 2008 9:54 pm
Re: [TUT] How to add a drop down mootools menu to your template
Wow, thanks a lot man!
This is a really cool. Thanks again.
This is a really cool. Thanks again.
-
- Joomla! Explorer
- Posts: 306
- Joined: Sun Mar 23, 2008 9:54 pm
Re: [TUT] How to add a drop down mootools menu to your template
I added the code at the bottom of the file template css, but did nothing. Sorry for the newbee questions btw
-
- Joomla! Explorer
- Posts: 290
- Joined: Sat Mar 15, 2008 9:43 pm
- Contact:
Re: [TUT] How to add a drop down mootools menu to your template
Hello,
can u provide a link to your site?kadded wrote:I added the code at the bottom of the file template css, but did nothing.
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!