显示效果如下:
实现代码如下:PopupMenu.htm
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 工具条上的弹出式菜单 </ title >
< style type ="text/css" > ...
a:link
{...}{
color: #000;
text-decoration: none;
font-weight: normal;
padding: 0px 0px 2px 0px;
font-size: 12px;
display: block;
}
a:visited
{...}{
color: #000;
text-decoration: none;
font-weight: normal;
padding: 2px 0px 0px 0px;
font-size: 12px;
display: block;
}
a:hover
{...}{
color: #000;
text-decoration: none;
padding: 0px 0px 2px 0px;
font-size: 12px;
display: block;
}
a:active
{...}{
color: #000;
text-decoration: none;
padding: 2px 0px 0px 0px;
font-size: 12px;
display: block;
display: block;
}
.MenuItem
{...}{
display:block;
width:60px;
height:20px;
font-size: 12px;
float:left;
text-align:center;
padding:2px 0px 0px 0px;
}
</ style >
< script type ="text/javascript" > ...
var popup = window.createPopup();
var width;
var height;
function Pop_menu(divMenuList,width,height,toolbarMenuItem)
...{
popup.document.body.innerHTML = divMenuList.innerHTML;
popup.show(0,24,width,height,toolbarMenuItem);
// 0 和 23 是相对于toolbarMenuItem元素左上角的坐标点(x,y)
// width 显示菜单的宽度
// height 显示菜单的高度
// toolbarMenuItem 要弹出菜单的对象
}
</ script >
</ head >
< body >
<!-- 菜单条 -->
< div id ="toolbar_menu" style ="width: 100%; height: 20px; background-color: #ece9d8;
border: darkgray 1px solid;" >
<!-- 菜单元素 -->
< div id ="MenuItem1" class ="MenuItem" >
< a href ="#" onfocus ="Pop_menu(filMenuList,120,125,MenuItem1)" accesskey ="F" > 文件( < u > F </ u > ) </ a ></ div >
< div id ="MenuItem2" class ="MenuItem" >
< a href ="#" onfocus ="Pop_menu(filMenuList,120,125,MenuItem2)" accesskey ="E" > 编辑( < u > E </ u > ) </ a ></ div >
< div id ="MenuItem3" class ="MenuItem" >
< a href ="#" onfocus ="Pop_menu(filMenuList,120,125,MenuItem3)" accesskey ="V" > 视图( < u > V </ u > ) </ a ></ div >
< div id ="MenuItem4" class ="MenuItem" >
< a href ="#" onfocus ="Pop_menu(filMenuList,120,125,MenuItem4)" accesskey ="S" > 网站( < u > S </ u > ) </ a ></ div >
< div style ="clear: both;" >
</ div >
</ div >
<!-- 文件菜单 -->
< div id ="filMenuList" style ="display: none;" >
<!-- 菜单列表元素 -->
< div style =" width: 120px; height:auto; background-color: #eee; border: darkgray 1px solid;" >
< div onmousemove ="this.style.color='white'; this.style.background='#4169e1';" onmouseout ="this.style.color='black';this.style.background='#eee'" >
< span onclick ="parent.location.href='http://blog.csdn.net/qghboy'" style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
</ div >
< div onmousemove ="this.style.color='white'; this.style.background='#4169e1';" onmouseout ="this.style.color='black';this.style.background='#eee'" >
< span onclick ="parent.location.href='http://blog.csdn.net/qghboy'" style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
</ div >
< div onmousemove ="this.style.color='white'; this.style.background='#4169e1';" onmouseout ="this.style.color='black';this.style.background='#eee'" >
< span onclick ="parent.location.href='http://blog.csdn.net/qghboy'" style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
</ div >
< div onmousemove ="this.style.color='white'; this.style.background='#4169e1';" onmouseout ="this.style.color='black';this.style.background='#eee'" >
< span onclick ="parent.location.href='http://blog.csdn.net/qghboy'" style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
</ div >
< div onmousemove ="this.style.color='white'; this.style.background='#4169e1';" onmouseout ="this.style.color='black';this.style.background='#eee'" >
< span onclick ="parent.location.href='http://blog.csdn.net/qghboy'" style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
</ div >
</ div >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 工具条上的弹出式菜单 </ title >
< style type ="text/css" > ...
a:link
{...}{
color: #000;
text-decoration: none;
font-weight: normal;
padding: 0px 0px 2px 0px;
font-size: 12px;
display: block;
}
a:visited
{...}{
color: #000;
text-decoration: none;
font-weight: normal;
padding: 2px 0px 0px 0px;
font-size: 12px;
display: block;
}
a:hover
{...}{
color: #000;
text-decoration: none;
padding: 0px 0px 2px 0px;
font-size: 12px;
display: block;
}
a:active
{...}{
color: #000;
text-decoration: none;
padding: 2px 0px 0px 0px;
font-size: 12px;
display: block;
display: block;
}
.MenuItem
{...}{
display:block;
width:60px;
height:20px;
font-size: 12px;
float:left;
text-align:center;
padding:2px 0px 0px 0px;
}
</ style >
< script type ="text/javascript" > ...
var popup = window.createPopup();
var width;
var height;
function Pop_menu(divMenuList,width,height,toolbarMenuItem)
...{
popup.document.body.innerHTML = divMenuList.innerHTML;
popup.show(0,24,width,height,toolbarMenuItem);
// 0 和 23 是相对于toolbarMenuItem元素左上角的坐标点(x,y)
// width 显示菜单的宽度
// height 显示菜单的高度
// toolbarMenuItem 要弹出菜单的对象
}
</ script >
</ head >
< body >
<!-- 菜单条 -->
< div id ="toolbar_menu" style ="width: 100%; height: 20px; background-color: #ece9d8;
border: darkgray 1px solid;" >
<!-- 菜单元素 -->
< div id ="MenuItem1" class ="MenuItem" >
< a href ="#" onfocus ="Pop_menu(filMenuList,120,125,MenuItem1)" accesskey ="F" > 文件( < u > F </ u > ) </ a ></ div >
< div id ="MenuItem2" class ="MenuItem" >
< a href ="#" onfocus ="Pop_menu(filMenuList,120,125,MenuItem2)" accesskey ="E" > 编辑( < u > E </ u > ) </ a ></ div >
< div id ="MenuItem3" class ="MenuItem" >
< a href ="#" onfocus ="Pop_menu(filMenuList,120,125,MenuItem3)" accesskey ="V" > 视图( < u > V </ u > ) </ a ></ div >
< div id ="MenuItem4" class ="MenuItem" >
< a href ="#" onfocus ="Pop_menu(filMenuList,120,125,MenuItem4)" accesskey ="S" > 网站( < u > S </ u > ) </ a ></ div >
< div style ="clear: both;" >
</ div >
</ div >
<!-- 文件菜单 -->
< div id ="filMenuList" style ="display: none;" >
<!-- 菜单列表元素 -->
< div style =" width: 120px; height:auto; background-color: #eee; border: darkgray 1px solid;" >
< div onmousemove ="this.style.color='white'; this.style.background='#4169e1';" onmouseout ="this.style.color='black';this.style.background='#eee'" >
< span onclick ="parent.location.href='http://blog.csdn.net/qghboy'" style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
</ div >
< div onmousemove ="this.style.color='white'; this.style.background='#4169e1';" onmouseout ="this.style.color='black';this.style.background='#eee'" >
< span onclick ="parent.location.href='http://blog.csdn.net/qghboy'" style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
</ div >
< div onmousemove ="this.style.color='white'; this.style.background='#4169e1';" onmouseout ="this.style.color='black';this.style.background='#eee'" >
< span onclick ="parent.location.href='http://blog.csdn.net/qghboy'" style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
</ div >
< div onmousemove ="this.style.color='white'; this.style.background='#4169e1';" onmouseout ="this.style.color='black';this.style.background='#eee'" >
< span onclick ="parent.location.href='http://blog.csdn.net/qghboy'" style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
</ div >
< div onmousemove ="this.style.color='white'; this.style.background='#4169e1';" onmouseout ="this.style.color='black';this.style.background='#eee'" >
< span onclick ="parent.location.href='http://blog.csdn.net/qghboy'" style ="cursor: hand; height:20px;font-size:12px; padding:5px;" > 我的CSDN博客 </ span >
</ div >
</ div >
</ div >
</ body >
</ html >
提示:最为重要的就是
<script type="text/javascript">
var popup = window.createPopup();
var width;
var height;
function Pop_menu(divMenuList,width,height,toolbarMenuItem)
{
popup.document.body.innerHTML = divMenuList.innerHTML;
popup.show(0,24,width,height,toolbarMenuItem);
// 0 和 23 是相对于toolbarMenuItem元素左上角的坐标点(x,y)
// width 显示菜单的宽度
// height 显示菜单的高度
// toolbarMenuItem 要弹出菜单的对象
}
</script>
++++++++++++++++++++++++++++++++++
还有就是:通过 window.createPopup().show () 弹出来的菜单实际上脱离了父页面,所以父页面上的样式表对 弹出来的菜单界面是不起作用的。