右侧打开居中的下拉菜单

【HTML基础】

下载

新闻

文章

下拉菜单见多了，甚至是多级下拉菜单，右侧打开的菜单也不少，但居中型的却很找...

因接了一个项目要求做右侧打开下拉菜单的，在网上也很快找到相似案例并放到期项目里，但麻烦事来了，因右侧菜单数目有多有少，当很多时下面拉得比较长，其实长也没什么，但那些笨蛋就是不喜欢。所以我用CSS的margin-top负值把它拉上去。但还是有问题，当菜单只有一两个的时候只在顶部显示，特别别扭。于是想找一个右侧打开居中菜单的插件，可惜怎么找也找不到。于是决定自己研究一个出来！

总的技术要点就是利用table表格水平垂直居中（div垂直居中也应可以，以后研究）。

如右图：先画一个四行两列的表格，右边合并成一个单元格，也就是红色部分，左边做一级菜单。黄色部分是另一个只有一个单元格的表格，设置成垂直居中，并设置成溢出顶部。红色虚线是整个图片的中心线。黄色表格设置成高800px，如果你的二级菜单特别多，可设置高一点，不过相应参数也要改变。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>右侧居中菜单-太阳光设计</title>
</head>
<style type="text/css">
*{font-size:12px;}
.list_ul li a{
	color:#990033;
	font-size:14px;
	text-decoration:none
	}
.cat_td{
	border-bottom:1px dashed #F5706B;
	cursor:pointer;
	padding-left:25px;
	background:url(cat_bg.jpg) no-repeat left center;
	font-size:14px;
	font-weight:bold;
	color:#660000;
}
.list_ul{
	margin:0;padding:0;
	background:url(u_bg.gif) no-repeat left center;
	border-right:2px solid #E62D70;
}
.list_ul li{
	line-height:20px;
	text-align:left;
	height:20px;overflow:hidden;
	margin-left:23px;padding:0 0 0 5px;
	list-style-type:none;
	border-bottom:1px solid #ddd;
}
</style>
<body>
<div style="height:500px"></div>
<table width="230" height="80" border="0" cellpadding="0" cellspacing="0" style="margin-left:200px;">
  <tr> 
    <td width="80" height="20" class="cat_td" onmouseover="showtd(0)">阳光设计</td>
    <td width="150" style="height:80px;overflow:hidden" rowspan="4" align="left" valign="middle">
		<table width="100%" height="800" border="0" cellpadding="0" cellspacing="0" id="e_top" style="position:absolute;margin-top:-390px;margin-left:-10px;">
        <tr><td align="center" valign="middle">
<%
Sub list(n)
Dim i
Response.write "<ul class=""list_ul"" style=""display:none"">"&vbcrlf
For i=0 To n
	If i=0 Then
	Response.write "<li style=""border-top:2px solid #E62D70"">"
	ElseIf i=n Then
	Response.write "<li style=""border-bottom:2px solid #E62D70"">"
	Else
	Response.write "<li>"
	End If
	Response.write "<a href=""http://www.scscms.com"" target=""_blank"">太阳光设计</a></li>"&vbcrlf
Next
Response.write "</ul>"
End Sub
Call list(5)
Call list(20)
Call list(10)
Call list(30)
%>
</td></tr></table>
	</td>
  </tr><tr> 
    <td height="20" class="cat_td" onmouseover="showtd(1)">阳光设计</td>
  </tr><tr> 
    <td height="20" class="cat_td" onmouseover="showtd(2)">阳光设计</td>
  </tr><tr> 
    <td height="20" class="cat_td" onmouseover="showtd(3)">阳光设计</td>
  </tr>
</table>
<script>
var sfEls = document.getElementById("e_top").getElementsByTagName("ul");
var i_s=0;//当前显示的ID
function showtd(n){
	for(var i=0;i<sfEls.length;i++){
		if(n!=i)
			sfEls[i].style.display="none";
		else
			sfEls[n].style.display="block";
	}
	i_s=n;	
	document.getElementById("e_top").style.marginTop=(n*22-393)+"px"; //移动表格使其对齐
}
 var sfEls = document.getElementById("e_top").getElementsByTagName("ul");
 for (var i=0; i<sfEls.length; i++){
 sfEls[i].onmouseout=function() {
	for(var n=0;n<sfEls.length;n++){
		sfEls[n].style.display="none";
	}
	}
 sfEls[i].onmouseover=function() {
		sfEls[i_s].style.display="block";
	}
 }
</script>
</body>
</html>

效果网页查看

缺点：右边已经固定一级菜单个数，如果更改相应参数也需要更改。其实也有局限问题，以后有空改进。