应朋友需要,要求写一个伸缩菜单,并且要求菜单上可以选择右键菜单,分别搜了一下两者的实例,整合了一下并做适当的修改
实例来源:
伸缩菜单: http://www.jb51.net/article/44079.htm
右键菜单:http://www.cnblogs.com/snandy/archive/2011/03/09/1977789.html
该段代码只提供思路,其本身有缺陷,需要根据实际情况进行就改
右键菜单:http://www.cnblogs.com/snandy/archive/2011/03/09/1977789.html
该段代码只提供思路,其本身有缺陷,需要根据实际情况进行就改
<!DOCTYPE html>
<html>
<head>
<title>伸缩的菜单+右键菜单</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script src="http://api.51ditu.com/js/ajax.js"></script>
<style>
<!--
body{
background-color:#ffdee0;
}
.skin {
width : 100px;
border : 1px solid gray;
padding : 2px;
background-color: #FFFFFF;
visibility : hidden;
position : absolute;
}
div.menuitems {
margin : 1px 0;
}
div.menuitems a {
text-decoration : none;
}
div.menuitems:hover {
background-color : #c0c0c0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none;/* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F;/* 添加下划线 */
}
#navigation > ul > li > a{
display:block;/* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515;/* 左边的粗红边 */
border-right:1px solid #711515;/* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#990020;/* 改变背景色 */
color:#ffff00;/* 改变文字颜色 */
}
/* 子菜单的CSS样式 */
#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
#navigation ul li ul.myHide{ /* 隐藏子菜单 */
display:none;
}
#navigation ul li ul.myShow{ /* 显示子菜单 */
display:block;
}
-->
</style>
<script language="javascript">
function change(){
//通过父元素li,找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
else
oSecondDiv.className = "myHide";
}
function rightKey(obj, child) {
var mdiv = document.createElement('div');
mdiv.className = 'skin';
for(var i = 0; i < child.length; i++) {
var cdiv = document.createElement('div');
cdiv.className = 'menuitems';
var ca = document.createElement('a');
ca.href = child[i].url;
ca.text = child[i].text;
cdiv.appendChild(ca);
mdiv.appendChild(cdiv);
}
obj.appendChild(mdiv);
/*显示菜单*/
function showMenu() {
var evt = window.event || arguments[0];
/*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/
var rightedge = obj.clientWidth+evt.clientX;
var bottomedge = obj.clientHeight+evt.clientY;
/*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/
if (rightedge < mdiv.offsetWidth)
mdiv.style.left = obj.scrollLeft + evt.clientX - mdiv.offsetWidth + "px";
else
/*否则,就定位菜单的左坐标为当前鼠标位置*/
mdiv.style.left = obj.scrollLeft + evt.clientX + "px";
/*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/
if (bottomedge < mdiv.offsetHeight)
mdiv.style.top = obj.scrollTop + evt.clientY - mdiv.offsetHeight + "px";
else
/*否则,就定位菜单的上坐标为当前鼠标位置*/
mdiv.style.top = obj.scrollTop + evt.clientY + "px";
/*设置菜单可见*/
mdiv.style.visibility = "visible";
LTEvent.addListener(mdiv,"mdiv",LTEvent.cancelBubble);
}
/*隐藏菜单*/
function hideMenu() {
mdiv.style.visibility = 'hidden';
}
LTEvent.addListener(obj,"contextmenu",LTEvent.cancelBubble);
LTEvent.addListener(obj,"contextmenu",showMenu);
LTEvent.addListener(document,"click",hideMenu);
}
window.onload = function(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;//子元素
var oA;
for(var i=0;i<aLi.length;i++){
if(aLi[i].tagName == "LI") {
rightKey(aLi[i],[{text:'我真帅',url:'#'},{text:'好牛逼',url:'#'},{text:'太酷了',url:'#'}]);
}
//如果子元素为li,且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild;//找到超链接
oA.onclick = change;//动态添加点击函数
}
}
}
</script>
</head>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul class="myHide">
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul class="myHide">
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Volleyball</a></li>
</ul>
</li>
<li><a href="#">Weather</a>
<ul class="myHide">
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>