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

[kadded]

Sure:

http://zanchyn.net/siteke/

Thanks!

[kadded]

Ok, after some googling, I found out that it is rather difficult to use pure css to style succeeding li items. It's better to assign id's to the li items. So slowly I start narrowing down the problem here.

So, I'm trying to understand how these work and how I can change the classes into id's so I can control it better. Or eg add an id to it, whatever. So looking at the .js file, I got this far understanding it (please correct where I'm wrong):


Row 31 -56 initiates the actual class attribution:

Code: Select all

			setActive: function () {
				//this.addClass(classname);
				this.className+='sfhover';
				/*
				for(var i=0;i<this.childNodes.length; i++) {
					if(this.childNodes[i].nodeName.toLowerCase() == 'a') {
						//$(this.childNodes[i]).addClass(classname);
						$(this.childNodes[i]).setActive();
						return;
					}
				}
				*/
			},

			setDeactive: function () {
				//this.removeClass(classname);
				this.className=this.className.replace(new RegExp("sfhover\\b"), "");
				/*
				for(var i=0;i<this.childNodes.length; i++) {
					if(this.childNodes[i].nodeName.toLowerCase() == 'a') {
						$(this.childNodes[i]).setDeactive();
						return;
					}
				}
				*/
			},

Line 198-203 actually triggers the js to attribute the class.

Code: Select all

			sfEls[i].onmouseover=function() {
				this.className+="sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp("sfhover\\b"), "");
			}

Correct?

How can I add a id to each of the items, so that they would have e.g. "li_10", li"_11", "li_12", "li_20",... where 10 is list item 1 and li_11 is list item 1.1.

Would this be possible to implement and any hints on this one?

[piegus]

@ah72
I want icon on the right side of the link.
Is it possible to get and how?

Sry for my english.
Regards

[qwerty5]

Hi i facing a problem i have a poll in my joomla web, but however when i click result the dropdown menu on the poll result page isnt working. Anyone can help me with this? i using a IE 6 browser

[Nneon]

Hey guys,

I've ran into another problem with internet explorer... @ http://tanksplusmore.com/index.php

I've set the menu up to have 3 levels... works fine in FF but for some reason in IE there is a large gap between each level making it impossible to mouse over them.

If someone could take a look and tell me where i've gone wrong that would be great.

Thanks

[Nneon]

Never mind... I simply halved the margin on #hornav ul li ul ul and it did the trick.

[lizaa]

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

Hello,

Thanks for this great tutorial,
I followed the tutorial steps and it is working fine , I want to add a different background image for each menu item
as they are not the same size also i want to add background image for the mouse over and the active state.

How can i do that??

Thanks.

[zelahi]

Hello:

This is my first post in this forum and i am hoping someone can help me out here.

I have a website here: http://www.andescap.com/index.php

I get this error message when anybody visit my website that " done, but with errors on page"

Another serious problem that the horizontal menu on the site sometimes doesnot show up in every client's machine. I tried everything but couldnt fix it. Some machine it works but in some machines it doesnt.

Any suggestions or code to put in?

Cheers

Zaher

[Nneon]

I was just wondering... is there a way to disable the fx.transition ?

what bit of code in the moomenu.js file would i need to change and how?

[Lukasz]

Hi Guys,
I'm a big fun of drop down menus, so i'm glad i've found your tutorial (especially CMS driven horizontal drop down menu sounds very exciting). I applied your solution to my site (currentyl there is only menu there) for testing purposes, and it works reasonably good in modern browsers, but i have problem with IE6 (didn't try on IE7). IE6 was displaing vertical list until i applied ah72's

Code: Select all

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

but it still does not show any action under IE6 - just displaying it horizontaly.
I should mention also that in moomenu.js i added beneath:

Code: Select all

Window.onDomReady(function() {new DropdownMenu($E('#hornav ul.menu_horiz'))});

that code:

Code: Select all

Window.onDomReady(function() {new DropdownMenu($E('#hornav ul'))});

It does not make things either better or worse ,OK
here is link to my website with menu (only menu): http://www.eubridgeltd.com/
If someone of You would like to give me a hint i would gladly appreciate it.

