PDA

Click to See Complete Forum and Search --> : Pure CSS Popup Menu...

Paul Jr
10-21-2003, 06:57 PM
Anyone know of any good tutorials on how to create a Pure CSS Popup Menu? Every one that I have found so far has not been in-depth enough for my limited comprehension.

Any help would be greatly appreciated.

Many thanks.
Jona
10-21-2003, 06:59 PM
Originally posted by nkasaire
You may want to look at Eric Meyer's pure CSS popups:
http://www.meyerweb.com/eric/css/edge/popups/demo.html

<p><a href="url">Lorem Ipsum<span> (Greek text in Latin)</span></a></p>

a span {display: none}
a:hover span {display: block; width: 80px; z-index: 5}

1. display: block is necessary because width is not defined for inline elements
2. You may need position or float to control where you want the text-popup to be displayed.

[J]ona
Paul Jr
10-21-2003, 07:32 PM
Yes...I have looked at that. But for some odd, infuriating reason, I have never been able to get that to work.

A small example could be helpful...?
Pardon if I am being a bit...uhm, needy.
Jona
10-21-2003, 07:34 PM
The link Niket posted is an example. Mouse over the menu on the left to see the effect.

[J]ona
Paul Jr
10-21-2003, 08:37 PM
Okay...this works fine in Mozilla, but not in IE.
And I'm not sure if I'm even doing this right!
I'm about ready to pull my hair out -- it's a bit late. I get edgy and snippy when it's late...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
margin:0px;
padding:10px;
}
a:link,a:visited span {
border:2px solid black;
background-color:red;
color:black;
width:100px;
height:25px;
padding:0px 15px 0px 15px;
margin:-3px;
float:middle;
}
a span {display:none;}
a:active, a:hover span {
display:block;
width:620px;
height:100px;
border:1px solid #000;
text-align:center;
vertical-align:middle;
position:absolute;
top:0pxpx;
right:0px;
margin:0px;
padding:0px;
}
#menu {
margin:0px;
padding:0px;
background:black;
width:350px;
height:26px;
}
</style>
</head>
<body>
<div id="menu">
<a href="---">Boo<span>Scared you, didn't I?</span></a>
<a href="---">Boo<span>Scared you, didn't I? didn't I?</span></a>
<a href="---">Boo<span>Scared you, didn't I? didn't I? didn't I?</span></a>
<a href="---">Boo<span>Scared you, didn't I? didn't I? didn't I? didn't
I?</span></a>
<a href="---">Boo<span>Scared you, didn't I? didn't I? didn't I? didn't
I? didn't I?</span></a>
<a href="---">Boo<span>Scared you, didn't I? didn't I? didn't I? didn't
I? didn't I? didn't I?</span></a>
</div>
</body>
</html>


This is really driving me insane.
Vladdy
10-21-2003, 09:12 PM
Due to IE inferiority it would not work there. You are wasting your time.
Jona
10-21-2003, 09:13 PM
Originally posted by Vladdy
Due to IE inferiority it would not work there. You are wasting your time.

Eric Meyer's site works in IE for me... (I didn't check to see if he was using JavaScript for IE, although I doubt it.)

[J]ona
MotherNatrsSon
10-21-2003, 09:18 PM
From Eric Meyers page:

there is no Javascript used in this document.

MNS
Vladdy
10-21-2003, 09:21 PM
Since the topic is about popup MENU I thought you referenced this page: http://www.meyerweb.com/eric/css/edge/menus/demo.html
which does not work in IE.
The page you referenced shows the CSS "Link Info" method - not really a popup menu. This does work in IE.
Jona
10-21-2003, 09:36 PM
Oh I see... Nice.

[J]ona
MotherNatrsSon
10-21-2003, 09:42 PM
Originally posted by Vladdy
Since the topic is about popup MENU I thought you referenced this page: http://www.meyerweb.com/eric/css/edge/menus/demo.html
which does not work in IE.
The page you referenced shows the CSS "Link Info" method - not really a popup menu. This does work in IE.

Most pop up MENU's require CSS 2 like the menu on my page. IE chokes on it because it does not support the necessary CSS 2 selectors for them to work without the aid of javascript to "power" the menu.

MNS
Paul Jr
10-21-2003, 09:51 PM
N-no...no...this can't be!
Blah. Phunky IE. *Boots IE into The Trash*
Oh well, thanks a lot peoples.






EDIT: Just an after though, but is there anything wrong with the code I posted up there?
MotherNatrsSon
10-21-2003, 10:04 PM
Originally posted by Paul Jr
N-no...no...this can't be!
Blah. Phunky IE. *Boots IE into The Trash*
Oh well, thanks a lot peoples.






EDIT: Just an after though, but is there anything wrong with the code I posted up there?

If it works in Netscape 7 or Mozilla, it is "good to go". IE just s*cks the bag........

You could run it through the CSS validator to be sure.

