MiniDoc: Creating a CSS Drop-down Menu

Alfredo Tester · **Joined:** Thu Jun 29, 2006 7:31 pm **Posts:** 85

Sorry i can't be much help. But have you tried messing with the z-indexs at all. When I've been working with the suckerfish there has been lots of references to the z-index as far as placement. Thats my only idea.

latristesse · **Joined:** Mon Dec 12, 2005 9:59 pm **Posts:** 254

Z-index does not appear to apply as far as I can tell.

Alfredo Tester · **Joined:** Thu Jun 29, 2006 7:31 pm **Posts:** 85

Wish I knew more. I took a look at my suckerfish and it does something similar to yours. Appears a bit above the line. http://www.ontariopharmacyinc.com  I don't have the border so its not as noticeable.

You might want to try posting in the template sections of the forums. I saw someone write that this area is more for a discussion of the dropdowns or something or other. Doesn't seem to be a lot of responses going on in here. Just a thought.

latristesse · **Joined:** Mon Dec 12, 2005 9:59 pm **Posts:** 254

I decided to use a suckerfish menu I had used with a non-joomla site (the css was adapted from the original list apart css). I changed some class names, and voila, I fixed the problem. For anyone interested in a super simple piece of CSS to go with extended menu, here's my css:

Code:

/*Main Navigation Container*/

#buttons {
float: left !important;
border-bottom: 1px solid #006699;
border-top: 1px solid #006699;
background: #E5E5E5;
height: 25px;
width: 750px;
margin: 5px 0px 5px 0px;
padding: 0px 0px 0px 5px;
z-index:1000;
}

/*Main Top Navigation*/

#mainlevelmainnav, #mainlevelmainnav ul {
   padding: 0;
   margin: 0;
   list-style: none;
   line-height: 1;
}

#mainlevelmainnav a {
   display: block;
   color: #016699;
   text-decoration: none;
   font-weight: bold;
   font-size: 12px;
   text-align: center;
   line-height: 25px;
}

#mainlevelmainnav li {
   float: left;
   background-image: none;
   /*border-right: #C5C5C5 1px solid;*/
}

#mainlevelmainnav li a:hover {
   color: #993300;
}

#mainlevelmainnav li ul {
   position: absolute;
   width: 10em;
   left: -999em;
   margin: 0px;
   border: 1px solid #016699;
   background-color: #E5E5E5;
}
#mainlevelmainnav li ul a {
   text-align: left;
   font-weight: normal;
   border: none;
   color: #016699;
   font-size: 11px;
   padding-left: 5px;
   padding-right: 5px;
   line-height: 20px;
   width: 100px;
}

#mainlevelmainnav li ul a:hover {
   color: #993300;
}

#mainlevelmainnav li:hover ul, #mainlevelmainnav li.sfhover ul { /* lists nested under hovered list items */
   left: auto;
   z-index:1000;
}

#mainlevelmainnav li:hover > ul {
    display: block;
}

Alfredo Tester · **Joined:** Thu Jun 29, 2006 7:31 pm **Posts:** 85

Thanks for sharing. I'm new to this and its nice to see what others have. Greatly appreciate it.

carsten888 · **Posted:** Wed Aug 16, 2006 7:06 am

same here!

here's mine for submenu's.
note: I named the ext.menumodule module-suffix "Submenu".
note: work until 4 navigation levels deep (but easy to adept that).

Code:

                     /* MENUS */
                     
div.moduleSubmenu{
padding-top: 40px;
}                     

ul#mainlevel, ul#mainlevel ul, ul#mainlevel ul ul, ul#mainlevel ul ul ul, ul#mainlevel ul ul ul ul{
margin: 0px;
padding: 0px;
}

ul#mainlevel li{
list-style-type: none;   
border-top: 1px solid #999999;
}

ul#mainlevel a{
display: block;
text-decoration: none;
padding: 3px 3px 3px 10px;
}

