在Web上使用菜单可以极大地节约页面的空间，同时也比较的符合用户从Windows上继承下来的UI操作体验。在以往的Web页菜单设计中，我们 普遍使用div嵌套table的方式来实现菜单，这样的菜单有个最致命的问题就是会被<select>覆盖。我们为了解决这个问题，有时我们 干脆在显示图层菜单的同时隐藏页面上的所有下拉列表框，在菜单消失的时候，再显示他们。这个方法虽然可以解决问题，而其优化过后还可以只隐藏和下拉列表框 相交的列表框，但是这些解决方法都不是十分的完美。还有些小问题，这样的菜单定位很困难，因为在<div>显示的时候，用户可以使用鼠标滚轮 滚动页面，这样一来是否要让<div>菜单和页面滚动同步呢？如果不要，页面被滚走了，菜单仍显示在一个和自己毫不相关的位置上很是古怪。如 果要同步，那么噩梦就来了，因为被滚动的区域不一定就是<body>区域，还可能是一些类似<div style="overflow:auto"><div>的区域，要算出菜单的位置将会非常的麻烦。
下面将介绍的Popup来实现的Web页菜单将完全解决<div>做为菜单容器时遇到的问题，Popup窗口是IE5.5及以后版本提供的一个新feature。什么是popup呢？简单说popup其实就是一个弹出窗口，它拥有以下特点(MSDN描述)：
·popup窗口在用户点击它自身之外的任何地方或另一个popup打开的时候会自动关闭；
·popup在显示的时候不能获得焦点，所以用户已focused的操作将继续在其父窗口中执行；
·组成popup的DHTML可以存储在其父document或其他的document元素中；
·popup窗口中不支持文本框一类的编辑框element；
·不能选中popup窗口中的元素；
·不能在popup窗口中navigate(点击popup中的连接，不能让更新的内容显示到这个popup中)；
·popup窗口一旦显示就不能移动和resize。
这里MSDN说的不全，而且有的地方不是很准确，popup窗口还有几个重要的特性。它可以超出浏览器的窗口范围而且也不会被下拉框、flash、 IFrame等这些元素遮挡。实际上popup里的内容是可以被选择的，不知道MSDN说的不能选择是啥意思?。关于MSDN说popup不能获得焦点也 有点问题，其实是popup里的编辑框类控件不能获得焦点，而其它的非可编辑控件是可以获得焦点的。而且popup显示的时候，IE主窗口不能获得鼠标的 onmousewheel事件。
这样的一些特性，恰好表明了popup窗口非常的适合用来制作弹出菜单，并且由于popup窗口显示的时候，IE窗口内的文档是不能被移动的，这样 就不存在context menu的位置同步问题了，因为毕竟popup窗口不能move(move位置需要hide以后在新的位置上重show)，这个问题还比较讨厌。
使用popup窗口制作无限级别的菜单，有两个问题要解决：一个是要能在一个IE中显示多个Popup窗口，二是要能把窗口中的一些事件俘获并执行 我们脚本过程。MSDN在描述popup窗口特性时，第一条就说了只要有另一个popup窗口开启，先前显示的popup窗口就会自动关闭。这下怎么办 呢？不过既然都说了要实现无限级的菜单了，办法还是有的。对于popup，使用方式其实是很简单的，他一共就只包含了两个方法：hide()和show (...)，和两个属性：document和isOpen。虽然在IE中我们连续的调用n次window.createPopup().show (...)只能出来一个popup窗口被显示，可是我们可以调用popup.document.parentWindow的createPopup方法， 它产生的popup窗口在显示的时候就不会关闭前面已显示的popup窗口，并且对于新的popup用这个方法可以继续开启child popup。这个问题再研究下去，会发现IE实现popup的一些怪异的地方(当然这些对于我们实现这个菜单关系不太大，只是觉得混乱)。
比如我们在一个IE窗口中，var popup = window.createPopup(); var win = popup.document.parentWindow; 我们会发现 window != win，对于多个popup可以共存，这个不相等还能理解，但是当我们调用win.resizeTo(...)的时候，我们发现父IE窗口被resize 了。同样我们在popup中select all，结果也是父IE窗口里的内容被全选了@_@...
-----------------------------------------------------------------------
<SCRIPT LANGUAGE="JScript">
var pops = new Array(); // 用来存储Popup窗口家族的数组
function CreatePopup(degree)
{
if (degree < 0) // 层数不能小于0
return null;
if (pops[degree] != null) //如果已经存在则不需创建
return pops[degree];
if (degree == 0)
pops[0] = window.createPopup(); //创建最顶层Popup窗口
else{
if (pops[degree - 1] == null)
pops[degree - 1] = CreatePopup(degree - 1) //递归回溯从第一层开始创建
pops[degree] = pops[degree - 1].document.parentWindow.createPopup(); //从父Popup窗口创建子Popup窗口
}
pops[degree].document.body.setAttribute("degree", degree);
return pops[degree];
}
CreatePopup(1); //创建一个2层的Popup家族
//Creating the popup window object
var oPopup = pops[0];
var timer = null;
function ContextMenu(objPopupSource,objEventSource)
{
//var lefter = event.offsetY+10;
//var topper = event.offsetX+10;
var showMenuHeight=0;
oPopup.document.body.innerHTML = objPopupSource.innerHTML;
//This popup is displayed relative to the body of the document.
try {
var spanMenus = objPopupSource.all.tags("SPAN");//SPAN的个数，也就是说是菜单的个数
if(spanMenus!=null){
for(var i = 0; i < spanMenus.length; i++){
if(i == 0 || i == spanMenus.length - 1){
showMenuHeight += 1;//头和尾加上1
}
if(spanMenus[i].name=="spanHR"){
showMenuHeight += 17;//如果是横杠，加上17个像素
}else if(spanMenus[i].name=="spanMenu"){
showMenuHeight += 28;//如果是正常的菜单，加上20个像素
}
}
}
}
catch (e) {
alert(e.description);
}
oPopup.show(0, 18, 180, showMenuHeight, objEventSource);
}
function ShowSubMenu(objPopupSource,index)
{
//alert(document.getElementById(objPopupSource).all.tags("SPAN"));
//alert(window.event);
ClearTimer();
pops[1].document.body.innerHTML = document.getElementById(objPopupSource).innerHTML;
//This popup is displayed relative to the body of the document.
pops[1].show(180, 24*(index-1), 150, 65, pops[0].document.body);
}
function ClearTimer()
{
if (timer != null)
window.clearTimeout(timer)
timer = null;
}
/**
* 关闭菜单
*/
function hideSubMenu(){
if(pops[0]!=null){
pops[0].hide();
}
if(pops[1]!=null){
pops[1].hide();
}
}
function hideSubMenu1(){
if(pops[1]!=null){
pops[1].hide();
}
}
</SCRIPT>
var pops = new Array(); // 用来存储Popup窗口家族的数组
function CreatePopup(degree)
{
if (degree < 0) // 层数不能小于0
return null;
if (pops[degree] != null) //如果已经存在则不需创建
return pops[degree];
if (degree == 0)
pops[0] = window.createPopup(); //创建最顶层Popup窗口
else{
if (pops[degree - 1] == null)
pops[degree - 1] = CreatePopup(degree - 1) //递归回溯从第一层开始创建
pops[degree] = pops[degree - 1].document.parentWindow.createPopup(); //从父Popup窗口创建子Popup窗口
}
pops[degree].document.body.setAttribute("degree", degree);
return pops[degree];
}
CreatePopup(1); //创建一个2层的Popup家族
//Creating the popup window object
var oPopup = pops[0];
var timer = null;
function ContextMenu(objPopupSource,objEventSource)
{
//var lefter = event.offsetY+10;
//var topper = event.offsetX+10;
var showMenuHeight=0;
oPopup.document.body.innerHTML = objPopupSource.innerHTML;
//This popup is displayed relative to the body of the document.
try {
var spanMenus = objPopupSource.all.tags("SPAN");//SPAN的个数，也就是说是菜单的个数
if(spanMenus!=null){
for(var i = 0; i < spanMenus.length; i++){
if(i == 0 || i == spanMenus.length - 1){
showMenuHeight += 1;//头和尾加上1
}
if(spanMenus[i].name=="spanHR"){
showMenuHeight += 17;//如果是横杠，加上17个像素
}else if(spanMenus[i].name=="spanMenu"){
showMenuHeight += 28;//如果是正常的菜单，加上20个像素
}
}
}
}
catch (e) {
alert(e.description);
}
oPopup.show(0, 18, 180, showMenuHeight, objEventSource);
}
function ShowSubMenu(objPopupSource,index)
{
//alert(document.getElementById(objPopupSource).all.tags("SPAN"));
//alert(window.event);
ClearTimer();
pops[1].document.body.innerHTML = document.getElementById(objPopupSource).innerHTML;
//This popup is displayed relative to the body of the document.
pops[1].show(180, 24*(index-1), 150, 65, pops[0].document.body);
}
function ClearTimer()
{
if (timer != null)
window.clearTimeout(timer)
timer = null;
}
/**
* 关闭菜单
*/
function hideSubMenu(){
if(pops[0]!=null){
pops[0].hide();
}
if(pops[1]!=null){
pops[1].hide();
}
}
function hideSubMenu1(){
if(pops[1]!=null){
pops[1].hide();
}
}
</SCRIPT>
