MiniDoc: Creating a CSS Drop-down Menu

rsphaeroides · Post by **rsphaeroides** » Mon Dec 11, 2006 2:38 pm

nyamtoko wrote: I have followed this but how do I create the submenus and display them??

Look about ten posts back in this thread.

nyamtoko · Post by **nyamtoko** » Wed Dec 13, 2006 7:17 am

Warning: PatTemplateExtendedMenuView::require_once(D:/xamp/xampp/htdocs/BIODEALWEBSITE//includes/patTemplate/patTemplate.php) [function.require-once]: failed to open stream: No such file or directory in D:\xamp\xampp\htdocs\BIODEALWEBSITE\modules\exmenu\view\pattemplate.menuview.class.php on line 28

Fatal error: PatTemplateExtendedMenuView::require_once() [function.require]: Failed opening required 'D:/xamp/xampp/htdocs/BIODEALWEBSITE//includes/patTemplate/patTemplate.php' (include_path='.

:\xamp\xampp\php\pear\') in D:\xamp\xampp\htdocs\BIODEALWE

I get this error when installing the exmenu. Any help??

Jkruiper · Post by **Jkruiper** » Tue Jan 02, 2007 1:21 pm

Hello everyone

,

First of all, great menu for Joomla.
The next thing is that I am dutch so sorry for my English

I've implemented this menu in a site, for a client of mine.
In Firefox everything is perfect, but in IE the dropdown's are all lined out on the left.

I have tried almost everything but nothing worked

. I'm starting to go crazy here,
SOOO..... after I've read all the replies on this topic I thought mabye someone can help me here.

If it's not a know issue the site is : http://www.jenzen.nl/index.php .

Hope that I can get an answer here..

Greetings from Holland

Eddi · Post by **Eddi** » Wed Jan 17, 2007 9:31 am

latristesse wrote: Is the script after your CSS link but before the end of the head section?

I have got the same issue and checked the index.php. It is after the css link but before the end of the head section. The funny thing is that IE gives me this error only on the homepage and not on other pages on my site. Any further suggestion?

emerson · Post by **emerson** » Tue Jan 23, 2007 8:15 pm

I don't know how I am missing something so obvious, but I don't see anywhere in this 6 page thread an actual link to the MiniDoc on Creating a CSS Drop-down Menu.

This is not helped by the faq search I did for CSS Drop-down returning no results.

So while I would like to say something like "Brilliant!" or "Great Job!" or "Add me please!" (oops I thought I was on MySpace there for a minute) I would really rather just be able to find this literary treasure.

Can some please (a) post the link and/or (b) point out what I am doing to miss it?

thanks!

Emerson

emerson · Post by **emerson** » Tue Jan 23, 2007 8:38 pm

This is of course because its not an FAQ to be found here but is on CompassDesigns' site.

I do wish that someone would explain, expecially in the context of CMS practice how it is that the original poster says

BRILLIANT!!!

Thanks so much...cntrl+D this one for sure.

but doesn't actually link to it.

Seriously!

Emerson

technopuzzle · Post by **technopuzzle** » Wed Jan 24, 2007 3:04 am

@ emerson

I have amended the first posting in this thread to link to the FAQ: MiniDoc. In the future I highly suggest that you use the REPORT TO MODERATOR link when you find an error or a possible rule violation. Posting disruptive or uncivil comments will not be tolerated.

emerson wrote: I don't know how I am missing something so obvious, but I don't see anywhere in this 6 page thread an actual link to the MiniDoc on Creating a CSS Drop-down Menu.

This is not helped by the faq search I did for CSS Drop-down returning no results.

So while I would like to say something like "Brilliant!" or "Great Job!" or "Add me please!" (oops I thought I was on MySpace there for a minute) I would really rather just be able to find this literary treasure.

Can some please (a) post the link and/or (b) point out what I am doing to miss it?

thanks!

Emerson

FidelGonzales · Post by **FidelGonzales** » Thu Feb 01, 2007 9:44 am

janetgot wrote: Great menu and instructions ... and it works like a charm!

I was looking to format the submenus and found some info that worked... I added the following to the .css file and it provides a nice structure for the submenus. Hope it helps somebody out there and saves a little time searching for the answer!

#mainlevelmainnav li ul ul{ /* third-and-above-level lists */
margin: -1em 0 0 10em;
}

After several hours, you made the difference. Thanks.

bobfish · Post by **bobfish** » Thu Feb 15, 2007 9:18 pm

Okay, I'm looking to use drop down menus on my companies Joomla install, however, I can't install any additional modules, plugins or components.

What I can't tell is why it needs to be in a list? Why not the standard menu format? After all, isn't just repositioning a div based on the position of the mouse?

imtiaz · Post by **imtiaz** » Sun Mar 11, 2007 6:43 am

As i read all the discussion i find out that you are doing a lot of thing with menu. But as i m poor fellow of joomla(new in joomla) can't deal with the menu the way i want.

Can any one help me.

I just don't want to make two different menu 1 is the main menu and other one is left menu(tree type) but content of the menu will be totally different or chose by me. What should i do to have this type of menu.

Do i ask to much!!

Thanks.

Imtiaz
[email protected]

orpheriel · Post by **orpheriel** » Mon Mar 19, 2007 10:04 am

Hey,

I got the menu to drop down one dropdown, but I'd like to have it go on for a second tier, and then a third and a fourth. Is there a nice and simple way of achieving this that I overlooked so far?

Cheers,

Orph

*update

Nevermind, found the option to assign a parent to each button which made everything work.

bohilly · Post by **bohilly** » Thu Mar 29, 2007 1:50 pm

Hello there,

Could somebody please assist me a bit with setting up this nice CSS drop down menu?
I am definately not an expert on PHP/CSS but i am a pretty fast learner

(besides, i really did the research)

I am using sucker fish /extended menu in one of my templates.
It works ok with two submenus but when using three, they seem to overlap(submenu two for instance is no longer visible)
See example:
1)

