基于jquery的下拉列表实现

最新推荐文章于 2024-10-02 10:11:21 发布

tomatozq

最新推荐文章于 2024-10-02 10:11:21 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/tomatozq/article/details/8215892

版权

jquery 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

下拉列表

1 篇文章 0 订阅

订阅专栏

前台开发

0 篇文章 0 订阅

订阅专栏

本文提供了一种基于jQuery的简单易懂的下拉列表实现方法。通过absolute布局，调整div的left和top属性，实现了在多种浏览器中兼容的效果。在开发过程中，因火狐浏览器中td的position: absolute无效，故改用li元素实现。

摘要由CSDN通过智能技术生成

在网上搜了一堆，不是包含的框架太多，就是太简单，所以我综合了一下，写一个目前我觉得最通俗易懂的下拉列表实现。利用absolute布局，设置div的left和top来实现下拉列表，在开发时，发现在火狐中设置td的position为absolute是无效的，所以改用li实现。

效果图：

前台代码：

<!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>js下拉菜单实现</title>
<style>
body{font-size:12px; background:#f3f4f4 url(bg.gif) repeat-x;font-family:Tahoma;}
*{margin:0px;padding:0px;}
.menu
{
	text-align:center;
    margin:auto;
	margin-top:50px;
	border-bottom:3px solid #E10001;
	width:500px;
	height:24px;
}
.menu ul{
	list-style:none;
}
.menu .top
{
	float:left;
    text-align:center;
	background-image:url('nav_bg2.gif');
    width:87px;
    position:relative;
	line-height:24px;
	height:24px;
	margin-left:2px;
}
.menu .top a
{
    color:black;
    text-decoration:none;
    font-size:18px;
}
.menu .top a:hover
{
    color:Red;
}
.menu .dropdown{
    position:relative;
}

.menu .dropdown a
{
    display:block;
}

.menu .dropdowndiv{
    display:none;
    color:black;
    position:absolute;
    left:0px;
    top:20px;
    border:1px solid #64ace9;
    background-color:White;
    text-align:left;
    z-index:999999;
}
/*
	利用h2做偏移挡住原先的一级标题
*/
.menu .dropdowndiv h2
{
    background-color:#fff; 
    border:1px solid #64ace9;
    position:absolute;
    top:-22px;
    left:-1px;
    border-bottom:0px;
    font-size:100%;
    font-weight:normal;
	text-align:center;
}
.menu .dropdowndiv h2 a
{
    color:Black;
    font-size:18px;
	width:87px;
}
.menu .dropdowndiv ul
{
  list-style-image:none;   
}
.menu .dropdowndiv li
{
    list-style:none;
   	padding-left:10px;
   	padding-top:4px;
   	margin-left:4px;
   	background-repeat:no-repeat;
   	background-position:left center;
   	height:25px;
   	line-height:25px;
   	text-align:left;
    z-index:999999;
}
.menu .dropdowndiv li a
{
    color:black;
    font-size:14px;
}
</style>
<script src="jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function () {
	$(".dropdown").mouseover(function () {
		var ddv = $(this).find(".dropdowndiv");
		$(ddv).show();
	});

	$(".dropdown").mouseout(function () {
		var ddv = $(this).find(".dropdowndiv");
		$(ddv).hide();
	});
});
</script>
</head>
<body>
	<div class="menu">
	<ul>
		<li class="top"><a href="#" target="_self">首页</a></li>
		<li class="top dropdown">
			<a href="#" target="_self">菜单1</a>
			<div class="dropdowndiv" style="width:120px;">
				<h2><a href="#" target="_self">菜单1</a></h2>
				<ul>
					<li><a href="#">菜单1-1</a></li>
					<li><a href="#">菜单1-2</a></li> 
					<li><a href="#">菜单1-3</a></li>
				</ul>
			</div>
		</li>
		<li class="top"><a href="#" target="_self">菜单2</a></td>
		<li class="top dropdown"><!--火狐不支持td的position-->
			<a href="#" target="_self">菜单3</a>
			<div class="dropdowndiv" style="width:120px;">
				<h2><a href="#" target="_self">菜单3</a></h2>
				<ul>
					<li><a href="#">菜单3-1</a></li>
					<li><a href="#">菜单3-2</a></li> 
					<li><a href="#">菜单3-3</a></li>
				</ul>
			</div>
		</li>
	</ul>
	</div>
</body>
</html>

代码下载:http://download.csdn.net/detail/tomatozq/4801118