Floating Horizontal Menu

CBE Menu Example #10

Tested on Win98 with IE6, Moz1.1, Op6.05, and NN4.75.
    <!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>&nbsp;|&nbsp;
    <a class='m' href="http://cross-browser.com/">News</a>&nbsp;|&nbsp;
    <a class='m' href="http://cross-browser.com/">Examples</a>&nbsp;|&nbsp;
    <a class='m' href="http://www.hftonline.com/forum/forumdisplay.php?forumid=16">Forum</a>&nbsp;|&nbsp;
    <a class='m' href="javascript:cbeDebugWindow('../')">Debug</a>
    </div>
    
    </body>
    </html>