MiniDoc: Creating a CSS Drop-down Menu

Discuss the FAQ's here, and get in touch with the FAQ Team.
Locked
User avatar
rsphaeroides
Joomla! Ace
Joomla! Ace
Posts: 1369
Joined: Sun Aug 21, 2005 2:57 pm
Location: Colorado, USA
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

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.
¡Pura Vida!
Ray,
joomla in testing at Costa Rica Travel: http://costaricamap.net
http://costa-rica-guide.com

nyamtoko
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Mon Dec 11, 2006 7:29 am

Re: MiniDoc: Creating a CSS Drop-down Menu

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='.;D:\xamp\xampp\php\pear\') in D:\xamp\xampp\htdocs\BIODEALWE

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

Jkruiper
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Tue Jan 02, 2007 1:10 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

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  ;D

User avatar
Eddi
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 243
Joined: Sun Jun 18, 2006 10:59 pm
Location: Sunshine Coast, Australia
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

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

Re: MiniDoc: Creating a CSS Drop-down Menu

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

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Ace
Joomla! Ace
Posts: 1958
Joined: Thu Aug 18, 2005 5:53 pm
Location: Washington D.C. & Baltimore, MD Metro
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Thanks,
Roger Raymond
Techno Puzzle

User avatar
FidelGonzales
Joomla! Guru
Joomla! Guru
Posts: 584
Joined: Thu Nov 03, 2005 12:10 am
Location: Hesperia, California, USA
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

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

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

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.
http://www.MediaArmory.com - WEB | PHOTO | WRITE | MARKETING | DESIGN
http://www.DirtArmory.com - Off Road Sports Lifestyle

bobfish
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Mon Feb 13, 2006 12:11 am

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Sat Dec 02, 2006 4:44 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

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
imtibd@hotmail.com

orpheriel
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Mar 19, 2007 9:42 am

Re: MiniDoc: Creating a CSS Drop-down Menu

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.
Last edited by orpheriel on Mon Mar 19, 2007 3:56 pm, edited 1 time in total.

bohilly
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Thu Mar 29, 2007 1:25 pm

Some assistance please

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 8) (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)
Image

2)
Image

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
Last edited by bohilly on Fri Mar 30, 2007 9:21 pm, edited 1 time in total.

da8iwr
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 190
Joined: Sat Jan 14, 2006 1:59 pm
Location: Sunderland UK
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Last edited by da8iwr on Wed Apr 11, 2007 4:31 am, edited 1 time in total.

Stenger
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Thu Mar 29, 2007 7:28 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 190
Joined: Sat Jan 14, 2006 1:59 pm
Location: Sunderland UK
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Last edited by da8iwr on Sun Apr 15, 2007 8:43 pm, edited 1 time in total.

bdovenbarger
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Tue Mar 27, 2007 5:14 pm
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Thu Mar 29, 2007 7:28 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 10
Joined: Fri Mar 09, 2007 3:25 am

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 49
Joined: Sun May 20, 2007 2:33 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Thu Mar 22, 2007 1:58 am

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Jun 06, 2007 1:45 am

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 116
Joined: Sat Dec 10, 2005 11:08 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

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
You do not have the required permissions to view the files attached to this post.
Last edited by thoeri on Sat Jul 21, 2007 1:01 pm, edited 1 time in total.

yogabasics
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Sat Jul 21, 2007 2:25 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 116
Joined: Sat Dec 10, 2005 11:08 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

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

g-c
Joomla! Intern
Joomla! Intern
Posts: 87
Joined: Sun Feb 11, 2007 2:34 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 116
Joined: Sat Dec 10, 2005 11:08 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Intern
Joomla! Intern
Posts: 87
Joined: Sun Feb 11, 2007 2:34 pm

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sat Jul 28, 2007 3:34 am

Re: MiniDoc: Creating a CSS Drop-down Menu

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
Joomla! Ace
Joomla! Ace
Posts: 1958
Joined: Thu Aug 18, 2005 5:53 pm
Location: Washington D.C. & Baltimore, MD Metro
Contact:

Re: MiniDoc: Creating a CSS Drop-down Menu

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?
Thanks,
Roger Raymond
Techno Puzzle

tjmoyer
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sat Jul 28, 2007 3:34 am

Re: MiniDoc: Creating a CSS Drop-down Menu

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


Locked

Return to “FAQ Discussion Board”