Mobile Friendly Website

CSSPLAY

Doing it with style

Revised flyout menu COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Dave:-
Great work Stu!
I have a 3 column page I am trying to impliment this on. Works great in IE, however in FF the submenu flyout is barely visible.
It won't overlap on to the column.
(29.07.2006, 16:21)

Stu:-
Dave, try playing with the z-index of the columns. Give them a position:relative; and z-index:1;
(29.07.2006, 17:51)

Dave:-
Thanks Stu!
I have tried with adding z-index 1 to the columns without success.
I also set the z-index 0 in the middle column but no luck.

Dave



- My Left Column -

.nav3 {overflow: hidden; clear: both; float: left; width: 160px; min-height: 500px; margin: 0px; padding: 0px; color: rgb(75,75,75); font-size: 1.0em;}




/* My Center Column*/
.content1 {float: left; width: 428px; margin: 0px; padding: 0px 0px 10px 20px; color: rgb(75,75,75);}
.content1-container {clear: both; float: left; width: 408px; margin: 0px 0px 15px 0px; padding: 0px;}
.content1-container-1col {overflow: hidden; width: 408px; margin: 0px; padding: 0px; z-index:0;}
(29.07.2006, 21:32)

Stu:-
Did you give them a position:relative; as well?
This is needed to make z-index work.
You could also add .menu {position:relative; z-index:100;} but this may cause problems with Opera.
(29.07.2006, 21:50)

Mill:-
Nice work Stu!
I'm trying to use this menu but would like it to be accessible to keyboard only users - I can open the submenus if I add :active to the stylesheets but can't surf into them without the mouse. Is there a solution to this?
(04.08.2006, 18:33)

Stu:-
Mill, the easiest way is to have the top level selectable to take you to the sub level menu page. This is also a good idea for visitors with browsers that do not understand the CSS.
(04.08.2006, 20:48)

Volkan:-
Why i cant add 1px border to this menus items
(07.08.2006, 16:23)

Stu:-
Volkan, I don't know why you can't add a 1px border to this menu.
(07.08.2006, 20:17)

Stu:-
Volkan, 1px border added.
(07.08.2006, 22:27)

Grinch:-
IE7 beta puts a space underneath wherever there is a flyout (Item 3 for example). I know it is beta but something to consider.

The flyouts in Opera 9.1 don' work very well. Sometimes they work and other times you move your mouse and it disappears.

But I love the simplicity and works very well in latest FF, IE6 and Netscape. IE7 and Opera are the only browsers I noticed any quirks.
(09.08.2006, 16:15)

Jeremy:-
Nice, simple menu. Is there anyway to overlay the sub-menus over the main links. For example, you have a .menu width of 150px. I would like to set the .menu ul ul to left 130px. The problem is the first level menu items below are displayed above the second level items because of the document structure. I have tried all sorts of z-index with no avail. Any ideas?
(09.08.2006, 16:53)

Stu:-
@ Grinch, Opera 9 worked fine, but there now appears to be a 'bug' in Opera 9.1. I will investigate.
@ Jeremy, this is an IE problem, I will investigate further to see if there is a workaround.
(09.08.2006, 19:09)

Stu:-
@ Grinch, Oper 9.1 now ok again.
(09.08.2006, 19:17)

Grinch:-
What did you change for Opera 9.1?
(09.08.2006, 19:48)

Stu:-
Grinch, just a very minor change to add a z-index to the table style :) not sure why this worked but it did. Opera is a very odd browser.
(09.08.2006, 20:59)

Wayne:-
This is the fastest loading flyout menu I've ever seen. Even after wrapping it within some javascript that makes it float up and down the page as the user scrolls, it still beats the rest in speed tests! CSS rocks!

Just one question:
Since the menu is only likely to be used once per page, why have you used the 'Class' implimentation instead of 'ID' in the stylesheet? Or is this simply to accommodate those who may wish to use more than one menu per page?
(12.08.2006, 22:38)

Stu:-
Wayne, the main reason for using id is if you need to refer to it with javascript etc. otherwise class will do in most cases.
(12.08.2006, 22:45)

Stephanie:-
I couldn't get mine, stephaniezylstra.com, to work in IE 6. it's great in FF 1.0 tho
(18.08.2006, 09:37)

DJ Sumanik:-
I still cant believe the stuff i see on this site, its simply amazing stu, you are a real inspiriation to me.

I have noticed another small bug, sometimes the menu can fail to initialize and requires a refresh in IE6...to repeat this error, try deleting all extraneous Code from this page so that there is only the menu div, and necessary CSS...it needs a refresh to work. It seems related to when you delete the scripts off the page. However, when i load the menu standalone into my site, it works fine..however im not running any JS, anywhere so i dont know what to say.

