Mobile Friendly Website

CSSPLAY

Doing it with style

Another 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

michel:-
Got you there Stu ;-)

There is a little problem with this menu (seen in firefox 1.5.0.7)

No way to get from item 3g to the next items 3gi, 3gii, etc.

Guess the placing of the items goes wrong somewhere?

Thanks for your great examples!!!

I'm amazed with what is possible without using javascript.
(22.10.2006, 23:19)

Stu:-
Ummmm try going off the end of 3g...then up to 3gi etc....
I think I got you instead :)
(22.10.2006, 23:33)

Efrat:-
line 34: the backslash inside left seems to be a typo:
* html .menu li {margin-left:-16px; margin-left:0;}
(23.10.2006, 17:54)

Stu:-
Efrat, not a typo, but a hack. There would be no point in defining the margin-left as -16px then redefining it as 0.
The * html is a hack to target IE6 and lower only.
IE5.x will see margin-left:-16px; and IE6 will see the following margin-left:0;
(23.10.2006, 18:52)

Efrat:-
Thanks, Stu.
Let's assume I was choosing item 3a, and moved to the right page. How can I make in this page the "Item 3" display in a different color? (usually I would do it with a class, but I am afraid this will block the flyout menu, as it seems to operate with the class)
(24.10.2006, 00:07)

Efrat:-
I found a solution, it works with id="".

One more question: second level are always aligned to the top of the menu. If second level for the last item is short, like 2 sub-items, they hang up, and it doesn't look nice. Do you have a better idea than filling with pseudo links?
(24.10.2006, 07:56)

Stu:-
Efrat, the whole column for each flyout is occupied by the <ul> which has a transparent background.
You could apply a background color to these which will show as a complete column on hover.
(24.10.2006, 08:07)

Efrat:-
You may cancel my last question.
<li></li> works.

Have a great day,
Efrat
(24.10.2006, 08:21)

Efrat:-
Dear Stu,

Your page works in Mozilla Firefox, while I do not succeed to get it work in my pages. Is it because I am using asp, or is there any specific hack in your code?

Thanks,

Efrat.
(24.10.2006, 15:56)

Colin:-
Stu-This comment occurs in many of the menus:
</style>
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->

If placing this into an external stylesheet does it remain intact?
(17.11.2006, 23:12)

Stu:-
Colin, no.
If you want this in an external stylesheet then load the stylesheet using a conditional comment to target IE7 only and then the stylesheet becomes:

.menu li {float:left;}

You cannot put conditional comments inside stylesheets.
(17.11.2006, 23:58)

Colin:-
Stu-thanks so much. To clarify:
.menu li {
background:#ddd;
height:26px;
}
<!--[if IE 7]>
.menu li {float:left;}
<![endif]-->
(18.11.2006, 14:48)

Colin:-
Stu-BTW. great menu(s) and opens up many posibilities. Any reason why XP Pro users (v. 6.0.29 only) experience a menu that is slightly shorter? Have entire menu float left to fit next to content:
.menu {
z-index:1000;
font-size:90%;
height:235px;
float: left;
}
(18.11.2006, 14:59)

Stu:-
Colin, no not:

.menu li {
background:#ddd;
height:26px;
}
<!--[if IE 7]>
.menu li {float:left;}
<![endif]-->

You cannot put conditional comments into a stylesheet.

But:
In the head of your page put
<!--[if lte IE 7]>
<link rel="stylesheet" media="all" type="text/css" href="ie7only.css" />
<![endif]-->

Then your ie7only.css would be

.menu li {float:left;}

Hope this is clear.
As to the XP Pro problem I have no idea why this would be different.
(18.11.2006, 15:49)

Colin:-
Thanks Stu, should have read your first reply more carefully. Great site, love the examples.
(18.11.2006, 16:02)

Dave:-
Thanks for this menu, Stu.
I have inserted it into a navigation column div, view it in Firefox 2, and there is vertical space/gaps between the individual items' boxes going top to bottom (space not visible on your demo page). And the flyouts have these spaces too, through which the text of the content column below shows through. What would you suggest I adjust? Thanks.
(22.02.2007, 12:17)

Paul:-
Hi Stu,

Using the flyout menu for my son, The text wraps round the menu. How would I be able to use a left-margin in IE and Firefox, without setting the height of the menu at 500px so that text has a left margin, no matter how much text he uses?
(See jochem-alexander.org)
(24.02.2007, 16:36)

Zandalor:-
Fine menu
(19.08.2007, 16:42)

Fred:-
This doesn't work for me. I had a look at your extremely complicated source code and spent a few hours trying to get my head around it. I came up with my own version that didn't include so many fly outs and it doesn't work properly. When I hover over the link that supposed to show the first level, it does but when you move your mouse over to it, it disappears. Also, in IE6, there is some space underneath the <li></li> for no reason. Here is a live example: www.fredvaux.com/mdc/flyoutmenu/ I was wondering if you would kindly point me in the right direction. Thanks.
(19.01.2008, 12:59)

momotaro:-
Hi Stu,

I made the sub menu (single) scolling by auto:oveflow; this works fine but tuning the hover style is giving me headaches!
1) If I make the hover background #fff or remove background then the entire sub menu dissapears. Replacing #999 like your demo works though!
How could I make the hover background colour #fff or be removed?

/* style the link hover */
* html .menu a:hover {color:#555; background:#999;}

.menu :hover > a {
color:#555;
background:#999;
}
(27.08.2008, 08:03)

Al:-
Unfortunatly, on Flyout4, I find it impossible to select 6giii, as it disappears too fast. Is there a method to put a delay on this menu, allowing the mouse to get there in time?
(14.03.2012, 16:45)

Stu:-
If you move horizontally off the right edge of item 6g then vertically to the sub menu items then you can take all the time you like as this sub menu will stay open.
(14.03.2012, 16:51)

John:-
I would like to know how to make your "Another flyout menu with THREE sub levels" menu horizontal. I have tried all the CSS I know to make it happen. Just need matching drop and flyout menus.
(16.08.2012, 17:44)



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