[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.
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 12:44 pm


 
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 » Tue Aug 19, 2008 10:03 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Wed Aug 13, 2008 1:06 pm

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

Post by piegus » Fri Aug 22, 2008 6:29 pm

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

Sry for my english.
Regards

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 » Tue Aug 26, 2008 3:45 am

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
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 » Tue Aug 26, 2008 5:24 am

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
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 » Tue Aug 26, 2008 5:40 am

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

lizaa
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 218
Joined: Sat May 26, 2007 8:31 am

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

Post by lizaa » Tue Aug 26, 2008 12:55 pm

dizzi wrote:
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
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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Aug 27, 2008 4:38 am

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

Post by zelahi » Wed Aug 27, 2008 4:49 am

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
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 28, 2008 4:10 am

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Aug 24, 2008 1:33 pm

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

Post by Lukasz » Fri Aug 29, 2008 11:37 am

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 :laugh: ,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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 218
Joined: Sat May 26, 2007 8:31 am

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

Post by lizaa » Sun Aug 31, 2008 2:19 pm

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Aug 24, 2008 1:33 pm

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

Post by Lukasz » Sun Aug 31, 2008 5:14 pm

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 218
Joined: Sat May 26, 2007 8:31 am

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

Post by lizaa » Mon Sep 01, 2008 10:45 am

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.

User avatar
genixx
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Thu Jul 17, 2008 2:30 pm

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

Post by genixx » Tue Sep 02, 2008 9:00 pm

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

Lukasz
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sun Aug 24, 2008 1:33 pm

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

Post by Lukasz » Wed Sep 03, 2008 7:22 pm

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
You do not have the required permissions to view the files attached to this post.

aish
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Tue Sep 16, 2008 9:34 am

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

Post by aish » Tue Sep 16, 2008 9:58 am

please could u tell me where is the moomenu.js
ah72 wrote: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
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Tue Sep 16, 2008 9:34 am

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

Post by aish » Tue Sep 16, 2008 9:59 am

pls could u guide me where moomenu.js file

aish
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Tue Sep 16, 2008 9:34 am

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

Post by aish » Tue Sep 16, 2008 10:03 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Tue Sep 16, 2008 9:34 am

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

Post by aish » Tue Sep 16, 2008 10:04 am

aish wrote: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 wrote: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
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Tue Sep 16, 2008 9:34 am

How to add a drop down for Rhuk_milkywary template

Post by aish » Tue Sep 16, 2008 11:12 am

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
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 » Tue Sep 16, 2008 1:31 pm

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

ideamarket
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Mon Oct 02, 2006 7:14 am

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

Post by ideamarket » Thu Sep 25, 2008 7:40 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Wed Aug 13, 2008 1:06 pm

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

Post by piegus » Fri Sep 26, 2008 9:54 am

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
You do not have the required permissions to view the files attached to this post.

User avatar
adricist
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Wed Sep 17, 2008 11:39 am

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

Post by adricist » Sun Sep 28, 2008 2:55 am

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Wed Oct 01, 2008 8:48 am

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

Post by Alfer23 » Wed Oct 01, 2008 8:56 am

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

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 » Thu Oct 02, 2008 2:34 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Fri Oct 03, 2008 8:00 pm

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

Post by wayneob » Fri Oct 03, 2008 9:49 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Fri Oct 03, 2008 8:00 pm

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

Post by wayneob » Mon Oct 06, 2008 12:35 pm

zelahi wrote: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
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Fri Oct 03, 2008 8:00 pm

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

Post by wayneob » Mon Oct 06, 2008 3:54 pm

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

Special thx for all ya time sharing this!!!!!
Last edited by wayneob on Mon Oct 06, 2008 8:33 pm, edited 1 time in total.

ideamarket
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Mon Oct 02, 2006 7:14 am

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

Post by ideamarket » Mon Oct 06, 2008 4:18 pm

ideamarket wrote: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?

 

Locked

Return to “Templates for Joomla! 1.5”