2)

See how "verneukt!" overlaps "turksfruit"

Now i noticed that in the example htmldog provided, it IS possible...so what am doing wrong here?
(tested this in both explorer 6 and firefox)

I was trying to get this sample menu from htmldog but not sure where all code needs to go since the
template that i use, uses several CSS documents and some java script/document.

I have tried to insert it in the menu.css(which sounds logic...)but then the menu appears on the right site
of the page (i am using module 7 for the top if that matters) and as tree.

I have reinstalled Extended menu leaving all the settings to default and only changed the suffix stuff to mainnav.
No luck....

Could somebody tell me where to put the CSS code? or what am i doing wrong here?
Or perhaps knows what's going on with the overlapping menu issue?

Here is a list of my template CSS/suckerfish structure:
index.html
custom.css
joomla.css
menu.css
template_css.css
menu.html
menu.ini
folder JS which include a menu.js based on http://www.alistapart.com/articles/dropdowns and http://www.htmldog.com/articles/suckerfish/dropdowns/ it seems.

And here you will find the menu.css code (i have seen this code before on the forum)

/** IE bugs: a:link, a:visited, a:hover need to be styled as well; does not display separator... workaround? */
/** customize colors here */
a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal,
a.mainlevel-suckerfish-horizontal:link, a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel-suckerfish-horizontal:visited, a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited {
background-color: #333333;
color: white;
}

a.mainlevel-suckerfish-horizontal:hover, a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover {
background-color: brown;
color: white;
}

a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal,
a.sublevel-suckerfish-horizontal:link, a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel-suckerfish-horizontal:visited, a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited {
background-color: brown;
color: white;
}

a.sublevel-suckerfish-horizontal:hover, a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
background-color: brown;
color: white;
}

ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal,
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:link, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:link, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:link,
ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:visited, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:visited, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:visited {
background-color: brown;
color: white;
}

ul.mainlevel-suckerfish-horizontal ul ul a.sublevel-suckerfish-horizontal:hover, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_active-suckerfish-horizontal:hover, ul.mainlevel-suckerfish-horizontal ul ul a.sublevel_current-suckerfish-horizontal:hover {
background-color: brown;
color: white;
}