#mainlevel a:link, #mainlevel a:visited{
color: black;
background: #cccccc;
}
#mainlevel a:active, #mainlevel a:hover{
background: white;
color: red;
} 

/*padding-left for all subitems*/
#mainlevel ul li.sublevel a.sublevel, #mainlevel ul li.sublevel_current a#active_menu, #mainlevel ul li.sublevel_active a.sublevel{
padding-left: 20px;
}

/*padding-left for all sub-subitems*/
#mainlevel ul ul li.sublevel a.sublevel, #mainlevel ul ul li.sublevel_current a#active_menu, #mainlevel ul ul li.sublevel_active a.sublevel{
padding-left: 40px;
}

/*padding-left for all sub-sub-subitems*/
#mainlevel ul ul ul li.sublevel a.sublevel, #mainlevel ul ul ul li.sublevel_current a#active_menu, #mainlevel ul ul ul li.sublevel_active a.sublevel{
padding-left: 60px;
}

/*active*/
a#active_menu:link, a#active_menu:visited{
background: white;
font-weight: bold;
color: red;
}

konczal · **Joined:** Mon Mar 13, 2006 9:35 pm **Posts:** 60

In my Module properties, I do not get the "Menu Style" option of "Tree list." Am I missing a module, or (worse) is my Joomla! installation too old? We're running Joomla! 1.0.3 Stable.

Alfredo Tester · **Joined:** Thu Jun 29, 2006 7:31 pm **Posts:** 85

I don't know if it should be in there or not. I started with joomla 1.0.8 so unsure.

I would highly recommend upgrading to the latest version of 1.0.10 . Maybe this will fix your problem that your faciing and update some serious security stuff. This according to the frontpage of joomla.org if you scroll to the bottom.

murof2 · **Joined:** Fri Aug 18, 2006 5:05 pm **Posts:** 4

ugsmi0 wrote:

list-style-type: none; doesn't work either still shows the bullets in the link ?

Why is it that ext menu seems to be the only thing on the page that shows a list bullet next to each link ?

try several ways to turn it off with no luck, is it be default somewhere in the mod file ?

I'm using it to pull in the main menu

I'm having this exact problem right now.
Did anyone find out how to have this resolved?

latristesse · **Joined:** Mon Dec 12, 2005 9:59 pm **Posts:** 254

It's "list-style: none;" and also set the "background-image: none;" This should work.

murof2 · **Joined:** Fri Aug 18, 2006 5:05 pm **Posts:** 4

I tried that and still the bullet points appear $:-\$

Any other suggestions??

murof2 · **Joined:** Fri Aug 18, 2006 5:05 pm **Posts:** 4

Here's my CSS code :

Quote:

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

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

.moduletablemainnav{
position: absolute; /* I have absolutely positioned the module, you might have a different scheme*/
top: 187px;
left: 20px;
z-index: 100;
font: 0.9em Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}

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

#mainlevelmainnav a{
display: block;
color: #ffffff;
text-decoration: none;
margin-right: 35px;
margin-left: 10px;
padding: .6em;
list-style: none;
}

#mainlevelmainnav a:hover{
display: block;
color: #f1ffa1;
text-decoration: none;
margin-right: 35px;
margin-left: 10px;
padding: .6em;
list-style: none;
}

#mainlevelmainnav li{
float: left;
padding: 0;
list-style: none;
}

#mainlevelmainnav li ul{
position: absolute;
left: -999em;
height: auto;
width: 11em;
font-weight: 400;
background: #ff3c10;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
border: #313031 1px solid;
margin: 0;
list-style: none;
}

#mainlevelmainnav li li{
width: 11em;
list-style: none;
}

#mainlevelmainnav li ul a{
width: 11em;
color: #FFFFFF;
font-size: 1em;
line-height: 1em;
font-weight: 700;
list-style: none;
}

#mainlevelmainnav li ul a:hover{
width: 11em;
color: #000000;
font-size: 1em;
line-height: 1em;
font-weight: 700;
list-style: none;
}

