Forum Moderators: not2easy
I have a client who is using a popup navigation onmouseover deal. I tried to get him away from it but he really wanted to keep it. I didn't think much of it until I put it into his new format (we took his site out of frames).
This navigation is controlled by css. Like this:
#con { position: absolute; z-index: 10; bottom: 0px; left: 5px; width: 270px; height: 42px; visibility: hidden; }
#buy { position: absolute; z-index: 11; bottom: 0px; left: 300px; width: 166px; height: 42px; visibility: hidden }
#buy2 { position: absolute; z-index: 11; bottom: 0px; left: 305px; width: 166px; height: 42px; visibility: hidden }
#mask { position: absolute; z-index: 1; bottom: 0px; left: 0px; width: 830px; height: 137px; visibility: hidden }
#inside { position: absolute; z-index: 11; bottom: 0px; left: 16px; width: 306px; height: 42px; visibility: hidden }
What happens, basically, is when a person hovers over a button the mouseover buttons appear on a z layer on top of the original button. So the main button looks like it's changing color with the z layer and then you get all the other buttons.
This worked just fine with IE. But in Netscape 7 the buttons were about a quarter of the way up the page. When I took the content out of the page this mouseover worked just fine on both browsers. But when I put the content back in the buttons again would not be at the absolute bottom of the the page. It turned out Netscape was saying that they were at the absolute bottom of screen not the page itself.
Playing around with this some more I found that the "fixed" positioning worked in Netscape. Like this:
#con { position: fixed; z-index: 10; bottom: 0px; left: 5px; width: 270px; height: 42px; visibility: hidden; }
#buy { position: fixed; z-index: 11; bottom: 0px; left: 300px; width: 166px; height: 42px; visibility: hidden }
#buy2 { position: fixed; z-index: 11; bottom: 0px; left: 305px; width: 166px; height: 42px; visibility: hidden }
#mask { position: fixed; z-index: 1; bottom: 0px; left: 0px; width: 830px; height: 137px; visibility: hidden }
#inside { position: fixed; z-index: 11; bottom: 0px; left: 16px; width: 306px; height: 42px; visibility: hidden }
But of course it didn't work in IE. So, finally I was able to do a little browser detection. I put the code that worked in IE in an external file. Then I called it with a browser detection. Then the code that worked for Netscape I kept on the page. So my completed code looked like this:
<style media="screen" type="text/css"><!--
#con { position: fixed; z-index: 10; bottom: 0px; left: 5px; width: 270px; height: 42px; visibility: hidden; }
#buy { position: fixed; z-index: 11; bottom: 0px; left: 300px; width: 166px; height: 42px; visibility: hidden }
#buy2 { position: fixed; z-index: 11; bottom: 0px; left: 305px; width: 166px; height: 42px; visibility: hidden }
#mask { position: fixed; z-index: 1; bottom: 0px; left: 0px; width: 830px; height: 137px; visibility: hidden }
#inside { position: fixed; z-index: 11; bottom: 0px; left: 16px; width: 306px; height: 42px; visibility: hidden }
--></style>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="../stylesheets/sitestyle.css" />
<![endif]-->
This seems to have everything working. I thought I might post this to help anyone else out who might have experienced similar problems. It might be fairly unique, though. But I'm also curious if there is a better way to do the same thing.
I also found this post on the topic:
[webmasterworld.com...]
All-in-all, it was a decent way of spending a day. I could have gotten more things done. But I learned a lot.
Happy coding!
Sage
Just visit AListApart and search for horizontal dropdowns.
In short:
An accessible, symantically correct, standards-compliant, very neat, clean, tightly-written, easy to understand dropdown list that works better than the Javascript ones and degrades nicely.
Once I found that article my whole approach to making menus changed. I've had more variation in the menus I've made in the past month than I did in the 3 years previous.
It also sounds like what you're looking for. There's only one small pieces of JS that is needed to force the menu to work properly in IE.
The short of it:
Create a symantically correct menu:
<ul id="nav">
<li>Item1</li>
<li>Item2</li>
.. etc.
</ul>
The CSS:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Holly Hack needed to fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul {
display: block;
}
And the Javascript to make IE behave because it doesn't understand li:hover :
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
I hate to violate APA's copyright but unfortunately the WW software now edits out all URL's. Unfortunate. I think that policy is due a bit of reconsideration.
selector {
position: absolute;
position: fixed;
}
BlueEyz, that article is awesome! I'm going to give that a try tomorrow.
I knew there must be a way to do mouseovers without all that messy JavaScript.
Can't wait to give it try!
Thanks again,
Sage
This is just super information. There really is no need to junk up your site with extra javascript anymore.
These drop downs can be down entirely in css.
Awesome!
