[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.
Heilong
Joomla! Apprentice
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

Post by Heilong » Thu Jul 31, 2008 4:25 pm

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,

ah72
Joomla! Explorer
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

Post by ah72 » Thu Jul 31, 2008 8:42 pm

Hello,

in the given css code change all instances of "14em" to the value you want:
#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;
}
Regards
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

Heilong
Joomla! Apprentice
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

Post by Heilong » Fri Aug 01, 2008 2:05 am

Thanks,

It did work well :D

Heilong
Joomla! Apprentice
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

Post by Heilong » Fri Aug 01, 2008 8:35 am

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,

ah72
Joomla! Explorer
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

Post by ah72 » Fri Aug 01, 2008 9:01 am

Hello,
Heilong wrote:I also want my vertical menu to display like an accordion when the user mouse is over the menu containing submenu.
check this
http://forum.joomla.org/viewtopic.php?f=469&t=304955

Best Regards
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

User avatar
dizzi
Joomla! Virtuoso
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

Post by dizzi » Tue Aug 05, 2008 3:16 pm

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

User avatar
dizzi
Joomla! Virtuoso
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

Post by dizzi » Tue Aug 05, 2008 10:14 pm

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

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.

arnel_cagatin
Joomla! Apprentice
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

Post by arnel_cagatin » Fri Aug 08, 2008 2:24 am

ah72 wrote:Hello,
but it displays vertically in IE6
add the following at the last line of the head section in your template index.php

Code: Select all

<!--[if IE]>
<style type="text/css">
#hornav ul li a {display:inline-block;}
</style>
<![endif]-->
Regards

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

ah72
Joomla! Explorer
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

Post by ah72 » Fri Aug 08, 2008 9:29 am

Hello,

dizzi, can you provide a link, (if it is still on localhost upload it to a test subdirectory on your site)
arnel_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
add the following in the head section of your template index.php

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]-->
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
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

arnel_cagatin
Joomla! Apprentice
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

Post by arnel_cagatin » Sat Aug 09, 2008 6:36 am

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.

ah72
Joomla! Explorer
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

Post by ah72 » Sat Aug 09, 2008 11:04 am

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:

Code: Select all

<!--[if lte IE 6]>
<script type="text/javascript">
window.addEvent('domready', function(){
&nbsp; &nbsp;var menu_li_els = document.getElementById('hornav').firstChild.childNodes;
&nbsp; &nbsp;for(var i=0;i<menu_li_els.length; i++) {
&nbsp; &nbsp;&nbsp; &nbsp;menu_li_els[i].insertBefore(document.createElement('div'), menu_li_els[i].lastChild);
&nbsp; &nbsp;}
});
</script>
<![endif]-->
(you need to remove all instances of "&nbsp;" 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"

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;
}
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
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

arnel_cagatin
Joomla! Apprentice
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

Post by arnel_cagatin » Mon Aug 11, 2008 10:05 am

Hi,
I've already deleted all the &nbsp 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.

User avatar
dizzi
Joomla! Virtuoso
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

Post by dizzi » Tue Aug 12, 2008 3:53 pm

(from ah72)
dizzi, can you provide a link, (if it is still on localhost upload it to a test subdirectory on your site)
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.

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.

qwerty5
Joomla! Apprentice
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

Post by qwerty5 » Wed Aug 13, 2008 4:16 am

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.

ah72
Joomla! Explorer
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

Post by ah72 » Wed Aug 13, 2008 8:17 pm

Hello all,

sorry for being late on replying, I've been out last 2 days
arnel_cagatin wrote:Here's the attachment for my template
find attached the template with required changes
redevo_aphelion.zip
arnel_cagatin wrote:when i follow the css tweaking my google search box disappear
Search box moved to the "header" portion of the template instead of the "container"
arnel_cagatin wrote:About the module of the iecheck i'm still having a hard time in creating a new position of the module
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"

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');}
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

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

Code: Select all

width:14em;
text-align:left;
to css selector "#user3 ul li li a" in template.css line 860
dizzi wrote:3. The Pill menu separator line appears within the child menu
remove

Code: Select all

height:40px;
from css selector "#user3 ul li" in template.css line 822
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".
add this code to the head section of the template "index.php"

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

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)?
That was template specific tweaking, you don't need to do it for other templates.

qwerty5 wrote:how to do change the font size of the navigation?
add

Code: Select all

