簡睿隨筆《科技篇》:[HTML&CSS] 鎖定左側功能選單，不隨頁面捲動

<< [Tools] 免進瀏覽器！隨時隨地使用多種搜索引擎，快速又方便的Transfz | 回blog首頁 | [Sites] GigaMedia線上英漢、漢英字典 >>

2007年04月5日

[HTML&CSS] 鎖定左側功能選單，不隨頁面捲動

為了把簡睿常用的工具網頁變更成更好閱讀的的樣式：用左右兩欄式，左側置放功能選單，右側則為主要內容。為了方便套用，特別先製作一個簡單的樣板，在此留下記錄也提供給有相同需求的讀者參考。(按圖開新窗放大)

左側與右側各置放一個<div>，其ID分別為left與right，在left上在疊放另一個<div id="menu">，主要的控制就是把left的position設定固定(fixed)，這樣就能把此區域鎖定在網頁上，不隨著右側內容的捲動而移動。IE則必須針對overflow做控制才能正確顯示。

測試網頁的執行請瀏覽這裡。
(樣板結構參考：http://www.pixelbeat.org/cmdline.html)

測試網頁源碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鎖定左側功能選單，不隨頁面捲動</title>
<script>
// 點擊功能選項時變更SPAN1顯示內容
function menu(i) {
document.getElementById('SPAN1').innerHTML = "第"+i+"選項被按";
}
</script>
<style type="text/css">
body {
margin: 0em;
padding: 0em;
}
#right {
padding: 1em;
height: 100%;
margin-left: 11em;
font-size: small;
width: auto;
text-align: justify;
}
#left {
background: #3399ff;
position: fixed;
top: 0;
left: 0;
width: 9em;
height: 100%;
color: black;
z-index: 3;
}
#menu {
background: #3399ff;
position: absolute;
top: 0;
left: 0;
width: 9em;
color: black;
z-index: 2;
height: 100%;
}
#menu a {
padding: 2px 2px 2px 4px;
background: #3366ff;
display: block;
text-decoration: none;
text-align: left;
color: #ffffc0;
margin-bottom: 1px;
}
#menu a:hover {
background: #3300ff;
color: #ff00ff;
}
</style>

</head>
<body>

<div id="right">
<span style='font-size:20px'>鎖定左側功能選單，不隨頁面捲動</span><br>
<span id="SPAN1" style="color:red;"></span>
<table border="1">
<tbody>
<script>
for (var i=1; i<=100; i++) {
document.write("<tr><td>第" + i + "列</td></tr>");
}
</script>
</tbody>
</table>
</div>
<div id="left">
<div id="menu">
<script>
for (var i=1; i<=10; i++) {
document.write("<a href='javascript:menu("+i+")'>第"+i+"選項</a>");
}
</script>
</div>
</div>
</body>
</html>

Posted by emisjerry at 樂多Roodo! │20:37 │回應(0) │引用(0) │JavaScript

樂多分類：網路/3C 共同主題：網頁設計工具：編輯本文

引用URL

http://cgi.blog.roodo.com/trackback/2960353

姓名 :
Email :
URL :
回應狀態:	公開私密
驗證碼 :	( 請依顯示文字填入 ) 重新產生驗證碼
	記住我的資訊顯示我的圖像 ( 登入或申請個人圖像 )
回應內容 :

回最上方

簡睿隨筆 《科技篇》

2007年04月5日

[HTML&CSS] 鎖定左側功能選單，不隨頁面捲動

引用URL

簡睿隨筆《科技篇》