Regardless, and amazing piece of work Stu, and literally yet another breakthrough in the world of CSS.
(24.08.2006, 18:31)

Volkan:-
Hi Stu,

I couldnt add a border because It was a very stupid moment of mine. And I couldnt write back on this form because I was in holiday.

Currently I am experiencing a new problem. When I view the menu when it is in a htm file There is no problem. But when I view the menu in my project when it is in a aspx file, I see that it does not work on FireFox and IE7. But it works on IE6. I am trying to find out this problem. If you can check these URL's with the browsers I mention you will understand what i mean.

www.abus.terzzi.com/CSSMenu.htm
www.abus.terzzi.com/deneme.aspx

Best Wishes
(24.08.2006, 20:52)

Stu:-
Volkan, the aspx has stripped out the closing <li> tags so it is no longer valid html and Firefox/IE7 cannot see that the lists are nested.
(24.08.2006, 21:56)

Volkan:-
Hi again Stu,

I have copy pasted the codes directly from your page, make the page valid and I found out that the menu still does not work.

Than I changed the doctype to XHTML 1.0 Strict and it worked.

But my page is html 4.0 (That is definetly my last html 4.0 design).

Now can you advise me further for a menu like this whih will work on html 4.0
(25.08.2006, 18:07)

Stu:-
Volkan, it will work provided you use the valid !doctype for html4.0
Check with w3.org for the valid format.
(25.08.2006, 19:04)

Arthur:-
Hi Stu, I used this menu and I have a problem. Look at this demo page : s171662058.onlinehome.fr/test/test_menu_opacite.htm
With Firefox ok, your menu is hover the content div, but with IE6...
I try since saturday but I have no idea. I put the CSS in the style of the page.
Can you help me ?
(28.08.2006, 12:33)

Stu:-
Arthur remove position:absolute; from gauche_outer {... but you will need to reposition the right hand divs.
(28.08.2006, 13:08)

Arthur:-
done and it's ok with IE (thanks) but look with firefox, the menu is under the content div.
(28.08.2006, 13:28)

Arthur:-
Thanks for your work Stu, I finally use two css, one for the IE... and one for the other. When the site will be open, I inform you and put a link.
Thanks again.
(28.08.2006, 15:09)

Max:-
I've never seen the use of the :hover pseudo-class without something attached to it like a class/id/element. What is the significance or effect of your use of :hover, as in:
ul :hover ul ul
where :hover is on its own?
(29.08.2006, 15:23)

Stu:-
Max, this is something I have only recently discovered. :hover will be interpreted as 'whatever can be hovered' in this location.
In my case it is taken as li:hover by IE7, Firefox, Opera, Safari etc. as this is what it sees in this position. But it is taken as a:hover by IE5.5 and IE6 because these browsers do not understand li:hover. So the one style serves two different :hovers (saves having a li:hover AND a a:hover style).
(29.08.2006, 20:14)

Isa:-
Hi,
i work on asp.net and the menu dosen't work in Internet Explorer. the sub-menu dosen't appear.
(29.08.2006, 20:59)

Stu:-
Isa, make sure that you are using a standards compliant doctype.
(29.08.2006, 21:01)

Isa:-
Stu, i create a html file and included in a aspx. With firefox the menu work ok but at IE the menu dosen't work.
(29.08.2006, 21:30)

Stu:-
Isa, if your page begins <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> then it is not a standards compliant doctype and the menu will not work.
(29.08.2006, 22:00)

Isa:-
Stu, mi page begins with <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
(29.08.2006, 22:06)

Stu:-
Isa, transitional XHTML1.0 should be <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(29.08.2006, 22:32)

Volkan:-
Hi again Stu,

First of all I want to thank you for the way you help people.

I have changed my dcotype to a valid doc type and currently I have no problems with either Firefox or IE.

Everything works great I also make a comment that talks about you.
(30.08.2006, 09:01)

Stu:-
Volkan, glad it is fixed, and thanks.
(30.08.2006, 17:28)

Mircea:-
Hi Stu.
Thanks for your work. I would like to ask you for some advice: i use a css browser detection script because i cannot make it work for FF and IE6 in the same css file. So, using this script from here: rafael.adm.br/css_browser_selector and create some submenus by adding this .ie or .gecko before menu ul ul like that: .ie .menu ul ul {

The result: very good in Firefox 1.5. Opera 9.1 have this problem when subcategories dissapear on mouse over, IE6...well, this have a lot of problems: first:

1. I have to add <table><td></tr> after <div class="menu"> and </div> otherwise my menu dissapear
2. If i remove all <table><tr> etc from all menu everything it's ok in Firefox and Opera but in IE6 menu dissapear.
3. My menu it's dynamic: in FF and Opera all subcategories are shown, in IE6 for some reason are displayed first, third and fifth subcategories? :) I don't have an example to show you, i test it on localhost but if necesary i will post all code here.
(31.08.2006, 11:57)

Ju:-
Thanks Stu !
(04.09.2006, 20:02)

J-F:-
Hello Stu, I'm using ff 1.5.0.6 and the "sticky hover" doesn't work completely. As I traverse the menu level I get a trail of darker color backgrounds, but the change in text color doesn't stick. The text color reverts to the default.

In IE 6.0 I get a trail of both the hovered background and text color change wich is the effect I would like in ff as well.

Any suggestions?
many thanks,
(05.09.2006, 07:23)

Stu:-
J-F-, The trail in IE6 is produced in a different way then the trail in Firefox etc. IE6 uses a:hover whereas Firefox uses li:hover.
I will see what can be done to make both display the same way.
(05.09.2006, 19:04)

Stu:-
J-F, well that took all of two minutes :)
(05.09.2006, 19:10)

J-F:-
Awesome!
two minutes, two caracters, but how many hours to get there? ;-)