#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;
}

#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
background-image: none;
background: #ff0000 98% 50% no-repeat;
}

latristesse · **Joined:** Mon Dec 12, 2005 9:59 pm **Posts:** 254

You need to use background-image in li like so:

Code:

#mainlevelmainnav li {
   float: left;
   background-image: none;
}

murof2 · **Joined:** Fri Aug 18, 2006 5:05 pm **Posts:** 4

latristesse wrote:

Code:

List-style none goes in #mainlevelmainnav ul, and then try this for li styling:
#mainlevelmainnav li {
   float: left;
   background-image: none;
}

Ah that did the trick.
Many thanks latristesse

lilqhgal · **Posted:** Thu Aug 24, 2006 7:25 pm

I too am getting a javascript error in IE. it says 'document.getEleentById(...)' is null or ot an oject ... any ideas on how to fix this problem? Works fine in FF.

carsten888 · **Posted:** Fri Aug 25, 2006 6:26 am

maybe becasue of the typo? :D

Quote:

it says 'document.getEleentById(...)' is null or ot an oject

getEleentById > getElementById()

lilqhgal · **Posted:** Fri Aug 25, 2006 12:44 pm

Oops that was my typo on the forum, but it's not actually that way in the script code. (This keyboard is horrible that I type on, it misses letters so many times, even if I hit them really hard. anyway) .. here's the actual code i have:

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
   var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

latristesse · **Joined:** Mon Dec 12, 2005 9:59 pm **Posts:** 254

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

Kid A · **Joined:** Fri Dec 02, 2005 10:23 pm **Posts:** 4

Hey everyone,

Great menu, by the way - tho i am having some problems!

I got everything installed and working, but for some reason, when i hover over a sub-menu item, the new color as a result of the hover, appears over the original, and is shifted right, about 10px. It looks really sloppy.

I'm using a firefox browser. and i changed nothing in the css code provided in the tutorial except:

- i'm using a suffix '-mainnav'
- i removed the soccer gif reference.

Code:

/* EXTENDED MENU */
#twocols{ /*the columns that gets dropped down over yours might be different*/
z-index:20;
}
#leftcol{ /*the columns that gets dropped down over yours might be different*/
z-index:10;
}
#mainleveltopnav li{
display:inline;
list-style-type:none;
padding-right:5px;
}
a.mainleveltopnav,a.mainleveltopnav:link,
a.mainleveltopnav:visited{
color:#fff;
}
.moduletable-mainnav{ /* I have absolutely positioned the module, you might have a different scheme*/
position:absolute;
top:187px;
left:20px;
z-index:100;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#mainlevel-mainnav,#mainlevel-mainnav ul{
float:left;
list-style:none;
line-height:1em;
background:transparent;
font-weight:700;
margin:0;
padding:0;
}
#mainlevel-mainnav a{
display:block;
color:#fff;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}
#mainlevel-mainnav li{
float:left;
padding:0;
}
#mainlevel-mainnav li ul{
position:absolute;
left:-999em;
height:auto;
width:11em;
font-weight:400;
background:#36f;
border:#00C 1px solid;
margin:0;
}
#mainlevel-mainnav li li{
width:11em;
}
#mainlevel-mainnav li ul a{
width:11em;
color:#fff;
font-size:0.9em;
line-height:1em;
font-weight:400;
}
#mainlevel-mainnav li:hover ul ul,#mainlevel-mainnav li:hover ul ul ul,#mainlevel-mainnav li.sfhover ul ul,#mainlevel-mainnav li.sfhover ul ul ul{
left:-999em;
}
#mainlevel-mainnav li:hover ul,#mainlevel-mainnav li li:hover ul,#mainlevel-mainnav li li li:hover ul,#mainlevel-mainnav li.sfhover ul,#mainlevel-mainnav li li.sfhover ul,#mainlevel-mainnav li li li.sfhover ul{
left:auto;
z-index:6000;
}
#mainlevel-mainnav li li:hover,#mainlevel-mainnav li li.sfhover{
background:#069;
}