ul.mainlevel-suckerfish-horizontal ul .expanded {
display: block;
background-image: url("../images/arrow_right.gif");
background-position: right center;
background-repeat: no-repeat;
padding-right: 10px;
}

/** customize style / layout here */

a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal, span.mainlevel-suckerfish-horizontal,
a.mainlevel-suckerfish-horizontal:link, a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel-suckerfish-horizontal:visited, a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited,
a.mainlevel-suckerfish-horizontal:hover, a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover,
a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal, span.sublevel-suckerfish-horizontal,
a.sublevel-suckerfish-horizontal:link, a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel-suckerfish-horizontal:visited, a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited,
a.sublevel-suckerfish-horizontal:hover, a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
font-weight: normal;
font-size: 100%;
text-align: left;
text-decoration: none;
display: block;
border: 0px solid #333333;
padding: 0.4em 0.8em 0.4em 0.6em; /* top, right, bottom, left */
height: 1em;
line-height: 1em;
}

a.mainlevel-suckerfish-horizontal, a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal, span.mainlevel-suckerfish-horizontal {
float: left;
width: auto;
}

a.sublevel-suckerfish-horizontal, a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal, span.sublevel-suckerfish-horizontal {
font-size: 90%;
border-top: 0px solid silver;
}

#active_menu-suckerfish-horizontal,
a.mainlevel_active-suckerfish-horizontal, a.mainlevel_current-suckerfish-horizontal,
a.mainlevel_active-suckerfish-horizontal:link, a.mainlevel_current-suckerfish-horizontal:link,
a.mainlevel_active-suckerfish-horizontal:visited, a.mainlevel_current-suckerfish-horizontal:visited,
a.mainlevel_active-suckerfish-horizontal:hover, a.mainlevel_current-suckerfish-horizontal:hover,
a.sublevel_active-suckerfish-horizontal, a.sublevel_current-suckerfish-horizontal,
a.sublevel_active-suckerfish-horizontal:link, a.sublevel_current-suckerfish-horizontal:link,
a.sublevel_active-suckerfish-horizontal:visited, a.sublevel_current-suckerfish-horizontal:visited,
a.sublevel_active-suckerfish-horizontal:hover, a.sublevel_current-suckerfish-horizontal:hover {
font-weight: bold;
background:brown;
}

ul.mainlevel-suckerfish-horizontal, .mainlevel-suckerfish-horizontal ul {
padding: 0;
margin: 0;
list-style: none;
}

ul.mainlevel-suckerfish-horizontal {
width: auto;
z-index: 101;
}

ul.mainlevel-suckerfish-horizontal ul {
z-index: 102;
}

ul.mainlevel-suckerfish-horizontal ul ul {
z-index: 103;
}

ul.mainlevel-suckerfish-horizontal li {
padding: 0;
margin: 0;
background: none;
list-style: none;
float: left;
position: relative;
margin-right: 1px;
}

ul.mainlevel-suckerfish-horizontal li li {
position: relative;
width: 10em;
margin: 0;
}

ul.mainlevel-suckerfish-horizontal li li ul {
left: 10em;
top: 0;
}

ul.mainlevel-suckerfish-horizontal ul {
display: none;
position: absolute;
top: 1.65em;
left: 0;
}

ul.mainlevel-suckerfish-horizontal li > ul {
top: 1.65em;
left: auto;
}

ul.mainlevel-suckerfish-horizontal li:hover ul,
ul.mainlevel-suckerfish-horizontal li.hover ul {
display: block;
}

ul.mainlevel-suckerfish-horizontal li:hover ul ul,
ul.mainlevel-suckerfish-horizontal li.hover ul ul {
display: none;
}

ul.mainlevel-suckerfish-horizontal li:hover ul li:hover ul,
ul.mainlevel-suckerfish-horizontal li.hover ul li.hover ul {
display: block;
}

ul.mainlevel-suckerfish-horizontal, ul.mainlevel-suckerfish-horizontal li li {
clear: left;
}

/** separator */
span.mainlevel-suckerfish-horizontal, span.sublevel-suckerfish-horizontal {
border-width: 0px;
padding: 5px;
}

