[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.
ah72
Joomla! Explorer
Joomla! Explorer
Posts: 290
Joined: Sat Mar 15, 2008 9:43 pm
Contact:

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

Post by ah72 » Thu May 29, 2008 12:22 am

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

kariy
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu May 22, 2008 6:51 pm

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

Post by kariy » Thu May 29, 2008 1:57 am

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

User avatar
d_spice
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Mar 28, 2008 5:23 pm
Location: NORCAL

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

Post by d_spice » Thu May 29, 2008 3:09 am

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/

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 May 31, 2008 10:08 am

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
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
brad
Joomla! Master
Joomla! Master
Posts: 13419
Joined: Fri Aug 12, 2005 12:38 am
Location: Sydney - Australia
Contact:

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

Post by brad » Sat May 31, 2008 10:14 am

Why don't you put good stuff like this on http://docs.joomla.org ?
Brad Baker
https://xyzulu.hosting
https://www.joomlatutorials.com <-- Joomla Help & Tutorials

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 May 31, 2008 10:04 pm

Hi all,

Sorry for my late replies
kariy wrote: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"
d_spice wrote: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
dizzi wrote: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
dizzi wrote: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
brad wrote: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
Last edited by ah72 on Sat May 31, 2008 11:40 pm, edited 1 time in total.
web2host.co.cc - Quality Free Hosting without ads - Joomla! auto-installation!!

User avatar
d_spice
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Mar 28, 2008 5:23 pm
Location: NORCAL

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

Post by d_spice » Sat May 31, 2008 11:24 pm

Thanks ah72, really appreciate it!

User avatar
d_spice
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Mar 28, 2008 5:23 pm
Location: NORCAL

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

Post by d_spice » Sun Jun 01, 2008 7:50 am

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
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 » Sun Jun 01, 2008 8:48 am

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
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 » Sun Jun 01, 2008 11:29 pm

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
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 » Sun Jun 01, 2008 11:38 pm

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

User avatar
d_spice
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Mar 28, 2008 5:23 pm
Location: NORCAL

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

Post by d_spice » Mon Jun 02, 2008 5:40 am

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Thu Feb 07, 2008 7:24 am

What is mootools

Post by hatimgenius » Mon Jun 02, 2008 9:10 am

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Wed Apr 30, 2008 7:38 am
Contact:

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

Post by getwebsolution » Mon Jun 02, 2008 10:53 am

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.

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 » Mon Jun 02, 2008 11:32 am

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
Last edited by dizzi on Thu Jun 05, 2008 6:51 pm, 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.

User avatar
d_spice
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 101
Joined: Fri Mar 28, 2008 5:23 pm
Location: NORCAL

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

Post by d_spice » Mon Jun 02, 2008 6:50 pm

I just noticed this post. I will use it right now, thanks for all your help!
ah72 wrote: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
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Mon Jun 02, 2008 7:12 pm
Contact:

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

Post by slavkozn » Wed Jun 04, 2008 5:23 pm

Very good work ;) , can I translate it to slovak language and publish this translation on my site?
Tá Vaša angličtina ma dráždi...

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 Jun 04, 2008 7:09 pm

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

slavkozn
Joomla! Apprentice
Joomla! Apprentice
Posts: 12
Joined: Mon Jun 02, 2008 7:12 pm
Contact:

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

Post by slavkozn » Mon Jun 09, 2008 7:53 pm

ah72 wrote:Yes no problem, if you do, you can put it in Slovak forum also
done 8) slovak forum and my page
Tá Vaša angličtina ma dráždi...

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 Jun 09, 2008 8:37 pm

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

wallace740
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Wed Feb 13, 2008 1:25 pm

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

Post by wallace740 » Thu Jun 19, 2008 11:06 pm

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

macku
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Wed Feb 20, 2008 4:22 pm
Location: Poland
Contact:

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

Post by macku » Tue Jun 24, 2008 8:30 am

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

grentschler
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Fri Sep 15, 2006 3:40 am

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

Post by grentschler » Thu Jun 26, 2008 7:22 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue May 20, 2008 10:46 pm

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

Post by micahsheets » Fri Jun 27, 2008 6:43 pm

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
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 Jun 28, 2008 6:58 pm

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

micahsheets
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue May 20, 2008 10:46 pm

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

Post by micahsheets » Mon Jun 30, 2008 4:26 pm

ah72 wrote:Hello,
micahsheets wrote: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
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Mon Jul 07, 2008 8:55 am

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

Post by DavePayne » Wed Jul 09, 2008 8:16 am

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Jul 10, 2008 3:31 pm

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

Post by tazlikesrobots » Thu Jul 10, 2008 4:35 pm

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
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 Jul 11, 2008 8:28 am

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

tazlikesrobots
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Jul 10, 2008 3:31 pm

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

Post by tazlikesrobots » Fri Jul 11, 2008 4:26 pm

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
That did the trick! Thank you so much for helping a complete noob to Joomla! :)


Locked

Return to “Templates for Joomla! 1.5”