Mobile Friendly Website

CSSPLAY

Doing it with style

Flyout with 4 sub-levels 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

Merri:-
I'd really like to see someone actually having a need for a menu that deep.

And then I'd suggest how to organize all the stuff better :P
(20.03.2007, 21:45)

GaryAJ:-
Snap! I've just spent a day adding a 4th level to the 3-level tabbed menu for an internal website only to find this 4-level flyout. Wish I'd checked this site more often.

However I have 191 list items in my hierarchy (branches in the organisation) and the response time to draw the flyout boxes was just too slow to be usable in IE6 and Firefox so I've had to discard it for now. I don't know how to profile the bottlenecks in the CSS engine.

Have you discovered response time performance limits in your testing of drop-down and flyout menus? If so how do you pinpoint the resource-hogging CSS instructions?

PS Merri, any suggestions for a better way to organise 191 physical branches gratefully received.
(21.03.2007, 01:33)

Stu:-
GaryAJ, I have not had a menu with 191 list items so cannot comment on the speed problem. If you would like to email me ( stu {at} cssplay.co.uk ) the unordered list then I could take a look to see if there is a workaround.
(21.03.2007, 10:24)

Titoon:-
Hello, sorry for my bad english... Well...

Thanks for your job. That's so good
I hope to use this menu with SPIP.

Just a question :

When the text is long,
- Firefox 2.0 have problem and the text is written on and under the box
- IE 6.0 have not this problem, the box increase.

When i select the H3 for first level,
-Firefox 2.0 work good with normal text for the next levels
- IE 6.0 keep the same large font for other level.

It's my bad programming or it's normal ?
(21.03.2007, 15:15)

Merri:-
GaryAJ: there are always things you can consider. A select box would be a simple lightweight solution that skips the need for a flyout entirely, but it would still be useable. You could even retain some flyout or tab style by switching visible select box by :hovered main level element, thus lessening the scrolling length somewhat effectively.

Do you need to keep the whole organization structure visible at all times? I got the image that this list would be accessible on every page. Why there can't be a centric page or pages for the organization branches?

One way to save space in the flyout navigation is that if the layout is designed so that the current main branch that is navigated in is as a separate navigation on side of the page, thus eliminating (probably) a great deal of links in the other navigation.

There are probably other ways to go, but I'm tired now (2 AM, yay!). And I don't know all that much about the data, I haven't (yet) had a need to sort out that complex organization trees, not to mention I don't know anything about the site they're in.

Hopefully some of the above applies and is useable.
(22.03.2007, 00:33)

Tom:-
Hi,
thats really great stuff. I will play around with your code, and if i start to use it in commercial sites, i won't forget the donation to you.

Thanks
(22.03.2007, 07:13)

Brian:-
So I'm using this to create the same flyout menu above, but with an opaque background. The problem ensues when the links become longer and line wrap. ex: "Elementary School"... Is there any fix for this? It may be caused by the hack to make <IE7 be opaque. I'm not sure. If you could please take a look at it I would be forever grateful. (also, i think this may have been a similar problem to what Titoon was having)

Here is a link to what i've been developing. The link is too long so I separated it...
pcs-www01.peoriachristian.org/
peoriachristianschool.net.upgrade/
index.php?section=1

Thanks again for everything!
(13.04.2007, 23:07)

Nimro:-
Hi Stu, thx for this incredibly valuable website. I'm using this flyout menu (cut down to two levels) and am looking into adding basic tabbing accessibility for the second level. Concerning accessibility your code contains a rule for the first level (line 75/76). Any pointers as to how this could be achieved for second level (so it 'flies out' when tabbing through) ?

Thanks in advance!
(09.05.2007, 06:51)

Stu:-
Nimro, it is not possible to have tabbing on the flyouts. You should have the top level clickable to take you to a sub page with the drop down menu options. You will need javascript to have all the items selectable but then you will deny access to the 10% who have javascript off.
(09.05.2007, 19:40)

Nimro:-
Thx Stu. Perhaps something for a new css pseudo class (:tabbing) lol, you saved me some hair ;).
(10.05.2007, 02:33)

Burt:-
Stu --

I am having trouble with this in Firefox where there seems to be underlines in the names of the menu items. It is strange even if you take out all of the css formating the unformatted item names are still underlined. This is not happening in Safari. Any ideas?

thanks
b
(29.05.2007, 06:04)

Windsun:-
Just a note on the vertical flyout menus - they seem to play havoc when using DWT's for some reason.

The culprit seems to be all the IE5.5 if/endif statements.
(17.07.2007, 00:01)

pete:-
Having problems moving the menu down to fit the heading. what do i need to adjust to make this work?
(17.08.2007, 23:48)

Rod:-
Stu,
There seems to be a problem with this menu and fixed DIVs in Firefox. Take a look at www.spauldingcenter.org/test/firefoxproblem.html. There is a flicker when moving to submenus. I've seen this in Firefox 2.0.0.10 on Windows and 2.0.0.9 on Linux but NOT 2.0.0.10 on Mac. Is this a Firefox bug? Works fine in other browsers.
Thx.
(29.11.2007, 17:41)

Stu:-
Rod, try using display:none; and display:block; for the first flyout.
(29.11.2007, 18:47)

Roelof:-
Hello,

Where in de css do i have to change if i want a background-image named menu1.png on the first level. The level of Home
(02.09.2008, 13:04)

Gordon:-
I am using this with a site controlled by a CMS, so I can't control the length of menu text. I IE6, if the text is too long it wraps and expands the box, however Firefox (etc) doesn't and the text appears over the top of the next menu item down.

Is this fixable?
(18.11.2008, 12:01)

Miran:-
Nice one, but have one disadvantage, if you have more gifs on lets say first level, overlaping is bad coz it covers some of gifs, additional coloring or something is then required
(28.01.2009, 10:36)

Miran:-
I recomend adding:

.menu a, .menu a:visited {
overflow:hidden;
}

if text gets longer, that prevents ugly overlaping.
(28.01.2009, 11:24)

Miran:-
cancel that last one: it corrupts things on IE 6.
(29.01.2009, 19:06)

Ashe:-
There was a problem when resizing the page in IE7. The content would disappear. We fixed this by taking out the position relative everywhere but .menu li:hover and adding this change:
.menu li ul {
visibility:hidden;
position:relative;
top:-57px;
(09.04.2009, 16:16)

Betty:-
Stu -- you're the BEST. Wish I had found your site a few months ago. I have been unable to get any left nav bar with submenus to work in IE. You are the first person that explained the need for the compliant doc type. Plugged it in (mine was different) works beautifully.
I will be back for more of your genius work. Thanks again
(07.06.2009, 11:58)

Mark Elphinstone-Hoadley:-
This is brilliant work, I have been following all your neat tricks for the last few years.

This menu system I found works up to as many levels as you like with IE6! You just have to create the levels in the CSS file. Haven't tested that in 5.5 but to be honest that version's out the 'window' now finally.

Thanks, Stu!
(03.07.2009, 12:01)

willo:-
Where does one find transparent.gif, shade.gif, and sub.gif for this menu? It seems to run well even tho it can't find them. I'm running PHPwcms and there appears a whole directory missing!
(28.07.2010, 20: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