Greatly appreciated!

Thanks in advance.

Bo

da8iwr · Post by **da8iwr** » Wed Apr 11, 2007 12:58 am

Hi first of all compass designs, amazing work, and thanks for sharing this with the community.

I have kind of got this working in the red bar below, it needs a few tweaks to match the rest of the site, but its looking pretty snazzy at the moment

http://www.thetechyteam.co.uk/index.php

Only problem i have, is i want more than one menu to be controlled like this.

I have one main horizontal menu across the top
Home users - Business users - Services - Contact us

When you are in Home users section, it will show a sub menu, and when in business user pages it will show another sub menu.

Only the 2 sub menus will have the css drop down menus, so how do add a second extended menu module so i can assign the other menu to it, or can i use the same module again?

Only way i could think of, was by changing the name of the module so i can add it in a second time as well, so the system will accept it and not say its already there.

Any ideas?

Many Thanks
Ian

Stenger · Post by **Stenger** » Sat Apr 14, 2007 1:27 pm

Hey guys!

Love the menu and it's working like a charm... well, at least in FF, Safari and the likes.

IE However... for some reason the toplevel menu items position themselves vertically instead of horizontally. Weird problem, seeing as everything is ok in FF. Furthermore, the dropdown items falls behind my content. It probably has to do with z-index, but I feel like I´ve tried every possible combination and still no luck.

Could someone take a look at my CSS-code and see if anything jumps out at you?

Thanks, in advance!

Code: Select all

#mainleveltopnav li {
        display:inline;
        list-style-type:none;        
        padding-right:5px;
        }

a.mainleveltopnav,a.mainleveltopnav:link,a.mainleveltopnav:visited {
        color:#f90;
        }

.moduletablemainnav { 
        position:relative;
        top:0px;
        left:0px;
        z-index:100;
        font-family:Verdana;
        font-size:12px;
        margin:0px;
        padding:0;
        }

#mainlevelmainnav,#mainlevelmainnav ul {
        float:left;
        list-style:none;
        line-height:1em;
        background:transparent;
        font-weight:700;
        margin:0;
        padding:0;
        }

#menu_layer ul {
        left:80px;
        top:8px;
        }

#mainlevelmainnav a {
        font-family:Verdana;
        display:block;
        color:#000000;
        text-decoration:none;
        padding-left:20px;
        }

#mainlevelmainnav li {
        float:left;
        padding:0;
        }

#mainlevelmainnav li ul {
        position:absolute;
        top:12px;
        left:-999em;
        height:auto;
        width:130px;
        font-family:Verdana;
        font-size:12px;
        background-color:#FFFFFF;
        border:1px solid #000000;
        margin-left:20px;
        padding-top:5px;
        }

#mainlevelmainnav li li {
        width:11em;
        }

#mainlevelmainnav li ul a {
        color:#000000;
        font-size:12px;
        line-height:1.8;
        margin-left:-18px;
        font-weight:400;
        }

#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul {
        left:-999em;
        }

#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul {
        left:auto;
        z-index:6000;
        }

#menulayer a:hover {
        color:#999999;
        }

da8iwr · Post by **da8iwr** » Sun Apr 15, 2007 8:41 pm

da8iwr wrote: Only the 2 sub menus will have the css drop down menus, so how do add a second extended menu module so i can assign the other menu to it, or can i use the same module again?

This is for others that have the same question, as nobody else has answered this. I totally forgot that there is "Copy" button at the top of the Modules menu.

I know this is an open-source product, but it really does annoy me when you post a nice simple question (usually caused by working till 6am) and nobody replies.

This has got to be the worst forum i have ever used for people just not responding, apart from the VirtueMart forums, which is just as bad.

Even when i Google a problem, i will find dozens or even hundreds of people asking very similar questions in these forums and when i visit the post, nobody has responded to them.

If you find the answer out to a problem, or you know the answer to a question, post a note or drop a link to another forum post or site, it only takes 30 seconds to write a couple of lines to help others.

Ian

bdovenbarger · Post by **bdovenbarger** » Tue May 01, 2007 3:50 pm