Thanks Stu
(05.09.2006, 21:32)

Stu:-
J-F, my very first drop down menu was produced over two years ago :)
(05.09.2006, 22:25)

TraderStf:-
It works on Macintosh OS X Safari and FireFox 1.507 but not on M$IE 5.2. For M$IE most often you have to specify everything, while for other browsers it works like that, M$IE seems to require more details, seems its default or heritage is not like other browsers.
(17.09.2006, 04:52)

Kevin:-
Okay, I think I'm going blind, but I can't see where your .sub class is defined in your CSS.
(02.10.2006, 13:00)

Stu:-
Kevin, if you look in the css for IE (conditional commented) you will find:
.menu ul li a:hover ul li a.sub {background:#aaa;}
(02.10.2006, 18:55)

Kevin:-
I still can't find it. I even ran a search in Notepad to no avail. The only IE conditional for CSS that I can see is for IE 7 with: .menu li {float:left}.

Well, if the .sub class is only used to change the background color, I don't really need to see it anyway. :)
(05.10.2006, 17:11)

John Henson:-
Stu, is there a way to make the content of the page float to the right of the menu and then flow underneath it, like it was an image? I could probably hack something together to get the content to float to the right but the rest.... erm, no. Cheers.
(11.10.2006, 17:11)

Julio:-
it seems, that this does not work in opera
(17.10.2006, 17:39)

Stu:-
Julio, it works in Opera 9.01
(17.10.2006, 17:48)

Stu:-
...and Opera 9.02
(17.10.2006, 17:52)

Ann:-
Stu, I am somewhat of a novice at this, and I really appreciate your efforts and sharing them.

I have a similar problem to John -- I would like this menu in a 150px column on the left, with the rest of my page content to the right of it. It sort of works in FF 1.5 (the top of the right column is a bit below the top of the menu), but in IE 6 it's below the menu altogether.
(28.10.2006, 20:06)

Stu:-
Ann, you will need to give your content area a position:relative and a low z-index. then the outer menu div a high z-index.
(28.10.2006, 20:34)

:)Ben:-
Wondering if the " w\idth:149px; " is intentional.

Seems like a typo, but it's below a comment about it being IE5.5 hack, so maybe it isn't?

Best,
:)Ben
(10.11.2006, 21:10)

Stu:-
Ben, this is a hack to target IE6 only, the previous value of width will be for IE5.x only.
(15.11.2006, 08:01)

:)Ben:-
Grinch, I too found I was getting a space below any LI that was a flyout LI.

I don't see it when I'm looking at the demo on Stu's site, so I can't help but wonder if it's operator error.

However, I noticed a kludge by accident.

Won't be surprised to find out there's some unintended consequence, but for what it's worth: Adding a character after the IE7 conditional's endif and before the IE6 conditional's opening if statement seemed to remove the extra space.

Best,

:)Ben
(20.11.2006, 00:09)

csswhore:-
My question I need to create a vertical drop down menu: I know how to create a menu. just not onw with a vertical dropdown when you hover over just the text.


My question is how do you create a roll over menu from the text only
(13.01.2007, 07:01)

CSSwhore:-
:) please eloborate on the whole ul and li and how al the dropping down and rolling over works together
(13.01.2007, 07:03)

csswhore:-
well you get back to me on that mmk .:)
(13.01.2007, 07:08)

Stu:-
csswhore, there are plenty of drop down menu examples on CSS play, just explore a little.
(13.01.2007, 09:54)

