一个常见动易导航标签（自适应宽度）
样式部分包含了images文件夹和nav.css样式表，请把images文件夹中的nav.png放到对应样式文件夹中的images文件夹里面，nav.css同时也放到你所引用的样式文件夹里面，当然，你也可以把nav.css中的定义加入你的样式表中（为防止与其他样式冲突，nav.css样式使用了外层控制关系，如需改变，只改变外层样式名即可）
先上图，有图有真相：
压缩包有2部分：
1、样式部分包含了images文件夹和nav.css样式表，请把images文件夹中的nav.png放到对应样式文件夹中的images文件夹里面，nav.css同时也放到你所引用的样式文件夹里面，当然，你也可以把nav.css中的定义加入你的样式表中（为防止与其他样式冲突，nav.css样式使用了外层控制关系，如需改变，只改变外层样式名即可）
如：当前应用的样式为B2C，那nav.png的路径应该是：/Skin/B2C/images/nva.png，nav.css的路径应是：/Skin/B2C/nav.css
2、标签部分，为减少标签逻辑性，用了三个标签实现，模版调用方式为：
View Code
<!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" lang="UTF-8"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta content="{PE.Label id="取得META信息" siteConfig="true" metaType="keywords" /}" name="Keywords" /> <meta content="{PE.Label id="取得META信息" siteConfig="true" metaType="description" /}" name="Description"/> <title>网站首页-{PE.SiteConfig.SiteTitle/}</title> <link href="{PE.SiteConfig.SkinPath/}nav.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript" src="/JS/jquery.pack.js"></script> <script type="text/javascript"> <!-- // 带延时滑动jquery实现 (function() { $.fn.hoverDelay = function(options) { var defaults = { hoverDuring: 200, outDuring: 200, hoverEvent: function() { $.noop(); }, outEvent: function() { $.noop(); } }; var sets = $.extend(defaults, options || {}); var hoverTimer, outTimer; return $(this).each(function() { $(this).hover(function() { clearTimeout(outTimer); hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring); }, function() { clearTimeout(hoverTimer); outTimer = setTimeout(sets.outEvent, sets.outDuring); }); }); } })(jQuery); $(document).ready(function() { $(".navIn dt a").each(function(i, demo) { $(this).hoverDelay({ hoverEvent: function() { $(demo).addClass("navOn").siblings().removeClass(); $(".navIn dd").hide().eq(i).show(); }, outEvent: function() { return; } }) }) }) //--> </script> </head> <body> {PE.Label id="网站顶部导航" parentId="0" outputQty="6" keywordType="1" /} </body> </html>
其中parentId为导航菜单父节点ID，默认为全站菜单，但实际上启用二级域名时候，可采用启用二级域名的节点作为父节点，输出二级域名下面的网站导 航，outputQty为导航热门关键词输出个数，默认为5个，keywordType为关键词类型，系统有常规关键词和搜索关键词，可根据实际选择（可 以修改标签sql语句实现两者兼有，目前仅支持输出任一类别）。
因时间仓促，本地粗略测试过没问题，如发现问题，请留言，稍后更正o(∩_∩)o ....
输出后的html代码格式如下，其中请留意外层css name：
View Code
<!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" lang="UTF-8"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta content="网站导航条" name="Keywords" /> <meta content="网站导航条" name="Description"/> <title>网站导航条</title> <link href="/Skin/B2C/nav.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript" src="/JS/jquery.pack.js"></script> <script type="text/javascript"> // 简单js实现 function qiehuan(num) { for (var id = 0; id <= 7; id++) { if (id == num) { document.getElementById("qh_con" + id).style.display = "block"; document.getElementById("mynav" + id).className = "nav_on"; } else { document.getElementById("qh_con" + id).style.display = "none"; document.getElementById("mynav" + id).className = ""; } } } // 带延时滑动jquery实现 (function() { $.fn.hoverDelay = function(options) { var defaults = { hoverDuring: 200, outDuring: 200, hoverEvent: function() { $.noop(); }, outEvent: function() { $.noop(); } }; var sets = $.extend(defaults, options || {}); var hoverTimer, outTimer; return $(this).each(function() { $(this).hover(function() { clearTimeout(outTimer); hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring); }, function() { clearTimeout(hoverTimer); outTimer = setTimeout(sets.outEvent, sets.outDuring); }); }); } })(jQuery); $(document).ready(function() { $(".navIn dt a").each(function(i, demo) { $(this).hoverDelay({ hoverEvent: function() { $(demo).addClass("navOn").siblings().removeClass(); $(".navIn dd").hide().eq(i).show(); }, outEvent: function() { return; } }) }) }) </script> </head> <body> <div class="navOut"> <div class="navIn"> <dl> <dt> <a href="/" target="_parent" class="navOn"><b>网站首页</b></a><div></div> <a href="/" target="_parent"><b>服务与支持</b></a><div></div> <a href="/" target="_parent"><b>网络营销教程</b></a><div></div> <a href="/" target="_parent"><b>搜索引擎营销</b></a><div></div> <a href="/" target="_parent"><b>口碑营销教程</b></a><div></div> <a href="/" target="_parent"><b>Photoshop教程</b></a><div></div> <a href="/" target="_parent"><b>Flash素材</b></a><div></div> <a href="/" target="_parent"><b>网站建设</b></a> </dt> <dd> <strong>热门关键词：</strong> <a href="/"><b>团队动态</b></a><div></div> <a href="/"><b>服务价格</b></a><div></div> <a href="/"><b>成功案例</b></a><div></div> <a href="/"><b>客户培训</b></a><div></div> <a href="/"><b>电子商务人才</b></a><div></div> <a href="/"><b>服务指南</b></a> </dd> <dd style="display:none"> <a href="/"><b>团队动态</b></a><div></div> <a href="/"><b>服务价格</b></a><div></div> <a href="/"><b>成功案例</b></a><div></div> <a href="/"><b>客户培训</b></a><div></div> <a href="/"><b>电子商务人才</b></a><div></div> <a href="/"><b>服务指南</b></a> </dd> <dd style="display:none"> <a href="/"><b>网络营销技巧</b></a><div></div> <a href="/"><b>网络营销策略</b></a><div></div> <a href="/"><b>网络营销方案</b></a><div></div> <a href="/"><b>网络营销案例</b></a><div></div> <a href="/"><b>阿里巴巴教程</b></a><div></div> <a href="/"><b>淘宝店铺教程</b></a> </dd> <dd style="display:none"> <a href="/"><b>搜索引擎大全</b></a><div></div> <a href="/"><b>SEO基础知识</b></a><div></div> <a href="/"><b>SEO技术</b></a><div></div> <a href="/"><b>关键字优化</b></a><div></div> <a href="/"><b>百度优化</b></a><div></div> <a href="/"><b>Google优化</b></a> </dd> <dd style="display:none"> <a href="/"><b>口碑营销案例</b></a><div></div> <a href="/"><b>口碑营销技巧</b></a><div></div> <a href="/"><b>口碑营销工具</b></a><div></div> <a href="/"><b>口碑营销方案</b></a><div></div> <a href="/"><b>博客模板下载</b></a><div></div> <a href="/"><b>免费博客代码</b></a> </dd> <dd style="display:none"> <a href="list_586.html"><b>photoshop基础教程</b></a><div></div> <a href="list_587.html"><b>photoshop实例教程</b></a><div></div> <a href="list_594.html"><b>photoshp文字教程</b></a><div></div> <a href="list_595.html"><b>photoshop图片处理</b></a><div></div> <a href="list_596.html"><b>笔刷等下载</b></a><div></div> <a href="list_597.html"><b>photoshop源文件</b></a><div></div> <a href="list_598.html"><b>流行字体下载</b></a> </dd> <dd style="display:none"> <a href="list_599.html"><b>flash进度条</b></a><div></div> <a href="list_600.html"><b>flash文字特效</b></a><div></div> <a href="list_601.html"><b>flash图片切换</b></a><div></div> <a href="list_602.html"><b>flash鼠标跟随</b></a><div></div> <a href="list_603.html"><b>flash动画</b></a><div></div> <a href="list_604.html"><b>flash按钮菜单</b></a><div></div> <a href="list_605.html"><b>flash时钟</b></a><div></div> <a href="list_606.html"><b>透明flash</b></a> </dd> <dd style="display:none"> <a href="list_588.html"><b>网站建设知识</b></a><div></div> <a href="list_589.html"><b>html教程</b></a><div></div> <a href="list_590.html"><b>div+css教程</b></a><div></div> <a href="list_591.html"><b>网页按钮制作</b></a><div></div> <a href="list_592.html"><b>网页特效代码</b></a><div></div> <a href="list_593.html"><b>网站建设方案</b></a> </dd> </dl> </div> </div> <br /> <br /> </body> </html>
