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

[ah72]

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

[kariy]

First off, thanks for the tut, good effort.

Now I'm pretty new to Joomla, but i can deal with the css.
So what I actually need to know is how to implement this.

The template you used this tut for has a menu above the header(menu3) let's say i wanted to have a dropdown menu right there, then i could skip the part where you add the new position and just add the moomenu javascript.

Ok so let's say hypothetically I've got the javascript down and i want my menu3 to be a drop down menu and I've got the css down.
All I need to do is change the position of my menu to menu3 and it will be dropdown?
Ok, it's obvious that I'll have to have something to drop down. Now your tutorial wasn't about that, so dont take it the wrong way. My intention is not to shoot you down

I'm asking if you would be so kind and explain how I do that

[d_spice]

ah72,

Again great tutorial, you saved me a lot of time and stress, so thanks!
I already PM'd you about this, but thought it might be a good idea to post it here too.

How do i get the submenus to use transitions? like collapsing when i roll off of them. I've seen some cool transitions used with moomenu/mootools, and was hoping you or someone else knows how to do it.

I particularly like the transition used on the JCE Editor site.

http://www.joomlacontenteditor.net/

[dizzi]

Hi

Thanks for a very useful and easy to follow tutorial. However, I am having some issues. First of all, the dropdown menus are only activated after I navigate to the parent page and then hover over the parent menu. In other words, If i am at the home page (or any other page other than the parent with the submenus) and I place the cursor over the parent menu item, the submenus do not appear. However, when I navigate to the parent page, then placing the mouse pointer over the parent items reveals the submenus.

The other problem is that a "Notice: Use of undefined constant php - assumed 'php' in /www/.../htdocs/templates/redevo_aphelion/index.php on line 1" appears at the top of all pages on the site.

Any ideas on solutions to these problems?

Cheers

[brad]

Why don't you put good stuff like this on http://docs.joomla.org ?

[ah72]

Hi all,

Sorry for my late replies

The template you used this tut for has a menu above the header(menu3) let's say i wanted to have a dropdown menu right there, then i could skip the part where you add the new position and just add the moomenu javascript.

Yup, that's correct, however you need to edit moomenu.js and template.css:

moomenu.js : find this

Code: Select all

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

Add this after it

Code: Select all

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

template.css : add the following at the last line:

Code: Select all

#user3{
clear:both;
display:block;
height:40px;
}
#user3 .moduletable{
margin:0;
}

#user3 ul{
margin:0;
padding:0;
width:auto;
}
#user3 ul li{
margin:0;
padding:0;
height:40px;
float:right;
position:relative;
}
#user3 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;
}
#user3 ul li a:hover{
text-decoration:none;
}
#user3 ul li ul {
display:block;
height:auto;
width: 10em;
position:absolute;
top:40px;
z-index:99;
right: -999em;
background-color:#333333;
}

#user3 ul li ul ul {
margin: -40px 0 0 14em;
}

#user3 ul li li {
width: 14em;
}
#user3 ul li li a{
color:#d0d0d0;
text-transform:none;
display: block;
background:none;
padding:10px;
}

#user3 ul li ul {
right: -999em;
}

#user3 ul li:hover ul ul, #user3 ul li:hover ul ul ul {
right: -999em;
}

#user3 ul li:hover ul, #user3 ul li li:hover ul, #user3 ul li li li:hover ul {
right: auto;
}

note we've changed all instances of word "left" for "hornav" to "right" for "user3" as it is aligned right in the default redevo_aphelion

You need also some further css tweaking to remove the arrow backgrounds for active menu items (or at least correct their display)

One last thing, ensure you have the menu style set to "list" and "Always show sub-menu Items" set to "yes"

How do i get the submenus to use transitions? like collapsing when i roll off of them. I've seen some cool transitions used with moomenu/mootools, and was hoping you or someone else knows how to do it.

The transition effects are set inside moomenu.js, to customize the transition add the following code before {duration: 300} (line 94 and 97)

Code: Select all

{transition: Fx.Transitions.XXX.YYY}, 

where XXX is the transition you want to apply and YYY the mode (easeIn, easeOut or easeInOut)

Here's an example (change code from line 92 till 99 with this):

Code: Select all

if (this.parent._id)
				{
					this.myFx2 = new Fx.Style(this, 'width', {transition: Fx.Transitions.Bounce.easeOut}, {duration: 300});
					this.myFx2.set(0);
				}else{
					this.myFx2 = new Fx.Style(this, 'height', {transition: Fx.Transitions.Bounce.easeOut}, {duration: 300});
					this.myFx2.set(0);
				}

