乱雑から乱雑モックアップへ
はてなのブログの事すっかり忘れてた。
今はこっちで練習中でございます。
http://blog.sakurachiro.com/
DOCTYPEのあるフロートメニュー
<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>フロートメニュー</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <style type="text/css"> <!-- body { background: #666; } div { background:#fff; width:300px; } p{ margin-left:320px; height:1000px; border:1px solid #ff3333; } --> </style> <script language="JavaScript"><!-- offY = 10;//←メニューの上からの表示位置 posY = offY; function floatMenu(){ sy =(document.body.scrollTop || document.documentElement.scrollTop);//ドキュメント上からのスクロール位置 document.getElementById('sideMenu').style.top = posY+'px'; //サブメニューの位置 movY = sy-posY+offY; cY = movY/5; posY += cY; } /* window.onscroll = function(){ document.getElementById('sideMenu').style.top = (document.body.scrollTop || document.documentElement.scrollTop) +'px'; }*/ // --></script> </head> <body onload="setInterval('floatMenu()',20)"> <div id="sideMenu" style="position:absolute;top:10;left:10px;" name="sideMenu"> <ul> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ul> </div> <p>box</p> </body> </html>