本篇介绍与菜单设计有关的工具条。
上篇介绍的菜单事实上已经包括了工具条，仅仅只是没有加背景看不出来。
加上背景以及加多一些实际功能后例如以下图
图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？
原文：http://www.cnblogs.com/mengfanrong/p/3746456.html
