前面介绍了苹果浏览器的友好界面及良好的兼容特性。如今能够进入实战阶段了。
老师教导：程序设计时不要去又一次发明明轮。也就是鼓舞我们採取拿来主义。
像js中的很多现成的应用。我们直接拿来用即可了。但也不尽然，
如：jquery为什么不用呢？特别是苹果浏览器良好的本地系统支持，不用考虑上传、下载。
存在硬盘上使用即放心又快捷（回答：放心使用）。
那么苹果系统为什么不用falsh呢？ 如今电脑速度快感觉区别不大，在过去，个人感觉载入有falsh的应用的程序能够先抽支烟等待（回答：能够不用尽量不用）。
假设有好的工具或平台。程序设计能够即简单又轻松。实战第一篇就从菜单设计開始：
图1：
图1是苹果浏览器界面：简单的地址栏加上工具条。把大部分的空间留给用户去发挥。
不知道大家注意到了没有，工具条更像是一行文本而不是菜单。那么，我们就用一行文本来设计一组菜单：
首先在<body>開始输入<ss>菜单设计一</ss><ss>菜单设计二</ss><ss>菜单设计三</ss>
说明括号内为标记，尽量不和js的标签同名。为了方便这里用ss。也能够这样<caidan>,但要记得像标签一样用</ss></caidan>结束。
然后给标签标记显示属性（颜色、鼠标形状等）。三组菜单就完毕了，如图蓝色文本。接下来安排下拉框和菜单内容。
下面是源程序：
<html>
<head>
<meta charset="gb2312">
<style>
#ssmenu {position:fixed;top:0px;left:10px;height:20px;800px;}
.mmenu {position:fixed;top:20px;left:10px;auto ;height:auto;display:none;
border:1px solid #ccc;overflow-y:auto;background:#ffc;z-index:1;}
.mmenu li{list-style:none;display:none;cursor:pointer;}
.mmenu li:hover{background:pink;}
ss {font-size:14px;padding-left:10px;padding-right:10px;color:blue;font-size:12px;}
ss:hover{color:brown;background:#acc;padding-top:3px;padding-bottom:3px;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var mnu1=document.getElementById("menu1");
var mStr="<li>janaic.html</li><li>rebecca.html</li><li>deceptpoint.html</li>
<hr><li>abcdefghijk</li><li>abcdefghijk</li>";
mnu1.style.left="10px";
mnu1.innerHTML=mStr+"<hr>";
var mnu2=document.getElementById("menu2");
mnu2.style.left="110px";
mnu2.innerHTML=mStr+"<hr><hr>";
var mnu3=document.getElementById("menu3");
mnu3.style.left="210px";
mnu3.innerHTML=mStr+"<hr><hr><hr>";
});
$(function(){
$("#menu1").hover(
function(){
$("#menu1").show();
},
function(){
$("#menu1").hide();
});
$("#menu2").hover(
function(){
$("#menu2").show();
},
function(){
$("#menu2").hide();
});
$("#menu3").hover(
function(){
$("#menu3").show();
},
function(){
$("#menu3").hide();
});
});
$("#ssmenu ss:eq(0)").live("hover",function(){
$("#menu2").hide();
$("#menu3").hide();
$("#menu1").show();
$("#menu1 li").show();
});
$("#ssmenu ss:eq(1)").live("hover",function(){
$("#menu1").hide();
$("#menu3").hide();
$("#menu2").show();
$("#menu2 li").show();
});
$("#ssmenu ss:eq(2)").live("hover",function(){
$("#menu1").hide();
$("#menu2").hide();
$("#menu3").show();
$("#menu3 li").show();
});
$('#menu1 li').live("click",function(e) {
e.preventDefault();
var fname=$(this).text();
location.assign(fname);
$("#chaptMenu").hide();
});
</script>
</head>
<body>
<div id="menu1" class="mmenu"></div>
<div id="menu2" class="mmenu"></div>
<div id="menu3" class="mmenu"></div>
<div id=ssmenu>
<ss>菜单设计一▼</ss><ss>菜单设计二▼</ss><ss>菜单设计三▼</ss>
</div>
</body>
</html>
把程序中菜单文本换成就变成带图标的菜单了：
<ss><img src="images/menuicon.gif"> 菜单设计一</ss>
<ss><img src="images/menuicon.gif"> 菜单设计二</ss>
<ss><img src="images/menuicon.gif"> 菜单设计三</ss>
如图单击手型鼠标执行”deceptpoint.html"网页文件（在本地磁盘的小说文件）。
执行情况例如以下图：
附带说明：中英文小说共享同一阅读器。
自己主动分页、自己主动生成章节索引、模拟翻书效果。