CSS Flyout menu [Archive] - Dynamic Drive Forums

Danopoly

04-19-2007, 05:19 AM

http://danspeziale.com/fox/cssmenu5.html

I'm using a menu based on CSS Play's Flyout Menu (http://www.cssplay.co.uk/menus/fly_drop.html). It's one of the few I've been able to get working in IE 6.

My question is that I'd like the submenu items to be a small inline list. Right now, the menus come out in a row.

I realize that this code wasn't offered on this site, but I thought I would ask.

I appreciate the help!

Thanks,
Dan

Zamees

04-19-2007, 05:46 AM

The code is telling all of the list items to float left. So they will all display till the max width is reached. I changed the width that was 565 to 200, and it then displayed a vertical list. But since I was local, the bg images didn't load, hope it still looks good like that.

Danopoly

04-19-2007, 05:43 PM

Thanks! That did work. Unfortunately, I think I messed up the code, since I can't get it to work in IE 6. (I only had access to IE7 when I was working on it yesterday).

I'm sure that I'll get it working. Thanks again for your help!
Dan

boogyman

04-19-2007, 06:06 PM

chances are that you will need to use a "hack" in which you use Javascript to get it to work in IE6.

IE6 doesnt have good support for css in general, and it doesnt recognize :hover

Danopoly

04-20-2007, 02:01 AM

Here is the menu that Stu Nicholls recommended for me. I have gotten it to work in IE6.
http://www.cssplay.co.uk/menus/flyout_4level.html

Does anyone recognize the code that changes the submenu? Whatever I change alters the main menu and the submenu.

Thanks for your help (again).

Dan

Danopoly

04-23-2007, 01:04 AM

I've nearly got the menu working. It works in IE6/IE7 and Firefox.

However I can't seem to separate the submenu hover background from the main menu hover background. Whatever hover background I have on the main menu is shared by the submenu.

I've attached the link below, as well as the full code after that.

http://danspeziale.com/fox/flymenu7.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_4level.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
height:150px;
font-size:90%;
margin:25px 0 50px 15px; /* this page only */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background:#1D5A7E url(images/btn-blank.gif);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background:#d4d8bd url(sub.gif) no-repeat right center;}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the submenu links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#FFFFFF;
text-indent:5px;
border:0 none #1C5C80;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; width:149px;}
/* style the link hover */
* html .menu a:hover {
color:#000000;
background:#aa7 url(images/btn-blank-s.gif);
position:relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}

.menu li:hover {position:relative;}

/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {
color:#000000;
background:#78A2BF url(images/btn-blank-s.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}

/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {
color:#000000;
background:#77A1BE url(images/btn-blank-s.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(transparent.gif);
}

/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}

/* for IE5.5 and IE6 you need to style each level hover */

/* keep the third level+ hidden when you hover on first level link */
.menu ul a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
.menu ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
.menu ul a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}

/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
/* make the third level visible when you hover over second level link */
.menu ul a:hover ul a:hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level link */
.menu ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}

.menu ul ul li {
background:#ddd;
color: #000000;
}

/* style the submenu links */
.submenu a, .submenu a:link, .submenu a:visited, .submenu a:active {
display:block;
text-decoration:none;
height:20px;
line-height:20px;
width:149px;
color:#000000;
text-indent:5px;
}
/* style the submenu links */
.submenu a:hover {
display:block;
text-decoration:none;
height:20px;
line-height:20px;
width:149px;
color:#000000;
text-indent:5px;
}

</style>

</head>

<body>

<div class="menu">
<ul>

<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us</a></li>
<li><a href="#nogo">Products</a>

<ul>
<li class="submenu"><a href="#nogo">1</a></li>
<li class="submenu"><a href="#nogo">2</a></li>
<li class="submenu"><a href="#nogo">3</a></li>
<li class="submenu"><a href="#nogo">4</a></li>
</ul>

</li>

<li><a href="#nogo">FAQs</a>