Regards
Łukasz

[lizaa]

Regards my probelm which is i need to write different css for each menu item as i have background images for hover , active states,

I saw this code in my page source:

<ul class="menu_horiz"><li id="current" class="active item1"><a href="http://xc5.org/wes/"><span>Home</span></a></li><li class="parent item62"><a href="#"><span>About us</span></a><ul><li class="item63"><a href="/wes/index.php?option=com_content&view=article&id=47&Itemid=63&lang=en"><span>Company overview</span></a></li><li class="item64"><a href="/wes/index.php?option=com_content&view=article&id=48&Itemid=64&lang=en"><span>Chairman’s message</span></a> ..................


Now, i don't know how to write the class for each menu items, I noticed that the class is identified by the menu item id but actually i don't know what is the right syntax.

I need help please.
Thank you.

[Lukasz]

Hello lizaa,
You can add a specific id to each class and attach style to it. I've found some explanation here:
http://css-tricks.com/the-difference-be ... and-class/
Basically 'ID’s are unique' and 'Classes are NOT unique'. And ID's and Classes names should be without space (class="active_item1").
I think you should try to use some editor like 'Dreamweaver' it may help you with syntax, but probably not all css options are there.

Hope that helps.
Łukasz

[lizaa]

Thank you Lukasz for your replay, I just want to say that i didn't create this classes by my self i just viewed the source of my web page and saw these classes, i don't know exactly where did they come from? (i think it is generated dynamically ), any way all i need is to write these classes on my css file and add a background image for each menu item.

can you help me on that?
thank you.

[genixx]

ok, im at a loss. First..i gotta say this was a sweet tutorial. exactly what ive been looking for.
however, im running the latest firefox and it works perfectly. however, stupid IE6 wont show any dropdowns and the only menu that 'lights up' is the home. ive tried several solutions that ppl suggested in this thread..and im at a loss (and it doesnt help sucking at joomla). suggestions please!

Thnx

[Lukasz]

Hi Guys, i think U may be interested in experimenting on skeleton templates with horizontal dropdown menu which is working also under IE 6, 7.. i have downloaded this (after registration) under:http://www.bulletprooftemplates.com (check out thir site)
You can try to play littlebit with menu styles under dreamweaver. Let me kow what you think.. btw they are using mootools.js

[aish]

please could u tell me where is the moomenu.js

Hello everybody,

I found many people in the forum asking for a way to add a drop down menu to their templates,

It's easy to do it, we'll discuss this step by step, we'll use the "Red Evolution Aphelion" as an example template

First we'll create a new module position in the template, let's call it "hornav", to make this new position accessible in the admin panel we need to add it to "/templates/redevo_aphelion/templateDetails.xml" open that file and add the following code under "<positions>"

Code: Select all

<position>hornav</position>

Let's now include our new position in the template index.php, go to the header div, find this code (line 69)

Code: Select all

		<?php if($this->countModules('top')) : ?>
		<div id="top">
		<jdoc:include type="modules" name="top" style="xhtml" />
		</div><!--top-->
		<?php endif; ?>

below it, insert the following:

Code: Select all

		<?php if ($this->countModules('hornav')): ?>
		<div id="hornav">
		<jdoc:include type="modules" name="hornav" />
		</div>
		<?php endif; ?>

Now we need some javascript which will use the mootools effects for our menu, the needed js is in the file attached "moomenu.js" put this file in the "js" folder of your template.

(Note: If you choose a div id other than "hornav" you need to edit moomenu.js)

Let's include "moomenu.js" in our template, add this code in the last line of the head section in the template index.php

Code: Select all

<?php if ($this->countModules('hornav')): ?>
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/moomenu.js"></script>
<?php endif; ?>

So far so good, let's now transfer our main menu to the newly created position (you can transfer another menu or create a new one):
go to the admin panel >> Module Manager >> Click on the main menu
under "Details" change the "position" to "hornav"
under "Module Parameters" change "Always show sub-menu Items" to "yes"
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)
Hit save.

Now we need to add some css, open this file "/templates/redevo_aphelion/css/template.css" add this code to it

Code: Select all

#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;
}

