用JS写二级导航（下拉菜单）
昨天学的新知识。工作有点多，没来得及总结。
今天耐心整理一下吧。
先看下效果，目前网站没有上线，凑合着看看图片吧。
下面是代码：
| <!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> |
现在就可以放心大胆的使用hover了！
