用jQuery实现简单的下拉菜单
效果：
代码：
<html>
<head>
<title>下拉菜单案例</title>
<meta charset="UTF-8" />
<!--声明css-->
<style type="text/css">
/* 设置li的样式 */
ul li {
/* 让li没有标记 */
list-style-type: none;
}
/* 设置菜单的位置 */
#news {
position: relative;
left: 20px;
}
#shoes {
position: relative;
left: 20px;
}
/* 设置提示框样式 */
#tips {
position: absolute;
z-index: 1;
border: 1px solid #cccccc;
background-color: #FFC;
display: none;
font-size: 14px;
}
.lightlabel {
color: red;
text-decoration: underline;
cursor: pointer;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//页面显示
$(function() {
//取第一个ul中的第一个label
$("ul:eq(0) label:eq(0)").bind("mouseover", function() {
$("#news").slideDown(1000);
$("#newsImg").attr("src", "img/open.gif");
});
$("ul:eq(0) label:eq(0)").bind("mouseout", function() {
$("#newsImg").attr("src", "img/close.gif");
});
//取第二个ul中的第一个label
$("ul:eq(1) label:eq(0)").bind("mouseover", function() {
$("#shoes").slideDown(1000);
$("#newsImg1").attr("src", "img/open.gif");
});
$("ul:eq(1) label:eq(0)").bind("mouseout", function() {
$("#newsImg1").attr("src", "img/close.gif");
});
})
//页面隐藏
$(function() {
// 点击时隐藏
$("ul:eq(0) label:eq(0)").click(function() {
$("#news").slideUp(1000);
$("#newsImg").attr("src", "img/close.gif");
});
$("ul:eq(1) label:eq(0)").click(function() {
$("#shoes").slideUp(1000);
$("#newsImg1").attr("src", "img/close.gif");
});
})
//排列
$(function() {
//实现横向排列
$("#horder").click(function() {
var li = $("ul>div>li");
//设置li标签的css样式属性中的浮动属性,值为左浮动
li.css("float", "left"); //设置
});
//实现纵向排列
$("#vorder").click(function() {
var li = $("ul li");
//清除左浮动
li.css("float", "none");
});
});
$(function() {
//鼠标移入时给出提示信息
$("ul div li label").mouseover(function(event) {
//获取label标签的文本值
var txt = $(this).text();
//获取用于信息的提示的元素对象，设置提示信息
$("#tips").html("<b>点击查看【" + txt + "】信息</b>");
//控制提示信息显示的位置 left top
$("#tips").css("left", event.pageX + 10);
$("#tips").css("top", event.pageY + 5);
//显示
$("#tips").show();
//为当前的label标签增加一个class样式
$(this).addClass("lightlabel");
});
//鼠标移出时清空提示信息
$("ul div li label").mouseout(function() {
//获取用于信息的提示的元素对象，清空提示信息
$("#tips").html("");
//设置提示信息的位置，归于原点 0 0
$("#tips").css({
left: "0",
"top": "0"
});
//将提示的元素对象div隐藏
$("#tips").hide();
$(this).removeClass("lightlabel");
});
});
</script>
</head>
<body>
<h3>jQuery-菜单案例</h3>
<p>
<input type="button" newsme="horder" id="horder" value="横向排列" />
<input type="button" newsme="vorder" id="vorder" value="纵向排列" />
</p>
<hr />
<ul>
<img src="img/close.gif" id="newsImg" /> <label for="">新闻频道</label>
<div id="news" style="display: none;">
<li><img src="img/item.gif" alt="" /><label for="">央视新闻</label></li>
<li><img src="img/item.gif" alt="" /><label for="">焦点访谈</label></li>
</div>
</ul>
<br /><br /><br /><br /><br /><br /><br /><br />
<ul>
<img src="img/close.gif" id="newsImg1" /> <label for="">鞋类频道</label>
<div id="shoes" style="display: none;">
<li><img src="img/item.gif" alt="" /><label for="">篮球鞋</label></li>
<li><img src="img/item.gif" alt="" /><label for="">跑鞋</label></li>
<li><img src="img/item.gif" alt="" /><label for="">板鞋</label></li>
<li><img src="img/item.gif" alt="" /><label for="">休闲鞋</label></li>
</div>
</ul>
<div id="tips"></div>
</body>
</html>
图片下载链接：
https://pan.baidu.com/s/146-qJwpVZpjIwMht4SAgLw
提取码：uqqx
