Mobile Friendly Website

CSSPLAY

Doing it with style

Flyout menu with overlap 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

Danny Goovaerts:-
I've tried to use this to create a flyout menu with only two levels. I straightforwardly copied the style definition in my XHTML source.
In IE7 (7.0.5730.11), the <a> elements that directly follow a submenu have a larger height (about 4px). This makes the flyout menu not line up anymore correctly. In Firefox 2.0.0.1 it works alright.
What's wrong?
You can verify my test at
www.kine-co.be/test1.htm

Thanks very much,

Danny

P.S. Your site is great!
(26.12.2006, 19:20)

Stu:-
Danny, are you using dreamweaver or similar? only all the conditional comments have been stripped out of the html. These are needed for it to work correctly in IE5.5 and IE6.
You are also using the <?xml.... declaration as the first line which switches IE into quirks mode and the faulty box model. This is why the non-flyout menus are larger.
(26.12.2006, 21:10)

Danny Goovaerts:-
Stu, thanks for your (extremely) quick reply. I had not the conditional style
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->
which causes the problem. After adding this, it also works even with the xml declaration. Thanks!

I'm currently "handcrafting" the HTML. I will generate it later using XSLT. That's why the conditional code is not there (to save me typing while experimenting). I will add it to the generation process later. I'm of course willing to share the XSLT when it's ready. Feel free to mail me at danny_goovaerts@telenet.be.
(27.12.2006, 15:36)

momotaro:-
Can this be reworked to have sub links open over a photo?
(16.01.2007, 08:34)

csimszon:-
if i set a link tu menu and it have submenu, then ie6 work strange :s
(12.02.2007, 17:33)

Ian Young:-
Flyout5.
If the sub menu only has a few items it doesn't reach its parent and it is not possible to catch with mouse. see menu item 3g
(12.03.2007, 23:35)

Stu:-
Ian, if you are referring to the previous menu where the flyouts are horizontally aligned to the top then you can move off level 3g (right) and then move up to the sub level. The menu will not collapse whilst you do this.
(13.03.2007, 09:14)

Jon:-
is it just me or does assigning the text hover state of the first level to bold make the flyout mess up if you do not rollover / out slowly... I.e.

.menu :hover > a {
color:#fff;
background:#999;
font-weight:bold;
}
(16.03.2007, 19:05)

Jon:-
I should have noted IE7 ^
(16.03.2007, 19:06)

Jo:-
Hi Stu
I'm having a problem in ie7
With the first flyout on 2 of the 3 options I get the vertical background border showing through. The testing site is sierratrekking.approachdesigns.co.uk.
I've been through the code with no success. Any ideas?
Jo
(15.07.2009, 00:40)

10 of 17 comments (part 1). [ » ] [ * ]



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