You can also set the duration you want

To get a list of available transitions check here http://docs.mootools.net/Effects/Fx-Transitions.js

from the demo section here you'll get started with all available mootools effects

However, I am having some issues. First of all, the dropdown menus are only activated after I navigate to the parent page and then hover over the parent menu. In other words, If i am at the home page (or any other page other than the parent with the submenus) and I place the cursor over the parent menu item, the submenus do not appear. However, when I navigate to the parent page, then placing the mouse pointer over the parent items reveals the submenus.

couldn't understand what was the problem exactly, can you plz post your site address

The other problem is that a "Notice: Use of undefined constant php - assumed 'php' in /www/.../htdocs/templates/redevo_aphelion/index.php on line 1" appears at the top of all pages on the site.

Does this problem appear when you modified the template or was it appearing with the original template? does it appear when u use another template? if it appears with all templates try to disable installed modules and components one by one to isolate the source of the problem, meanwhile check here

Why don't you put good stuff like this on http://docs.joomla.org ?

Thanks Brad, when I get some free time I'll try to make this tutorial look more professional and post it there.

Thank you all

Best Regards

[d_spice]

Thanks ah72, really appreciate it!

[d_spice]

Ran into a small problem, menu works perfect in Firefox, but for some reason doesn't show at all in IE. I first thought it was the flash video commercial i had playing directly below it, which had been a problem in firefox, but i took care of that with the wmode addition to the object tags. I've tried removing the flash below to see if that was an issue, but its not, the sub menus just don't want to appear in IE.

I'm adding this to my own custom template that originally had been the skeleton-template.

Site can be found here so you can see it. http://www.ultimatetrainingctr.com.

Thanks again!

[ah72]

Hello d_spice,

Your moomenu js file is pointing to the element "ja-cssmenu" which is not existing in your page. open "moomenu0.js" and change this line

Code: Select all

		Window.onDomReady(function() {new DropdownMenu($('ja-cssmenu'))});

with this

Code: Select all

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

Regards

[dizzi]

couldn't understand what was the problem exactly, can you plz post your site address

The site is http://granderiviere.hostbot.com/.

A test sub menu (Polls) has been added under the "FEATURES" main menu item. Notice at the home page when the pointer is placed over that item the sub menu does not appear. However when one navigates to the "FEATURES" page, the "Polls" sub menu appears when the mouse pointer in placed over the "FEATURES" menu item.

P.S. thanks for the link to get rid of the warning notice.

Cheers

[ah72]

Hello,

go to the admin panel >> Module Manager >> Click on your drop down menu
under "Module Parameters" change "Always show sub-menu Items" to "yes"

I noticed you did not add the "menu class suffix" _horiz

Regards

[d_spice]

Actually I ended up putting back in the suckerfish menu system, at least for now. I had the settings you mentioned set, so i am not sure what was causing it. Going to try adding it to a different site and see if i get the same result.

Thanks again.

[hatimgenius]

hello,
can anyone explain me what is mootools.
i have installed YOO Corosoul in joomla 1.0,but its not showing tabs in proper way.it is a module n requires mootools 1.1 to run properly.so is anyone there who can tell me what mootools is it component, module or mambot and from where i can take it.
please help me in this regard.

[getwebsolution]

Hi ah72,

Thank you so much for this awesome tutorial, it will help us in making joomla 1.5 templates more nice and easy to manage dynamically.
Further enhancements will be greatly appreciated.

Thanks again.

[dizzi]

To ah72

go to the admin panel >> Module Manager >> Click on your drop down menu
under "Module Parameters" change "Always show sub-menu Items" to "yes"

I noticed you did not add the "menu class suffix" _horiz

Thanks for the solution m8, this worked brilliantly in Firefox. However in IE 7 the menus appear as a vertical list instead of horizontally.

Cheers

[d_spice]

I just noticed this post. I will use it right now, thanks for all your help!

Hello d_spice,

Your moomenu js file is pointing to the element "ja-cssmenu" which is not existing in your page. open "moomenu0.js" and change this line

Code: Select all

		Window.onDomReady(function() {new DropdownMenu($('ja-cssmenu'))});

with this

Code: Select all

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

Regards

[slavkozn]

Very good work , can I translate it to slovak language and publish this translation on my site?

[ah72]

Thanks slavkozn

can I translate it to slovak language and publish this translation on my site?

