<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CBE Floating Horizontal Menu</title>
<style type='text/css'><!--
html {
margin:0;
padding:0;
}
body {
color:#000;
background:#fff;
margin:0;
padding:0;
font-family:verdana,arial,sans-serif;
font-size:12px;
}
a {
color:#008;
background:transparent;
text-decoration:underline;
}
a:hover {
color:#008;
background:#ccc;
text-decoration:none;
}
a.m {
color:#ccc;
background:transparent;
text-decoration:none;
}
a.m:hover {
color:#008;
background:#ccc;
text-decoration:none;
}
h1 {
font-size:18px;
color:#000;
background:#ccc;
margin:0; padding:6px 0 6px 2px
}
.CBE {
position:absolute; visibility:hidden;
width:100%; height:auto;
color:#cccccc; background:#0000ff;
margin:0; padding:2px;
border:1px outset;
}
.marker {
position:relative; visibility:hidden; overflow:hidden;
width:0; height:1em; left:0; top:0;
}
--></style>
<script type='text/javascript' src='../cbe_core.js'></script>
<script type='text/javascript' src='../cbe_event.js'></script>
<script type='text/javascript' src='../cbe_slide.js'></script>
<script type='text/javascript' src='../cbe_util.js'></script>
<script type='text/javascript' src='../cbe_debug.js'></script>
<script type='text/javascript'><!--
function windowOnload() {
var mm = cbeGetElementById('menuMarker').cbe;
with (cbeGetElementById('menuBar').cbe) {
moveTo(0,mm.pageY());
width(window.cbe.width());
show();
}
windowScrollListener();
window.cbe.addEventListener('scroll', windowScrollListener, false);
window.cbe.addEventListener('resize', windowResizeListener, false);
}
function windowResizeListener(e) {
cbeGetElementById('menuBar').cbe.width(window.cbe.width());
}
function windowScrollListener(e) {
var mm = cbeGetElementById('menuMarker').cbe;
var my = document.cbe.scrollTop();
if (my < mm.pageY()) my = mm.pageY();
cbeGetElementById('menuBar').cbe.slideTo(0, my, 250);
}
//--></script>
</head>
<body>
<h1>CBE Floating Horizontal Menu</h1>
<div id='menuMarker' class='marker'> </div>
<div style="margin-top:20px">
<pre>
</pre>
</div>
<div id='menuBar' class='CBE'>
<a class='m' href="http://cross-browser.com/">Home</a> |
<a class='m' href="http://cross-browser.com/">News</a> |
<a class='m' href="http://cross-browser.com/">Examples</a> |
<a class='m' href="http://www.hftonline.com/forum/forumdisplay.php?forumid=16">Forum</a> |
<a class='m' href="javascript:cbeDebugWindow('../')">Debug</a>
</div>
</body>
</html>