#hornav ul {font-size:0.8em;}
to the end of this file "templates/redevo_aphelion/css/template.css" (change the font-size value as required)

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

Nneon
Joomla! Apprentice
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

Post by Nneon » Thu Aug 14, 2008 6:00 am

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

ah72
Joomla! Explorer
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

Post by ah72 » Thu Aug 14, 2008 8:06 am

Hello Nneon,
Nneon 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.
You missed this step
ah72 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)
Regards
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

User avatar
dizzi
Joomla! Virtuoso
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

Post by dizzi » Thu Aug 14, 2008 4:49 pm

Hi ah72

Nice one m8, things are beginning to look a bit better :D, although I had to modify your recommendations a bit.

For:

Code: Select all

    width:14em;
    text-align:left;
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:
remove

Code: Select all

height:40px;
from css selector "#user3 ul li" in template.css line 822.
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.


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

ah72
Joomla! Explorer
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

Post by ah72 » Thu Aug 14, 2008 11:08 pm

Hello dizzi,
dizzi wrote:However, I followed your recommendation to and added the following code to the index.php template file but it had no effect.
sorry there was a typo in my code , correct first line to read

Code: Select all

<!--[if IE]>
instead of

Code: Select all

<!--if IE]>
Best Regards
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

Nneon
Joomla! Apprentice
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

Post by Nneon » Thu Aug 14, 2008 11:25 pm

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?

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]-->
Even tired using #hornav instead of #user3 but still no luck for me :(

ah72
Joomla! Explorer
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

Post by ah72 » Fri Aug 15, 2008 5:21 am

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
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

Nneon
Joomla! Apprentice
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

Post by Nneon » Fri Aug 15, 2008 5:44 am

Works perfectly,

Thanks heaps ;)

User avatar
dizzi
Joomla! Virtuoso
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

Post by dizzi » Fri Aug 15, 2008 11:29 am

ah72 wrote:
sorry there was a typo in my code , correct first line to read

Code: Select all

<!--[if IE]>
instead of

Code: Select all

<!--if IE]>
Oh fantastic m8 that solved it alright! Yup missed that opening square bracket too ;D. Thanks for all the support, you're an absolute star :) .
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.

ah72
Joomla! Explorer
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

Post by ah72 » Sat Aug 16, 2008 5:11 am

Hello,

Nneon, I'm glad you resolved the issue.
dizzi wrote:Place a background colour or image for the active top level menu item
try this

Code: Select all

#user3 ul li.active {
background: transparent url(../images/blue/mw_menu_active_bg.png) repeat-x;
background-position:0px 0px;
}
Regards
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

User avatar
dizzi
Joomla! Virtuoso
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

Post by dizzi » Sat Aug 16, 2008 8:38 pm

ah72 wrote:
dizzi wrote:Place a background colour or image for the active top level menu item
try this

Code: Select all

#user3 ul li.active {
background: transparent url(../images/blue/mw_menu_active_bg.png) repeat-x;
background-position:0px 0px;
}
Thanks m8, top stuff as usual :) . I modified it a bit to give the menu text more prominence. The black font looked a bit obscure against the blue background so I changed it to white. For those who are interested, the modified code looks like this:

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;
}
Additionally, for those who wish to keep the top level parent highlighted while hovering over the drop-down menu items, they can use the following:

Code: Select all

#user3 li:hover {
background: #006699; /**change #006699 to any desired colour**/
}
Please note that the code listed here goes in the "blue.css" file (of the rhuk milkyway template) or whichever colour variation that has been selected in the template parameters at the administrative backend.

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.

kadded
Joomla! Explorer
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

Post by kadded » Mon Aug 18, 2008 7:21 am

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

ah72
Joomla! Explorer
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

Post by ah72 » Mon Aug 18, 2008 7:31 am

Hello,

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;}
Regards
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

kadded
Joomla! Explorer
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

Post by kadded » Mon Aug 18, 2008 7:36 am

Wow, thanks a lot man!

This is a really cool. Thanks again.

kadded
Joomla! Explorer
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

Post by kadded » Mon Aug 18, 2008 7:43 am

I added the code at the bottom of the file template css, but did nothing. Sorry for the newbee questions btw

ah72
Joomla! Explorer
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

Post by ah72 » Mon Aug 18, 2008 12:36 pm

Hello,
kadded wrote:I added the code at the bottom of the file template css, but did nothing.
can u provide a link to your site?
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!


Locked

Return to “Templates for Joomla! 1.5”