Don't know if this post is still active??? I'm trying to get the drop downs to work – with no luck. Not sure what I'm doing wrong.

Are you actually hard coding your li lists in the php file? Or can they be added right in Joomla?

I'm so confused. And have tried posting in a few places this morning with no replies.

Thanks in advance!

Stenger · Post by **Stenger** » Tue May 01, 2007 3:53 pm

bdovenbarger wrote: Don't know if this post is still active??? I'm trying to get the drop downs to work – with no luck. Not sure what I'm doing wrong.

Are you actually hard coding your li lists in the php file? Or can they be added right in Joomla?

I'm so confused. And have tried posting in a few places this morning with no replies.

Thanks in advance!

Know the feeling...couldn't get it to work either

However, I found a module called "Infinity Menu" and it works like a charm. Try googling it or go to Joomla Extensions, should be there.

Just a suggestion, for what it's worth!

andjames26 · Post by **andjames26** » Mon May 07, 2007 4:54 am

I really like this menu, just have one small problem with it...

I've got the menu/ drop-down menu working, but the drop downs link to empty pages. On my localhost it says:

"You are not authorised to view this resource.
You need to login."

and on the actual site it comes up with a blank window. The menu was working with an older template, but I've been having prob's linking the dropdowns since I switched over... any ideas?

I'm very new to this but, I'm guessing it's just some small issue....

Thank you in advance!

asyouare405 · Post by **asyouare405** » Sat Jun 02, 2007 10:19 pm

1st of all thanks everyone who posted explnations online, i finaly got it to work... almost..

I'm not sure why, but the menus don't resized properly in IE, they get about 1/2 way.

here is my site: http://www.hdanforth.com/joomla

Here is my CSS: http://www.pastebin.ca/531673
Here is my HTML: http://www.pastebin.ca/531669

Thanks for all the help again, I can't for the life of me get that to work.

blinkmg · Post by **blinkmg** » Mon Jun 11, 2007 8:05 pm

Great menu! I have used it twice so far. This lastese implementation, however, is bugging me. Is it me or are the widths of the LI's for some reason set in stone somehwere? So If I have HOME - SOMETHING LONGER - SOMETHING LONGER , the space in between home and the next one is huge and ugly. Shouldn't these autoexpand (or shrink) to fit whatever is in there? Be it short or long? Rather than a strict uniform size for all? Please help!

Code: Select all

#twocols{ /*the columns that gets dropped down over yours might be different*/
z-index:900;
}
#leftcol{ /*the columns that gets dropped down over yours might be different*/
z-index:800;
}

.moduletable_Nav{
z-index:1000;
font-family:"Century Gothic","Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
margin:0;
padding:0;
letter-spacing:.1em;
text-transform:uppercase;
vertical-align:middle;
width:100%;
}
.moduletable_Nav td{
width:auto;
}

#mainlevel_Nav,#mainlevel_Nav ul{
float:left;
list-style:none;
line-height:1em;
background:transparent;
font-weight:700;
margin:0;
padding:0;

}
#mainlevel_Nav a:hover {
color:#ffffff;
}

#mainlevel_Nav a{
display:block;
color:#ccc;
text-decoration:none;
padding:.1em;
padding-right:10px;
padding-left:10px;
font-size:12px;
vertical-align:middle;
margin-top:11px;
width:auto;
}

#mainlevel_Nav li{
float:left;
padding:0;
width:23em;


}
#mainlevel_Nav li ul{
position:absolute;
left:-999em;
height:auto;
font-weight:400;
background:#333333;
border-left:#cfcfcf 1px solid;
border-right:#cfcfcf 1px solid;
border-bottom:#cfcfcf 1px solid;
margin-top:11px;
}

#mainlevel_Nav li ul a{
width:20em;
color:#fff;
font-size:10px;;
line-height:1em;
font-weight:400;
padding-bottom:5px;
padding-top:5px;
margin-top:0px;
}