/* END EXT MENU */

Any help would be great.. it's for a good cause!!

janetgot · **Joined:** Thu Sep 22, 2005 10:24 pm **Posts:** 13

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

latristesse · **Joined:** Mon Dec 12, 2005 9:59 pm **Posts:** 254

My suckerfish menus are still working beautifully except over forms. For some reason, the drop-down menu drops behind the fields of the form - very ugly! This only happens with a form, so I'm not sure what's going on here.

janetgot · **Joined:** Thu Sep 22, 2005 10:24 pm **Posts:** 13

Have you tried using a z-index in your style sheets to force the menus to the top?

latristesse · **Joined:** Mon Dec 12, 2005 9:59 pm **Posts:** 254

I put the z-index into the container of the navigation but I didn't think that was causing the problem since it was only appearing on forms. However, I decided to give it a shot anyway and found that when I changed the li:hover ul to have a z-index of 1000, the problem resolved. Thanks.

planethurf · **Joined:** Tue Oct 17, 2006 10:43 am **Posts:** 4

Hi, I am using the rockettheme - jw_inetgazette template with expose4 and I find that my suckerfish dropdown menu drops behind the expose4 flash element - I feel I need to change or add a Z index somewhere and have tried a few places in the CSS and as yet have had no success - any ideas where I bring the mainmenu (horizintal) to the front so it sits on top of the expose4 flash element?

Thaks in advance!

Baz

Waseem Sadiq · **Posted:** Tue Oct 31, 2006 4:19 am

Do you have wmode=transparent enabled on your expose4 flash movie?

planethurf · **Joined:** Tue Oct 17, 2006 10:43 am **Posts:** 4

haaris wrote:

Do you have wmode=transparent enabled on your expose4 flash movie?

Thanks for the reply.

I have checked in manager.html and wmode is transparent.

further examination of the problem makes me believe that the menu is dropping behind the iframe..

I have attached a screenshot.

i was hoping I would find a way of changing the z-index of the menu so it sat over the iframe but no such luck as yet

Again - thanks for your help, it's really appreciated!

rsphaeroides · **Posted:** Mon Nov 20, 2006 8:47 pm

I've got the standard minidoc version installed and working beautifully (although IE7 seems to ignore the on mouseout and leaves the menu pulled down until you mouse over another menu item) so of course I started trying to break it.

Been trying to adjust this so that instead of stacking vertically the dropdowns fill the row below horizontally

eg. when you mouse over topitem2 you get

topitem1 topitem2 topitem3
2subitem1 2subitem2 2subitem3 2subitem4

and when you mouse over topitem3 you get

topitem1 topitem2 topitem3
3subitem1 3subitem2 3subitem3

Any suggestions (obviously the ideal would be "grab the style from htpp.... but I'm willing to work at it if someone can get me started.)

thanks

rsphaeroides · **Posted:** Tue Nov 21, 2006 7:48 pm

I figured out what's causing the problem with IE7. There is something in the overlibmini.js that is interfering with the sfHover script required for the IE fix.

Anyone run across this or a solution?

Misatran · **Joined:** Fri Dec 01, 2006 3:44 pm **Posts:** 13

Hi, I've done as you said in your post here: http://forum.joomla.org/index.php/topic,22023.0.html. And a problem occurs:
First when I install extended menu and publish it, everything is ok, I still can't get drop down menu (of course).
When I put your CSS and javascript code in my files, the extended menu fly out of the content, becoming horizontal. And I doesn't uses the style of my template.
The menu is in a vertical order, so I want to have the submenu drop out to the right or left of it. How can I modify the code?
Please help. Thanks.
My site is here: http://www.kitovua.tuhu.net

nyamtoko · **Joined:** Mon Dec 11, 2006 7:29 am **Posts:** 3

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

Joomla! Discussion Forums

MiniDoc: Creating a CSS Drop-down Menu

Quick reply

Who is online