js控制的多级下拉菜单

最近身体不适,所以没能如期的更新,抱歉。这里直接把代码贴上,如果有不明白的地方,留言就行。

<!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>下拉菜单</title>
		<meta http-equiv="content-Type" content="text/html;charset=utf-8">
		<style type="text/css">
			.navi ul {
				padding: 0;
				list-style-type: none;
			}
			.navi ul li {
				text-align: center;
				float: left;
				position: relative;
				width: 200px;
				background-color: #0F8CFF;
			}
			a {
				color: #086808;
				text-decoration: none;
			}
			.navi ul li a {
				display: block;
				border: 1px solid #fff;
			}
			.navi ul li ul {
				display: none;
				left: 0;
			}
			.navi ul li ul li ul{
				position: absolute;
				left:200px;
				top: 0;
			}
			.navi ul li:hover ul a {
				color: yellow;
			}
		</style>

		<script type="text/javascript">
			function showNextMenu(obj){
				var nextMenu = obj.getElementsByTagName("ul")[0];
				nextMenu.style.display = "block";
			}
			function hideNextMenu(obj){
				var nextMenu = obj.getElementsByTagName("ul")[0];
				nextMenu.style.display = "none";
			}
		</script>
	</head>

	<body>

		<div class="navi">
			<ul >
				<li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
					<a href="javascript:;" >游戏</a>
					<ul>
						<li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
							<a href="javascript:;" >传奇</a>

							<ul>
								<li>
									<a href="javascript:;" >1</a>
								</li>
								<li>
									<a href="javascript:;" >2</a>
								</li>
								<li>
									<a href="javascript:;" >3</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
					</ul>
				</li>
				<li class="li_1">
					<a href="javascript:;" >游戏</a>
					<ul>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
					</ul>
				</li>
				<li class="li_1">
					<a href="javascript:;" >游戏</a>
					<ul>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
					</ul>
				</li>
				<li class="li_1">
					<a href="javascript:;" >游戏</a>
					<ul>
						<li>
							<a href="javascript:;" >传奇</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

	</body>

</html>

效果图如下: 

 

时间: 07-04

js控制的多级下拉菜单的相关文章

jQuery制作水平多级下拉菜单

本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <ul class="nav-list"> <li><a href="#">主页</a></li> <li><a href="#">产品</a></li>

Bootstrap 3 &amp; 4 的多级下拉菜单示例

Bootstrap 虽好,但对于复杂的界面,还是有N多组件需要自己扩展,并且要往简洁.大气的Bootstrap界面上靠,着实要费一些功夫.下面分享一个Bootstrap 3的多级下拉菜单,无需第三方Js脚本,复制后直接可用. Bootstrap 3 的多级下拉菜单示例 <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title&

DroDownList控件多级下拉菜单

后台代码: /// <summary> /// 绑定下拉菜单 /// </summary> private void BindDropList() { DataTable dt = bacManage.GetAllArticleCategory(); CreateLevelDropDown(drpCategoryId, dt); } /// <summary> /// 创建分级下拉框 /// </summary> /// <param name=&qu

基于jQuery带图标的多级下拉菜单

之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发者来说非常实用.菜单时基于jQuery的,所以基本可以支持所有的浏览器. 在线预览   源码下载 实现的代码. html代码: <div class="content"> <ul class="vertical-nav dark red"> &l

原生js应用setTimeout实现下拉菜单

今天实现一个很简单的下拉菜单的小实例,也就是鼠标移入菜单,它的子菜单出现并延迟消失.大概效果如下图: 来看下布局: <div class="menu" id="menu">主菜单</div> <ul class="mList" id="mList"> <li>下拉菜单一</li> <li>下拉菜单二</li> <li>下拉菜单三&l

JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .menu{            width: 1100px;            height: 30px;            background-image: url(img/魅力罗兰Music炫图18.jpg);            margin-left: 200px;            ma

js控件,下拉菜单

要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入框input控件中 制作了该控件的jquery插件,格式采用bootstrap的. 调用方法: input控件写成 <input class="form-control dropdown-toggle" data-toggle="dropdown" id=&quo

jquery多级下拉菜单

var menu = new Click('#menu',{target:'p',parent:'li',contr:'ul',way:0}); /* 参数说明: target : 点击事件发生在该元素内 way : 0 只显示一个,1点击即显示; parent : 点击的祖先元素标识,用以查找控制元素 contr : 控制的元素 */function Click(me,parm){ var tar = parm.target, parent = parm.parent, contr = par

bootstrap 多级下拉菜单

如上效果: 实现代码: 导入js和css: 1 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 2 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></scri