右侧打开居中的下拉菜单

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2011-10-01   阅读次数: 137   查看权限: 游客查看

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

因接了一个项目要求做右侧打开下拉菜单的,在网上也很快找到相似案例并放到期项目里,但麻烦事来了,因右侧菜单数目有多有少,当很多时下面拉得比较长,其实长也没什么,但那些笨蛋就是不喜欢。所以我用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>

效果网页查看

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

关键词: 下拉菜单,二级下拉菜单,css菜单   编辑时间: 2011-10-02

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