本篇介紹與選單設計有關的工具條。
上篇介紹的選單事實上已經包括了工具條，僅僅只是沒有加背景看不出來。
加上背景以及加多一些實際功能後例如以下圖
圖1：淺灰色的就是工具條，蘋果瀏覽器在全屏的時候，位址列和工具條是隱藏的，滑鼠到螢幕頂邊才顯示。自己設計的工具條也應該不須要時隱藏起來。
滑鼠移到工具條在藍色“大字型”上點一下，改變字型，選單上藍色“大字型” 自己主動變成“小字型，正文立馬也變成小字型。如圖2
圖2：工具條不見了，字型變小了。因為正文（小說）是分頁顯示，所以滾動欄也不用了（保持螢幕整潔）。
圖3：瀏覽器右上角點一下變換大小，小螢幕顯示。點一下”參考譯文“載入譯文檔案，正文中任一段落的參考譯文跳出的小窗體顯示。
工具條和選單實現步驟例如以下：
首先在上篇<style></style>之間加一些內容：
.playmd{ font-size:14px;height:25px;width:1024px;position:fixed; left:0px; top:0px;background:#ddd;z-index:1;}
然後在<body>後加上：
<div class="playmd" id="playmd">
<ss><img src="images/menuicon.gif">檔案 ▼</ss><ss>章節 ▼</ss><ss>參考譯文</ss>
<input id="bt1" type="button" value="重新整理" />
<ss>中字型</ss><select id="fnt" size=1 onChange="getStyle()" >
</div>
選單和工具條大致就如圖顯示的那個樣子。
功能實現過程：
$("ss:eq(1)").live("click",function(){ //ss:eq(1) 表示ss選單（藍色字型）從左到右0開始數。如eq（1）是”章節“選單名。
checkPage();
$("#chaptMenu").show();
$("#chaptMenu li").show();
});
$("ss:eq(2)").live("click",function(){
ileft.location=chineseF;
});
$("ss:eq(3)").live("click",function(){
if ($("ss:eq(3)").text()=="中字型"){
getElement("div1").style.fontSize="19px";
getElement("div2").style.fontSize="19px";
$("ss:eq(3)").text("大字型");
}
else if ($("ss:eq(3)").text()=="大字型"){
getElement("div1").style.fontSize="14px";
getElement("div2").style.fontSize="14px";
$("ss:eq(3)").text("小字型");
}
else if ($("ss:eq(3)").text()=="小字型"){
getElement("div1").style.fontSize="17px";
getElement("div2").style.fontSize="17px";
$("ss:eq(3)").text("中字型");
}
});
工具欄隱藏實現：
$("body").mousemove(function(e){ //大概意思是：假設滑鼠小於多少（快到工具條位置）時就顯示。
var positionY=e.pageY,positionX=e.pageX;
if (positionY <50) {
$(".playmd").show();
}
else {
$(".playmd").hide();
}
});
大小窗體變換實現過程：
$(window).resize(function(){
initialize(); //依據變化的資料初始化函式（須要編寫，也就是幾行程式碼）
showPage(); //顯示正文的函式；
});
是不是非常easy？