<ul>
<li class="submenu"><a href="#nogo">1</a></li>
<li class="submenu"><a href="#nogo">2</a></li>
<li class="submenu"><a href="#nogo">3</a></li>
<li class="submenu"><a href="#nogo">4</a></li>
</ul>

</li>

<li><a href="#nogo">Privacy</a>

<ul>
<li class="submenu"><a href="#nogo">1</a></li>
<li class="submenu"><a href="#nogo">2</a></li>
<li class="submenu"><a href="#nogo">3</a></li>
<li class="submenu"><a href="#nogo">4</a></li>
</ul>

</li>

<li><a href="#nogo">Contact us</a>

<ul>
<li class="submenu"><a href="#nogo">1</a></li>
<li class="submenu"><a href="#nogo">2</a></li>
<li class="submenu"><a href="#nogo">3</a></li>
<li class="submenu"><a href="#nogo">4</a></li>
</ul>

</li>
</ul>
</div>

</body>
</html>

I appreciate any help you can give me. Thanks!

psilos

04-23-2007, 08:19 AM

This is happening because submenu inherits this property from the menu..

In order not to have an image in submenu u have to override it by declaring:

.submenu a:hover {
background-image:none;
}

or if u want to have a different image:

.submenu a:hover {
background-image:url(images/OTHER.gif);
}

;)

Danopoly

04-23-2007, 04:50 PM

Well, I've tried it both ways, with background-image:none; and using a separate image and it's still using the same background image as the main menu. I appreciate the assistance.

Thanks!
Dan

boogyman

04-23-2007, 05:33 PM

.menu ul li:hover ul li:hover a{
background: #000;
}

that will change background of to black, but if you do not have somethign that is an anchor tag then use

.menu ul li:hover ul li:hover {
background: #000;
}

Danopoly

04-23-2007, 06:36 PM

That didn't work, either. I should say that it works in Firefox, but not in IE6. D'oh!

Adding this code:

.menu ul li:hover ul li:hover a{
background: #000;
}

only succeed in changing the background of the submenu in every case except hover. (That is the one that is the real stickler).

I control that using this code:

.submenu a, .submenu a:link, .submenu a:visited, .submenu a:active {
display:block;
text-decoration:none;
height:20px;
line-height:20px;
width:149px;
color:#000000;
text-indent:5px;
background-image:none;
}

/* style the submenu links */
.submenu a:hover {
display:block;
text-decoration:none;
height:20px;
line-height:20px;
width:149px;
color:#000000;
text-indent:5px;
background-image:url(/images/menu/btn-submenu-hover.gif);
}

How can I get the submenu to not inherit the menu background? I've tried substituting with an image, with "none" and with a color, but nothing has seemed to work.

Well, I know that I've got to be getting closer. I appreciate your continued support!
Dan

boogyman

04-23-2007, 06:50 PM

I put it to the blackground so that you can see the changes...you can replace the "black" hex code with anything, and if you dont want anything there then put none. and as for the image youa re trying to put there... it is non-existant at that url. so check your path. and also the sub.gif is non-existent. now as for the reason that doesnt work on hover :| umm that shouldn't be a problem.

IE6 and before does not support :hover, so you need to add the style thru the javascript, which is also the reason the menu doesnt work. A List Apart (http://alistapart.com) has a script that does this

and also I think it would be better if you gave the unordered list tag the class name, rather then each list item. that will save you on storage, but you can still have the same functionality, and will help on rendering speeds as well

Danopoly

04-23-2007, 08:16 PM

Using this code that Stu had e-mailed me, I got it to mirror the hover effect in IE6 and Firefox.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_4level.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
height:150px;
font-size:90%;
margin:25px 0 50px 15px; /* this page only */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background:#1D5A7E url(/images/menu/btn-blank.gif);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background:#d4d8bd url(sub.gif) no-repeat right center;}

/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* style the submenu links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#FFFFFF;
text-indent:5px;
border:0 none #1C5C80;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; width:149px;}
/* style the link hover */
* html .menu a:hover {
color:#000000;
background:#aa7 url(/images/menu/btn-blank-s.gif);
position:relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}

.menu li:hover {position:relative;}

/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {
color:#000000;
background:#78A2BF url(/images/menu/btn-blank-s.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}

/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {
color:#000000;
background:#77A1BE url(/images/menu/btn-blank-s.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(transparent.gif);
}

/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}

/* for IE5.5 and IE6 you need to style each level hover */

/* keep the third level+ hidden when you hover on first level link */
.menu ul a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
.menu ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
.menu ul a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}

