用JS写二级导航（下拉菜单）

最新推荐文章于 2023-11-18 22:58:50 发布

weixin_30832983

最新推荐文章于 2023-11-18 22:58:50 发布

阅读量539

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/medici/archive/2011/04/28/2031478.html

版权

昨天学的新知识。工作有点多，没来得及总结。

今天耐心整理一下吧。

先看下效果，目前网站没有上线，凑合着看看图片吧。

下面是代码：

<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>下拉导航</title>
	<style type="text/css">
	/reset/
	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
	body { line-height:1;}
	*{word-wrap:break-word;word-break:break-all;}
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
	nav ul, ol, li, menu { list-style:none; }
	blockquote, q { quotes:none; }
	blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
	a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
	/* change colours to suit your needs */
	ins { background-color:#ff9; color:#000; text-decoration:none; }
	/* change colours to suit your needs */
	mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
	del { text-decoration: line-through; }
	abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
	table { border-collapse:collapse; border-spacing:0;}
	/* change border colour to suit your needs */
	hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
	address, caption, cite, code, dfn, em, th, var { font-weight: normal; font-style: normal; }
	caption, th { text-align: left; }
	h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }
	q:before, q:after { content: ''; }
	abbr, acronym { border: 0; }
	/* Clear Fix */
	.clearfix:after,
	.rwp:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
	.clearfix { display:inline-block; }
	.clearfix { display:block; }
	.clear { clear:both; height:0px; font-size:0px; line-height:0px; }

	/上面这一堆全是reset不用管/
	body{ background:#fff; font-family:"微软雅黑", "黑体", arial, sans-serif; font-size:12px;}
	.main{ width:960px; margin:0 auto; background:#f0f0f0; border:solid #ccc; border-width:0 1px; height:800px; padding:20px 0; }
	.side{ float:left; width:240px; padding:10px;}
	.menu{ border:2px solid #c00; background:#fff;}
	.menu dl{}
	.menu dt,
	.menu dd{border-bottom:1px solid #ccc;}
	.menu dl a{ display:block; color:#900;text-decoration:none;}
	.menu dl a:hover{ color:#d00; text-decoration:none; background:#f6f6f6;}
	.menu dt a{ padding-left:12px;}
	.menu dd a{ padding-left:24px;}/左边的padding值分开一级和二级导航/
	.menu dt{ height:26px; line-height:26px; font-size:14px;}
	.menu dd{ display:none;/默认隐藏的dd是二级菜单/ font-size:12px; height:22px; line-height:22px; }
	.menu dl:hover dd,
	.menu dl.hover dd{ display:block;}/标准的浏览器用:hover 就可以控制了，.hover类是给ie6以下浏览器看的/




	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
	$(function(){


	menu();

	});

	function menu(){
	//如果是IE6才执行
	if($.browser.msie && $.browser.version <= 6){
	$("#menu dl").hover(
	function(){
	$(this).addClass("hover");
	},
	function(){
	$(this).removeClass("hover");
	}
	);
	//end if
	}

	};

	</script>
	</head>

	<body>
	<div class="main">
	<div class="side">

	<div class="menu" id="menu">
	<dl>
	<dt><a href="#nogo">主导航一</a></dt>
	<dd><a href="#nogo">副标题11</a></dd>
	<dd><a href="#nogo">副标题12</a></dd>
	<dd><a href="#nogo">副标题13</a></dd>
	</dl>
	<dl>
	<dt><a href="#nogo">主导航二</a></dt>
	<dd><a href="#nogo">副标题21</a></dd>
	<dd><a href="#nogo">副标题22</a></dd>
	<dd><a href="#nogo">副标题33</a></dd>
	</dl>
	<dl>
	<dt><a href="#nogo">主导航一</a></dt>
	<dd><a href="#nogo">副标题11</a></dd>
	<dd><a href="#nogo">副标题12</a></dd>
	<dd><a href="#nogo">副标题13</a></dd>
	</dl>
	<dl>
	<dt><a href="#nogo">主导航三</a></dt>
	<dd><a href="#nogo">副标题31</a></dd>
	<dd><a href="#nogo">副标题32</a></dd>
	<dd><a href="#nogo">副标题33</a></dd>
	</dl>
	</div>


	</div>
	</div>

	</body>
	</html> 注释中写得满清楚，ie6不支持hover效果。

如果想让IE也支持HOVER效果，那么在文件中要链上这段JS代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
	/*
	*该文件解决ie6普通标签hover支持
	*/
	(function($){
	var csshoverReg = /(^\|\s)(([^a]([^ ]+)?)\|(a([^#.][^ ]+)+)):(hover\|active)/i,
	currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'}
	}
	function parseStylesheets() {
	if(!/MSIE (5\|6)/.test(navigator.userAgent))
	return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++)
	parseStylesheet(sheets[i]);
	}

	function parseStylesheet(sheet) {
	if(sheet.imports) {
	try {
	var imports = sheet.imports, l = imports.length;
	for(var i=0; i<l; i++)
	parseStylesheet(sheet.imports[i]);
	} catch(securityException) {
	}
	}
	try {
	var rules = (currentSheet = sheet).rules, l = rules.length;
	for(var j=0; j<l; j++)
	parseCSSRule(rules[j]);
	} catch(securityException) {
	}
	}

	function parseCSSRule(rule) {
	var select = rule.selectorText, style = rule.style.cssText;
	if(!csshoverReg.test(select) \|\| !style)
	return;
	var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
	var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)\|(:[a-z]+)/gi, '.$2' + pseudo);
	var className = (/\.([a-z0-9_-]*on(hover\|active))/i).exec(newSelect)[1];
	var affected = select.replace(/:(hover\|active).*$/, '');
	var elements = getElementsBySelect(affected);
	if(elements.length == 0)
	return;
	currentSheet.addRule(newSelect, style);
	for(var i=0; i<elements.length; i++)
	new HoverElement(elements[i], className, activators[pseudo]);
	}

	function HoverElement(node, className, events) {
	if(!node.hovers)
	node.hovers = {};
	if(node.hovers[className])
	return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() {
	node.className += ' ' + className;
	});
	hookHoverEvent(node, events.off, function() {
	node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),'');
	});
	}

	function hookHoverEvent(node, type, handler) {
	node.attachEvent(type, handler);
	hoverEvents[hoverEvents.length] = {
	node:node, type:type, handler:handler
	};
	}

	function unhookHoverEvents() {
	for(var e,i=0; i<hoverEvents.length; i++) {
	e = hoverEvents[i];
	e.node.detachEvent(e.type, e.handler);
	}
	}

	function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
	nodes = getSelectedNodes(parts[i], nodes);
	}
	return nodes;
	}

	function getSelectedNodes(select, elements) {
	var result, node, nodes = [];
	var identify = (/\#([a-z0-9_-]+)/i).exec(select);
	if(identify) {
	var element = doc.getElementById(identify[1]);
	return element? [element]:nodes;
	}
	var classname = (/\.([a-z0-9_-]+)/i).exec(select);
	var tagName = select.replace(/(\.\|\#\|\:)[a-z0-9_-]+/i, '');
	var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
	for(var i=0; i<elements.length; i++) {
	result = tagName? elements[i].all.tags(tagName):elements[i].all;
	for(var j=0; j<result.length; j++) {
	node = result[j];
	if(classReg && !classReg.test(node.className))
	continue;
	nodes[nodes.length] = node;
	}
	}
	return nodes;
	}
	$(parseStylesheets);
	})(jQuery);

	</script>