Yes no problem, if you do, you can put it in Slovak forum also

Best Regards

[slavkozn]

Yes no problem, if you do, you can put it in Slovak forum also

done slovak forum and my page

[ah72]

Thanks slavkozn

It'll help others looking for this functionality but don't speak english

I can see you have a nice site with a cool template and a moomenu, sorry can't understand slovak

Best Regards

[wallace740]

Can we use this moomenu vertically?
If yes,can you explain how

[macku]

On IE6 menu display vertically. If I use float:left; menu display horizontally but sublevels not working good.

[grentschler]

Looking at the source code after implementing this, it doesn't seem like joomla is assigning a current/active link class. Am I doing something wrong?

[micahsheets]

I have this menu system working great in the com_content component. However any page that uses another component, com_weblinks for example does not work. I can tell that this is because the MooTools object is undefined in those components. I would like to know how to define the object so I can use my menus in all the components I use.

if I check for

Code: Select all

typeof(MooTools)

on com_content then it returns "object" if I check the same thing on any other component it returnes "undefined" which of course isn't going to work as the moomenu.js file starts with

Code: Select all

if (typeof(MooTools) != 'undefined')

I probably made some mistake when implementing this so any help would be appreciated.

Thanks

[ah72]

Hello,

However any page that uses another component, com_weblinks for example does not work. I can tell that this is because the MooTools object is undefined in those components

include the moomenu.js using the following code instead of the previous one

Code: Select all

<?php JHTML::script('moomenu.js', 'templates/'.$this->template.'/js/', true); ?>

having the third argument set to "true" in the above function will ensure mootools framework is loaded

Regards

[micahsheets]

Hello,

However any page that uses another component, com_weblinks for example does not work. I can tell that this is because the MooTools object is undefined in those components

include the moomenu.js using the following code instead of the previous one

Code: Select all

<?php JHTML::script('moomenu.js', 'templates/'.$this->template.'/js/', true); ?>

having the third argument set to "true" in the above function will ensure mootools framework is loaded

Regards

Thanks for the tip, I did find a solution but not as good or efficient as yours. I will use your way from now on.

[DavePayne]

Hi,

first thx a lot for your code, it was exactly what I was looking for.