/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
/* make the third level visible when you hover over second level link */
.menu ul a:hover ul a:hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level link */
.menu ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}

.menu ul ul li {
background:#ddd;
color: #000000;
}

/* style the submenu links */
.submenu a, .submenu a:link, .submenu a:visited, .submenu a:active {
display:block;
height:20px;
line-height:20px;
width:149px;
color:#1C5C80;
text-indent:5px;
background-image:none;
}

/* style the submenu links */
.submenu a:hover {
display:block;
text-decoration:underline;
height:20px;
line-height:20px;
width:149px;
color:#1C5C80;
text-indent:5px;
background-image:url(/images/menu/btn-submenu-hover.gif);
}

.menu ul ul li.sub {background:url(/images/menu/btn-submenu-hover.gif) no-repeat right center;}
.menu ul ul li a {color:#1C5C80;}
.menu ul ul li a:hover {background: #aaa url(/images/menu/btn-submenu-hover.gif);}
.menu ul ul li:hover > a {background:url(/images/menu/btn-submenu-hover.gif); color:#1C5C80; }
</style>

</head>

<body>

<div class="menu">
<img src="../../images/menu/arc-logo.gif" width="151" height="85" />
<ul>

<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us</a></li>
<li><a href="#nogo">Products</a>

<ul>
<li class="submenu"><a href="#nogo">1</a></li>
<li class="submenu"><a href="#nogo">2</a></li>
<li class="submenu"><a href="#nogo">3</a></li>
<li class="submenu"><a href="#nogo">4</a></li>
</ul>

</li>

<li><a href="#nogo">FAQs</a>

<ul>
<li class="submenu"><a href="#nogo">1</a></li>
<li class="submenu"><a href="#nogo">2</a></li>
<li class="submenu"><a href="#nogo">3</a></li>
<li class="submenu"><a href="#nogo">4</a></li>
</ul>

</li>

<li><a href="#nogo">Privacy</a>

<ul>
<li class="submenu"><a href="#nogo">1</a></li>
<li class="submenu"><a href="#nogo">2</a></li>
<li class="submenu"><a href="#nogo">3</a></li>
<li class="submenu"><a href="#nogo">4</a></li>
</ul>

</li>

<li><a href="#nogo">Contact us</a>

<ul>
<li class="submenu"><a href="#nogo">1</a></li>
<li class="submenu"><a href="#nogo">2</a></li>
<li class="submenu"><a href="#nogo">3</a></li>
<li class="submenu"><a href="#nogo">4</a></li>
</ul>

</li>
</ul>
</div>

</body>
</html>

The extra code uses a background image, which I hadn't added before. I was using a background color previously and it didn't match up in IE6 and Firefox.

Here is that code:

.menu ul ul li.sub {background:url(/images/menu/btn-submenu-hover.gif) no-repeat right center;}
.menu ul ul li a {color:#1C5C80;}
.menu ul ul li a:hover {background: #aaa url(/images/menu/btn-submenu-hover.gif);}
.menu ul ul li:hover > a {background:url(/images/menu/btn-submenu-hover.gif); color:#1C5C80; }

I'm not completely sure why it works with this combination and why IE is so stubborn in getting this to work, but I've met with some success.

Thanks again for the assistance (again).
Dan