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

[Heilong]

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]

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

[Heilong]

Thanks,

It did work well

[Heilong]

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]

Hello,

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

[dizzi]

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

[dizzi]

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

[arnel_cagatin]

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]

Hello,

dizzi, can you provide a link, (if it is still on localhost upload it to a test subdirectory on your site)

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

[arnel_cagatin]

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]

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

[arnel_cagatin]

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?

[dizzi]

(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

[qwerty5]

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

[ah72]

Hello all,

sorry for being late on replying, I've been out last 2 days

Here's the attachment for my template

find attached the template with required changes

redevo_aphelion.zip

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"

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

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

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

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

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.

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

[Nneon]

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]

Hello Nneon,

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

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

[dizzi]

Hi ah72

Nice one m8, things are beginning to look a bit better , 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

[ah72]

Hello dizzi,

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

[Nneon]

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]

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

[Nneon]

Works perfectly,

Thanks heaps

[dizzi]

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 . Thanks for all the support, you're an absolute star .

[ah72]

Hello,

Nneon, I'm glad you resolved the issue.

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

[dizzi]

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

[kadded]

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]

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

[kadded]

Wow, thanks a lot man!

This is a really cool. Thanks again.

[kadded]

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

[ah72]

Hello,

I added the code at the bottom of the file template css, but did nothing.

can u provide a link to your site?