#sublevel_Nav li{
border-right:none;
text-align:left;
}
#mainlevel_Nav li:hover ul ul,#mainlevel_Nav li:hover ul ul ul,#mainlevel_Nav li.sfhover ul ul,#mainlevel_Nav li.sfhover ul ul ul{
left:-999em;
background-color:#6c6c6c;
text-align:left;
}
#mainlevel_Nav li:hover ul,#mainlevel_Nav li li:hover ul,#mainlevel_Nav li li li:hover ul,#mainlevel_Nav li.sfhover ul,#mainlevel_Nav li li.sfhover ul,#mainlevel_Nav li li li.sfhover ul{
left:auto;
z-index:6000;
text-align:left;
}
#mainlevel_Nav li li:hover,#mainlevel_Nav li li.sfhover{
background-color:#6c6c6c;
text-align:left;
}

http://www.mpnphoto.net/directory/index.php

conetix · Post by **conetix** » Wed Jun 27, 2007 5:30 am

I need help.

iv mucked my site up .... http://www.acthosting.com.au/

can somone help me with this css please.

between each menu item i want a white line ( separator )

and on the drop out nav (rollover ACT software) it has to have a white border to hold it in as well as the white line separator.

any help is much appreciated.

Code: Select all

/* EXTENDED MENU */

#mainlevelmainnav, #mainlevelmainnav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;

	}
	
	#mainlevelmainnav li { /* all list items */
                display : block;		
                position : relative;
                float : left;
                height: 30px;
		width: 243px;                    
                border-bottom-width: 2px;
	        border-bottom-style: solid;
	        border-bottom-color: #FFFFFF;

	}
	
	#mainlevelmainnav li ul { /* second-level lists */
                display : block;
                width: 218px;		
                position : relative;
		left: -999em;
		margin-left : 11.1em;
                margin-top : -1.2em;
                padding-top: 5px;
	        padding-right: 0px;
	        padding-bottom: 0px;
	        padding-left: 48px;
	        border-bottom-width: 2px;
	        border-bottom-style: solid;
	        border-bottom-color: #FFFFFF;
	}
	
	#mainlevelmainnav li ul ul { /* third-and-above-level lists */
		position : absolute;
		left: -999em;
		margin-left : 10.5em;
                margin-top : -1.2em;
                padding-top: 5px;
	        padding-right: 0px;
	        padding-bottom: 0px;
	        padding-left: 48px;

	}
	
	#mainlevelmainnav li a {
	        padding-top: 5px;
	        padding-right: 0px;
	        padding-bottom: 0px;
	        padding-left: 48px;
                display : block;
	        color: #333333;
	        text-decoration: none;
	        font-family: Verdana, Arial, Helvetica, sans-serif;
	        font-size: 11px;
	        font-weight: bold;
		background: url(../images/nav_background.gif);
                background-repeat: repeat-y;


	}
	
	#mainlevelmainnav li a:hover {
		color : white;
		background: url(../images/nav_background_over.gif);
                background-repeat: repeat-y;
	}
	
	#mainlevelmainnav li:hover ul ul, #mainlevelmainnav li:hover ul ul ul, #mainlevelmainnav li.sfhover ul ul, #mainlevelmainnav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#mainlevelmainnav li:hover ul, #mainlevelmainnav li li:hover ul, #mainlevelmainnav li li li:hover ul, #mainlevelmainnav li.sfhover ul, #mainlevelmainnav li li.sfhover ul, #mainlevelmainnav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}

/* END EXT MENU */

cheers aron.

thoeri · Post by **thoeri** » Sat Jul 21, 2007 10:59 am

Hi

I installed the suckerfish menu on my site by inserting the javascript in my templates index.php as mentioned in the original thread. I also installed the extended menu and set it to "expand" and "treelist". I also included the css-parameters from the original thread in my css file.

So far so good. I got it working. But I have a seious layout issue in FF. No problem with IE7. See attached picture. The module does not recognize the size of the menu anymore. So the menu module height is much less than it should be. The result is than all the menulinks does not fit in the menu module. The end up below it. The height of the menu links are not the same as the height of the module.

I use JS Lightfast template from Joomlashack which creates the modules by using two pictures when using any of the three suffixes. One image for the left side of the module and one for the right side of the module. Somehow the pictures are adjusted to fit automatically with the width of the template and height of the menu. But the height adjustment does not work in FF with the suckerfish installed. Somehow the suffix are not regognizing the menus height anymore.