Find "#header .bgbl" in "template.css" and change its bottom padding to 0:

Code: Select all

#header .bgbl{
background:url(../images/headerbg_bl.jpg) no-repeat;
background-position:15px 100%;
height:auto!important;
height:100px;
min-height:100px;
padding:0px 24px 0px 24px;
position:relative;
}

Now we need to correct something for ie, add "position:relative;" and "z-index: 1;" to "#header" in "template.css"

Code: Select all

#header{
margin-top:16px;
background:#2f2f2f url(../images/headerbg_m.jpg) top left repeat-x;
color:#fff;
position:relative;
z-index: 1;
}

The redevo_aphelion template comes with different colors, if you use the orange color open this file "/templates/redevo_aphelion/css/orange.css" and add this code to it

Code: Select all

#hornav ul li a:hover{
background: transparent url(../images/orange/topmenu-bg.jpg) repeat-x;
background-position:0px 1px;
}

Do the same for other colors



Note: This css is for the redevo_aphelion template, if you use a different one you need to adjust it to suit your template.

We're finished, congratulations! now you have a fully working horizontal drop down moomenu

Best Regards

[aish]

pls could u guide me where moomenu.js file

[aish]

pls i want to add drop down menu for my Rhuk_milkyway template. Could u pls guide how to proceed. I don't where is the moomenu.js coding

[aish]

pls i want to add drop down menu for my Rhuk_milkyway template. Could u pls guide how to proceed. I don't where is the moomenu.js coding

pls i want to add drop down menu for my Rhuk_milkyway template. Could u pls guide how to proceed. I don't where is the moomenu.js coding

[aish]

is any body here to help me out my problem. i am new to joomla. i do not how to add a drop down menu for Rhuk_milkyway template. could any solution for this

[ah72]

Hello aish,

look at the end of the first post in the attachments

here's is a direct link http://forum.joomla.org/download/file.php?id=49066

Regards

[ideamarket]

I have implemented the menu system on a site I'm working on, but it only seems to be working as a CSS menu. Is there something I'm missing? It is Joomla 1.5.7

http://www.yourprefix.com

[piegus]

Hello.
I'm creating a menu for my website. Right now I'm working on css. But I was wondering Is there possibility to get a pointer which is showing that there is some submenu??
I rounded this by red circle in the picture.

Also second thought. Is there possibility to get an icon on the rihgt hand side on the menu?
It's rounded by green circle in the picture

icons.png

[adricist]

ah72,

I just wanted to say thank you for this great tutorial. It simply worked flawlessly and I was able to achieve what I had been trying to with several extensions without success.

I have one question for you though. Why did you decide to use the Main Menu rather than the Top Menu? It seems that the Top Menu has a better look and feel with slightly smaller fonts plus it would allow to have simultaneously a Top and Side Menu navigation where required.

Thank you again for this great tutorial,
Adri

[Alfer23]

Thanks for this tutorial, it was very helpful!!!

[arnel_cagatin]

Hi,
I have used the tutorial and just having a lil problem with my search box. In mozilla firefox their is no problem but when I used internet explorer the search box is not shown. Can anyone help me with this?? DOnt have much of a knowledge in this stuff. Tanx in advance..

[wayneob]

Hi ah72,

Great tutorial!

Followed it best i could to fit into a modified milkyway template, but no drop down menus show! i have assigned submenu's but still dont work

also its applied to top menu at mo! was on main menu but didnt work either.

sry for noob like question

url: http://www.st-johns.bournemouth.sch.uk
currently offline so iv'e pm u login details!

[wayneob]

Hello:
I get this error message when anybody visit my website that " done, but with errors on page"

Any suggestions or code to put in?

Hi Zaher,

Noticed you still have this error! Did it occur after you added the drop down? More than likely an error on your template/index page code.

[wayneob]

ok. after reading through thread agin thoroughly & doing a few tweaks its now working in both IE & FF!

Special thx for all ya time sharing this!!!!!

[ideamarket]

I have implemented the menu system on a site I'm working on, but it only seems to be working as a CSS menu. Is there something I'm missing? It is Joomla 1.5.7

http://www.yourprefix.com

Anyone able to help?