CSS Validator (http://jigsaw.w3.org/css-validator/)

You have 2 easily corrected errors:


MNS
Paul Jr
10-21-2003, 10:34 PM
Thank you all for your help. It's been a blast.
I'm a bit disappointed to learn that what I am attempting to do will not work in IE, but such is life.


But I have just one other question -- a minor one of sorts.

I have a top and bottom border on a single word of text which is inside a main <div>, where the content of the site is. In IE, the border is correct, but in Mozilla, the border stretches all the way across the main <div>, which is a bad thing.
I am using percentages to control the width of the border.
nkaisare
10-22-2003, 11:32 AM
Vladdy
IE doesn't get the pure CSS popup menu because it doesn't apply hover pseudoclass to an arbitrary element. IE, however gets pure CSS popups right.
http://www.meyerweb.com/eric/css/edge/popups/demo.html
The above works in IE.

Paul Jr
Several mistakes in your example:
a:link, a:visited span {...}
Your example will apply the styles {...} to
1. The link if the link wasnt visited
2. The span if the link was visited
This should instead be
a:link span, a:visited span {...}

There is no float: middle.
http://www.w3.org/TR/CSS2/visuren.html#propdef-float

a:link span should override the a span
http://www.w3.org/TR/CSS2/cascade.html#specificity

You should consider yourself lucky that it works in NS. Take a look at Eric's site and learn from it.
nkaisare
10-22-2003, 12:39 PM
The following may be of interest to you:
http://www.xs4all.nl/~ppk/css2tests/ie6/purecsspopups.html

- Niket
Paul Jr
10-22-2003, 02:42 PM
Alright, I have a few things to clear up.

1) I *DO* want a Pure CSS Popup *MENU*.
2) The code posted earlier was an attempt to duplicate Eric Meyer's CSS Popups.

Which is why I am now confused on how it does not work in IE. I just realized this last night.


nkaisare:

Thanks, I fixed those problems.
MotherNatrsSon
10-22-2003, 04:18 PM
Originally posted by Paul Jr
Alright, I have a few things to clear up.

1) I *DO* want a Pure CSS Popup *MENU*.
2) The code posted earlier was an attempt to duplicate Eric Meyer's CSS Popups.

Which is why I am now confused on how it does not work in IE. I just realized this last night.


nkaisare:

Thanks, I fixed those problems.

How it does not work in Ie is simple. It does not support the CSS necessary for them to work. It just can't do it because it was made without the CSS support necessary. You will need a javascript to "power" the menu if you use one.

MNS
nkaisare
10-22-2003, 04:29 PM
CSS popup menu kind of requires the hover to work with <li> or <div>. This is because you cannot nest <a>s. In IE, hover works with <a> only, not with an arbitrary element. Hence you cannot get a pure popup menu using Eric Meyer's method.

However, CSS popup text can be generated (acting like a tooltip, for example) in IE.
Popup menu:
http://www.meyerweb.com/eric/css/edge/menus/demo.html
CSS popup (you may not nest a div or a link in this popup):
http://www.meyerweb.com/eric/css/edge/popups/demo.html

The KEY CSS support missing in IE for this to work is hover-ing an arbitrary element.

Comment (personal take):
If you read the specs, you may be in for a surprise
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
CSS doesn't define which elements may be in the above states, or how the states are entered and left.
This means that :hover, :active and :focus CAN apply to non-link elements.
User agents are not required to reflow a currently displayed document due to pseudo-class transitions.
This means that there may be a perfectly standards compliant browser in which the menu wont work.
MotherNatrsSon
10-22-2003, 04:47 PM
Unfortunately you misinterpet that. The document does not have to be "re-flowed" in any way shape or form for those menu's to work.

What a lame attempt to defend a lame browser.

MNS
Paul Jr
10-22-2003, 05:00 PM
Originally posted by MotherNatrsSon
How it does not work in Ie is simple. It does not support the CSS necessary for them to work. It just can't do it because it was made without the CSS support necessary. You will need a javascript to "power" the menu if you use one.

MNS



No, no, no! I was attempting to duplicate Eric Meyer's CSS Popups that work in IE. So I am assuming I did something worng there, because what I tried does not work in IE.
nkaisare
10-22-2003, 05:01 PM
I am not defending any browser. Simply stating that
a {font-size: 100%}
a:hover {font-size: 200%}
may have unexpected result in a perfectly standards compliant browser.

So will any content "displayed" by hovering, if it is supposed to cause a page to reflow. That could happen, for example, during development stages of your popup menu.
nkaisare
10-22-2003, 05:02 PM
Originally posted by Paul Jr
No, no, no! I was attempting to duplicate Eric Meyer's CSS Popups that work in IE.
I repeat
The following may be of interest to you:
http://www.xs4all.nl/~ppk/css2tests...ecsspopups.html

- Niket
MotherNatrsSon
10-22-2003, 05:15 PM
Go here: http://www.w3schools.com/css/tryit.asp?filename=trycss_link2

Does the link that says "This link changes font size" work in IE? It does in Netscape 7...

The link that says "This link changes font family" does not work in Netscape 7 on my MAC.


MNS
Paul Jr
10-22-2003, 05:34 PM
MSN: They all work for me in IE6.




Originally posted by nkaisare
I repeat
The following may be of interest to you:
http://www.xs4all.nl/~ppk/css2tests...ecsspopups.html

- Niket

I am aware of that. But with my attempted duplication, in IE6, the CSS is not applied at all; anywhere...as far as I know, it should at least be applied to the links. Just the popup affect should not work. I've included two screenshots in a .zip file: one IE6, the other Mozilla.