Michael:-
Hello Stu,

Regarding your revised and simplified flyout menu with THREE sub levels

I've modified it to my needs, and it works great in Mozilla Firefox 2.0.0.3 and Internet Explorer 6.

Can you tell me how to save the menu as a seperate item, and have the menu item load as part of each of the pages in my site? (The idea is later on, I'd like to be able to make changes in the menu without having to change the menu for each the web pages I've already written.) I'd like to not use frames, because I want the menu to "float" above a single background picture occupying the whole screen. My target audience is people with older computers who may not have javascripts enabled, which is what attracted me to your menu.

I know just enough about web design to sense this is a no-brainer, and I shouldn't even have a website if I can't answer it, but I beg your indulgence. Thank you.

Michael Lyon
mlyon01@comcast.net
(31.03.2007, 19:59)

David Abel:-
This menu works in Safari (information per request)
(10.04.2007, 21:07)

Peter:-
I was integrating this menu into my website. But I have some problems with menu items that are too long. Is there any way to make the width of the menu variable so that wider menu items can be displayed properly? Right now they just overflow to the next line.

Thanks
(30.07.2007, 11:38)

Peter:-
I put the CSS script code in one file and the html code for the unordered list in another file. My main file would include these two files. Now there is a problem with IE7(but not with Firefox). Right after Item3, which swings out, there is some extra space between Item3 and Item4. This is the case right after any menu item that swings out. This problem was not there if the CSS code and the unordered list are in the same file.
(31.07.2007, 09:50)

joe:-
Hi Stu,
Nice job on this menu.
Love how simple and yet effective it is.
I'm having a bit of trouble adding it to my site.
The menu works fine execpt when the sub menus show up. You can only select the part of the menu which within the div, as soon as the submenu shows up over another div you can't select it otherwise it disappears.
Link to the example www.joedastudd.co.uk/testing/index.php
Note who the submenu to Me is only selectable on the small area where is within its own div.
Can you please help me
(14.02.2008, 11:27)

Stu:-
joe, you are missiong all the conditonal comments that are required for this to work in IE6. Also you have stylesheet links within your body html.
The problem with the flyouts is due to the z-index styling of your page. I do offer help and assistance (see link at top of page).
(14.02.2008, 11:55)

joe:-
Thanks Stu,
It was the Z-index's I've managed to sort the problem out.
When I get this fully up and running on my main site I'll send you a donation.
PS. I know I forgot the IE6 and IE7 hacks, as I was just testing it with FF2.
Thanks again,
Joe
(14.02.2008, 13:03)

B-rad:-
I'm sure it's easy, but I haven't been able to make the top-level menus align horizontally (and everything else work the same)... could someone enlighten me please? Thanks in advance!!
(25.07.2008, 16:47)

B-rad:-
Oops... actually, I'd like the top-level choices (eg: items 1,2,3...) to align horizontally, with the next level (items 3a,3b,3c) dropping down directly below its "parent", and then anything beyond that to fly out to the side (items 3bi,3bii,3biii). Thanks!!
(25.07.2008, 16:54)

Stu:-
B-rad, there are dozens of examples of horizontal dropdown/flyout menus on this website.
Just continue looking through this series.
(25.07.2008, 18:18)

Suzanne:-
Hi Stu, and others! I was wondering if anyone has experienced problems with pages printing? The pages that use the navigation are printing the header on one page, the content on another, along with the nav, and then the footer. Very strange. The pages with no nav are printing normally.

Thanks! ;-)
(07.08.2008, 14:11)

Arnold:-
The menu doesn't work yet in IE8 (only in compatibility mode). Hope they make it work until the release, but I don't think so.
(17.09.2008, 10:59)

John:-
It's quite odd with IE8: The example works but my own website doesn't. Now I have to compare everything I changed.
(15.03.2009, 17:09)

Marek:-
Hi,
just want to tell you, that it doesn't work in IE 8, but I think it is still beta, so maybe it will be OK in final release.
It was funny how dumb I am, because I spend 1 week finding out why that if IE 7 does't work, and than I realized I have IE 8 :-D
(24.05.2009, 11:37)

Robo:-
First, thanks a lot for your site.

When using both this menu and the Photograph Gallery, the gallery container stays on top of the fly-out menu,that is, the fly out flies BEHIND the container. I posted on that yesterday in the forum on gallery.

I may have found a correction that seems to work at least on firefox with local server.

To the second level fly-out (but only there), I added
position: absolute;
z-index:500;

New variation
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
position: absolute;
z-index:500;

Am I inventing the wheel here and is there a more elagant solution or this would work?

Thanks, keep up the good work.
(31.03.2010, 19:41)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page