But I can`t use it correctly with the ie7, the menu`s submenu doesn`t stay active when I navigate through it.
The FF3 has no problems with it. But the ie7 seems to forget that the subs were active, as soon as I hover out of the first child item of the horizontal menu.

The page isn`t avialable atm, I`m using a local server. So I can`t show you how it`s "not" working ;-)

This is the code, I`m coding the first time with css and php, so don`t kill me because the coding-style is bad. I will work through this problem as soon as I have fixed the menu ;-)

index.php

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>

 <!-- Header mit Logo-->

 <div id="header"><a href="index.php"><img src="http://localhost/joomla/templates/testtemplate/images/logo.jpg" alt="Softunion Logo"  width="338" height="70" id="logo"></a><a href="index.php"><img src="http://localhost/joomla/templates/testtemplate/images/menu_header.jpg" alt="Softunion Logo" width="995" height="142" id="logo"></a>
 
 <!-- Suchfeld -->
 
   <div id="search"><jdoc:include type="modules" name="user3" style="none"/></div>
 
 <!-- Hornizontales Menü-->
 
   <div id="hornav"><jdoc:include type="modules" name="hornav" style="xhtml"/>
     <script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/moomenu.js"></script></div>
     
</div><!--header-->

      
<!-- Mittleres Menue -->
 
 <div id="main">
 
    <!--breadcrumbs-->
    <div id="breadcrumbs"><jdoc:include type="modules" name="breadcrumb" style="xhtml"/></div>
    
    <!--menuleft-->
    <div id="menuleft"><div style="position:absolute; top:250px; left:40px;"><a href="http://www.softunion.de/files/gast.exe"><img src="http://localhost/joomla/templates/testtemplate/images/fern.png" alt="Fernzugriff"  width="128" height="128" border="0" id="fern"><br>Fernwartung starten</a></br>  
  <div style="position:absolute; top: 170px;left:-30px;"><A HREF="mailto:&#105;&#110;&#102;&#111;&#64;&#115;&#111;&#102;&#116;&#117;&#110;&#105;&#111;&#110;&#46;&#100;&#101;"><img src="http://localhost/joomla/templates/testtemplate/images/addr.png" alt="Adresse" width="191" height="139" border="0" id="addr">
  <div style="position:absolute; top:130px; left:60px;"><a href="http://localhost/joomla/index.php?option=com_content&view=article&id=11&Itemid=18"><p><br><center>Impressum</center></br></p></a>
   <jdoc:include type="modules" name="left" style="none"/></div>
   
   <!--banner-->
   <div id="banner"><jdoc:include type="modules" name="syndicate" style="none"/></div> 
    
   <!--content-->  
   <div id="content"><jdoc:include type="component" style="xhtml"/></div>


</div><!-- main -->
</body>
</html>

template.css

Code: Select all

body{
  line-height: 12px;
  font-size: 12px;
  font-family: tahoma, arial, helvetica, sans-serif;  
  background: #EBF3F9;}
 
table{
  border-collapse: collapse;}

a {
  font-family: tahoma, arial, helvetica, sans-serif;  
  font-size: 11px;
  text-decoration: none;
  color: white;
  font-weight: bold;}
  
a:link, a:visited{
  color: white;
  font-weight: bold;}

img { 
  border: none;}


/* Headerbereich */
 
  
#header{
  float: left;
  width: 995px;
  position:relative;
  z-index: 1;}
  
 
#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;}
  
  
        #logo{
          margin-bottom: 7px;
          float: left; 
          width: auto;}

        #search{
          float: right; 
          margin-top: -218px;
          width: auto;}
    
  
        #hornav{
          float: right;
          display: block;
          width: 679px;
          margin-top: -200px;
          margin-left: -44px;
          height: auto;
          *margin-top: -188px;
          *margin-right: -136px;
          text-decoration: none;}
        
        
        #hornav .moduletable{
          margin:0;}
        

        #hornav ul{
          margin-right: 10px;
          padding:0px;
          width:680px;
          height: auto;
          font-size: 12px;
          text-align: center;
          text-decoration:none;}
                  
        
        #hornav ul li{
          margin-right:2px;
          padding:0px;
          height:auto;
          float: right;
          text-decoration:none;
          position:relative;}
        
        
        #hornav ul li a{
          color: white;
          font-size: 9px;
          font-weight: bold;
          text-transform: uppercase;
          padding: 10px;
          height: auto;
          width: 105px;
          display: block;
          text-decoration:none;
          background: url('../images/bg.jpg') repeat;
          background-position: 0px 0px;}
        
        
        #hornav ul li a:hover{
          text-decoration:none;}
       
       
        #hornav ul li ul {
          width: 14em;
          height: auto;
          position:absolute;
          z-index:99;
          left: -999em;}
        

        #hornav ul li ul ul {
          height: auto;
          margin: -20px 0 0 12em;}
        

        #hornav ul li li {
          margin-top: 5px;
          padding:0;
          width: 14em;}
        
        
        #hornav ul li li a{
          color:white;
          border: 2px solid white;
          text-transform: none;
          display: block;
          width: 115px;
          height: auto;
          text-align: center;
          background: url('../images/bg.jpg') repeat;
          padding: 5px;
          margin-right: -12px;
          *margin-left: -150px;}
        

        #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 {
          font-weight: bold;
          left: auto;}


 
#main{
  float: left;
  height: auto;
  width: 995px;}

 
                
#breadcrumbs{
  border-top: 4px solid white;
  border-left: 4px solid white;
  border-bottom: 4px solid white;
  margin-top: -7px;
  margin-left: 339px;
  padding-top:2px;
  padding-left: 3px;
  font-weight: bold;
  color: white;
  float: left;
  height: 18px;
  width: 650px;
  background: url('../images/bg.jpg') repeat;}



#menuleft a{
  color:black;}
  
#menuleft a:hover{
  text-transform:uppercase;}
  
#menuleft{;
  float: left; 
  width: auto;}

#content{
  margin-top: -306px;
  *float:left;
  *margin-top: -300px;
  margin-left: 336px;
  *margin-left: 338px;
  width:650px; 
  border-left: 4px solid white;}

    
#banner{
  float: left;
  position:absolute;
  width: 130px;
  height: 1000px;
  margin-top: -330px;
  *margin-top: -182px;
  margin-left: 206px;
  *margin-left: 14px;
  background: url('../images/bg.jpg') repeat;}

[tazlikesrobots]

Thank you so much for the tutorial! It was just what I needed. I do have a question though. It works flawlessly in Firefox, but it displays vertically in IE6. Is there something else I need to do to make it work in IE?

[ah72]

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

[tazlikesrobots]

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

That did the trick! Thank you so much for helping a complete noob to Joomla!