<!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>