I use Joomla 1.0.11 and the latest version of extended menu. It is on a test site so I cannot give a link unfortunately. But please see the picture.

Does anyone have a clue how I can fix this?

PS. The upper menu module in the picture is not with suckerfish. That is using Swmenu.

Regards,
Thoeri

yogabasics · Post by **yogabasics** » Sat Jul 21, 2007 2:32 pm

Got this working in FireFox, but I can't figure out how to position the drop down submenu. I have a horizontal menu and a horizontal submenu, and want all of the submenus to line up under the first main menu item. Currently they line up under each of their respective parents. View menu at: http://www.yogabasics.com/cms/

Thanks for any help!
Timothy

thoeri · Post by **thoeri** » Sun Jul 22, 2007 6:26 pm

Hi

I still can't figure out why I cannot use modules with suffix. It looks like the modules with suffix doesn't regognize the area with suckerfish. Ex 1: In FF. Ex 2: IE 7

Any ideas on how to solve this?

Regards,
Thomas

g-c · Post by **g-c** » Wed Jul 25, 2007 11:38 am

I think this is totally outdated.... nobody needs to use this css-sheets.
There are pre-coded templates for the mod_etended-menu here:
http://de.siteof.de/extended-menu-templates.html

Regards, Christian

thoeri · Post by **thoeri** » Wed Jul 25, 2007 11:50 am

g-c wrote: I think this is totally outdated.... nobody needs to use this css-sheets.
There are pre-coded templates for the mod_etended-menu here:
http://de.siteof.de/extended-menu-templates.html

Regards, Christian

Hi

I think you are absolutely right about that. I also found this and are now trying to configure it. I had the same problem with this though, as I described in the post before you. But the develeper of Extended menu was quick to help me. I added in the menu.html and then it worked fine. But now I have an extra row of space below the last link and I am trying to get rid of it. Just do not know how.

But I still have problem in IE 6 (and always had). When loading a new page the menu links in the menu module get wrongly positioned. The get 20 px too high and 5 px too much to the left. But when hovering the links they snap back into the right position by themself. Does anybody know how to fix this issue in IE6?

Many thanks,
Thoeri

g-c · Post by **g-c** » Wed Jul 25, 2007 12:36 pm

I also have some strange issues for which im sitting here since hours to figure out.... no matter if i use the "son-of-suckerfish" or the "normal" suckerfish template for the menu.....
In FF it puts the menu-items under each other instead of next to em.... i will also contact the creator of this module and ask for help.

Regards, Christian

tjmoyer · Post by **tjmoyer** » Sat Jul 28, 2007 3:58 am

I first installed the Extended Menu, and then the Suckerfish template for the menu. Couldn't get that to work. Then I found your tutorial and tried using your code and not the template. But unfortunately, the submenu items just show up horizontally beneath the main menu items. What am I doing wrong?

The site is currently at http://www.repmarketinggroup.com/client ... /index.php.

The Extended Menu settings are:
Menu & module class suffix: mainnav
Menu name: topmenu
Source type: menu
Menu style: tree list
Expand menu: yes

What am I missing?
tj

technopuzzle · Post by **technopuzzle** » Sat Jul 28, 2007 4:09 am

Did you follow the suckerfish instructions at http://de.siteof.de/extended-menu-templates.html?

tjmoyer wrote: I first installed the Extended Menu, and then the Suckerfish template for the menu. Couldn't get that to work. Then I found your tutorial and tried using your code and not the template. But unfortunately, the submenu items just show up horizontally beneath the main menu items. What am I doing wrong?

tjmoyer · Post by **tjmoyer** » Sat Jul 28, 2007 5:21 am

Thought I'd followed the instructions, but apparently I forgot to copy the css into my template's css. So now it's working in IE, but in FF it's just one big vertical list, most of which is behind my left navigation. And the dropdown near the left navigation in IE is going behind, too.

tj

The Joomla! Forum™

MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Some assistance please

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu

Re: MiniDoc: Creating a CSS Drop-down Menu