jQuery——下拉菜单案例

用jQuery实现简单的下拉菜单
效果:
jQuery——下拉菜单案例_第1张图片
代码:

<html>
	<head>
		<title>下拉菜单案例title>
		<meta charset="UTF-8" />
		
		<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("点击查看【" + txt + "】信息");
					//控制提示信息显示的位置  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

你可能感兴趣的:(前端)