Heluyao's Blog » 导航 http://www.11gz.com/blog 设计、开发路上的点点滴滴... Thu, 02 Sep 2010 07:42:29 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 不规则形状导航 http://www.11gz.com/blog/2009/11/18/anomalous-nav/ http://www.11gz.com/blog/2009/11/18/anomalous-nav/#comments Wed, 18 Nov 2009 07:40:19 +0000 heluyao http://www.11gz.com/blog/?p=475

这样的导航看起来挺复杂，做起来其实挺简单，只是IE6要用到滤镜来确保PNG的透明。万恶的IE6啊！

这里还用到inline-block，IE不支持inline-block，hack给inline，IE6下给定zoom也能解决，再利用负方向的margin值将透明部位重叠。

关键css:

display:inline-block; *display:inline; zoom:1; margin-left:-37px;

预览效果：不规则的导航条

下载文件：点击下载

]]> http://www.11gz.com/blog/2009/11/18/anomalous-nav/feed/ 0 js实现下拉导航菜单[3种] http://www.11gz.com/blog/2008/11/05/js-drop-down-navigation/ http://www.11gz.com/blog/2008/11/05/js-drop-down-navigation/#comments Wed, 05 Nov 2008 08:01:40 +0000 heluyao http://11gz-blog.528u.com/blog/?p=151 最近几天在弄一些管理界面，说到管理界面，自然就离不开一个能打开收起的菜单了。就顺便整理一下，方便有需要的朋友使用。以下有3种，每种都有其优点，根据需要选择吧！

第一种，也是最简单实用的一种，正因为简单，也有其不完善的一面。

下载: code1.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <script type="text/javascript"> 
  3. <!--
  4. function getObject(objectId) {
  5. if(document.getElementById && document.getElementById(objectId)) {
  6. return document.getElementById(objectId);
  7. }
  8. else if (document.all && document.all(objectId)) {
  9. return document.all(objectId);
  10. }
  11. else if (document.layers && document.layers[objectId]) {
  12. return document.layers[objectId];
  13. }
  14. else {
  15. return false;
  16. }
  17. }
  18.  
  19. function showHide(e,objname){    
  20.     var obj = getObject(objname);
  21.     if(obj.style.display == "none"){
  22.         obj.style.display = "block";
  23.         e.className="xias";
  24.     }else{
  25.         obj.style.display = "none";
  26.         e.className="rights";
  27.     }
  28. }
  29. --> 
  30. </script> 
  31. <style type="text/css"> 
  32. body { font-size:12px; margin:20px; padding:0; text-align:left;}
  33. dl,dt,dd,ul,ol,li,p,div,input,h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
  34. li { list-style:none;}
  35. h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;}
  36. h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;}
  37. .libiao_menu { margin-bottom:15px;}
  38. .libiao_menu h3 a { margin-top:15px; margin-bottom:15px; display:block; background:url(../picture/user_11.gif) no-repeat 20px 0; width:130px; height:28px; font-size:14px; text-align:left; padding-left:65px; padding-top:13px; color:#0066cc;}
  39. .libiao_menu dl { margin-left:30px; margin-top:5px;}
  40. .libiao_menu dl dt { font-size:14px; line-height:24px;}
  41. .libiao_menu dl dt a { padding-left:13px; color:#333;}
  42. .libiao_menu dl dt a.rights { background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 3px;}
  43. .libiao_menu dl dt a.xias { background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 -41px;}
  44. .libiao_menu dl dd { padding-left:20px;}
  45. .libiao_menu dl dd ul {}
  46. .libiao_menu dl dd ul li { font-size:14px; line-height:24px;}
  47. .libiao_menu dl dd ul li a { color:#06c;}
  48. </style> 
  49. <h2>js2级下拉导航列表[1]</h2> 
  50. <h5>本文出处：<a href="http://www.11gz.com/" target="_blank">Heluyao's Blog</a>，转载请保留<span style="color:#f00; font-weight:bold;">出处链接</span>！</h5> 
  51.     <div class="libiao_menu"> 
  52.         <dl> 
  53.             <dt><a href="#" class="xias" onclick="showHide(this,'items0');">我的订单</a></dt> 
  54.             <dd id="items0" style="display: block;"> 
  55.                 <ul> 
  56.                     <li><a href="#">所有订单</a></li> 
  57.                     <li><a href="#">需要支付的订单</a></li> 
  58.                     <li><a href="#">处理中的订单</a></li> 
  59.                     <li><a href="#">需要确认收货的订单</a></li> 
  60.                 </ul> 
  61.             </dd> 
  62.         </dl> 
  63.         <dl> 
  64.             <dt><a href="#" class="xias" onclick="showHide(this,'items1');">帐户管理</a></dt> 
  65.             <dd id="items1" style="display: block;"> 
  66.                 <ul> 
  67.                     <li><a href="#">我的积分</a></li> 
  68.                     <li><a href="#">管理收货地址</a></li> 
  69.                 </ul> 
  70.             </dd> 
  71.         </dl> 
  72.         <dl> 
  73.             <dt><a href="#" class="xias" onclick="showHide(this,'items2');">我的</a></dt> 
  74.             <dd id="items2" style="display: block;"> 
  75.                 <ul> 
  76.                     <li><a href="#">我的收藏</a></li> 
  77.                     <li><a href="#">我的评论</a></li> 
  78.                 </ul> 
  79.             </dd> 
  80.         </dl> 
  81.         <dl> 
  82.             <dt><a href="#" class="xias" onclick="showHide(this,'items3');">个人信息管理</a></dt> 
  83.             <dd id="items3" style="display: block;"> 
  84.                 <ul> 
  85.                     <li><a href="#">编辑个人档案</a></li> 
  86.                     <li><a href="#">修改密码</a></li> 
  87.                 </ul> 
  88.             </dd> 
  89.         </dl> 
  90.     </div>

第二种：功能上比第一种要强，预览查看效果就会有明显的感觉。当打开另一个下拉列表时，之前打开的会关闭合拢。实用了YAHOO一个操作DOM的函数库。

下载: code2.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <script type="text/javascript" src="http://www.11gz.com/yahoo-dom-event.js"></script> 
  3. <script type="text/javascript"> 
  4. <!--
  5. function fnInitMenu(){
  6.     YAHOO.namespace('Menu');
  7.     var sMenuId = "qMenu"; //导航的ID名
  8.     var sMenu2ClassName = "qMenu2"; //二级菜单的className
  9.     var sMenu1ActiveClassName = "activeItem"; //当前激活的一级菜单className
  10.     var oMenu = YAHOO.util.Dom.get(sMenuId);
  11.     YAHOO.Menu.hide = function(obj){
  12.         var menu2 = YAHOO.util.Dom.getElementsByClassName(sMenu2ClassName,"ul",oMenu);
  13.         for(var i=0;i<menu2.length;i++){
  14.             if(menu2[i].parentNode == obj) continue; 
  15.             menu2[i].style.display="none";
  16.             YAHOO.util.Dom.removeClass(menu2[i].parentNode,sMenu1ActiveClassName);    
  17.         }
  18.     }
  19.     YAHOO.Menu.fold = function(ev){
  20.         var a =YAHOO.util.Event.getTarget(ev);
  21.         var b =YAHOO.util.Dom.getLastChild(a);    
  22.         if(YAHOO.util.Dom.hasClass(a,sMenu1ActiveClassName)){                            
  23.             if(YAHOO.util.Dom.hasClass(b,sMenu2ClassName)){
  24.                 b.style.display = "none";
  25.             }
  26.             YAHOO.util.Dom.removeClass(a,sMenu1ActiveClassName);            
  27.         }else{
  28.         
  29.              if(YAHOO.util.Dom.hasClass(b,sMenu2ClassName)){
  30.                  YAHOO.Menu.hide();
  31.                 b.style.display = "block";
  32.             }
  33.             YAHOO.util.Dom.addClass(a,sMenu1ActiveClassName);
  34.         }
  35.     }
  36.     YAHOO.Menu.init = new function(){        
  37.         var c = YAHOO.util.Dom.getChildren(sMenuId);    
  38.         for(var j=0;j<c.length;j++){
  39.             YAHOO.util.Event.on(c[j],"click",YAHOO.Menu.fold);
  40.             if(YAHOO.util.Dom.hasClass(c[j],sMenu1ActiveClassName)){
  41.                 var oNotHide =c[j];
  42.             }    
  43.         }
  44.         YAHOO.Menu.hide(oNotHide);
  45.     }    
  46. }
  47. YAHOO.util.Event.onDOMReady(fnInitMenu);
  48. --> 
  49. </script> 
  50. <style type="text/css"> 
  51. *{ margin:0; padding:0;    list-style:none;}
  52. body { margin:20px; text-align:left; font-family:"宋体";}
  53. h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;}
  54. h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;}
  55. .menu {}
  56. .menu li { line-height:24px; background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 8px; font-size:14px; text-align:left; padding-left:10px; cursor:pointer;}
  57. .menu li.activeItem { background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 -36px;}
  58. .menu li ul { margin-bottom:5px;}
  59. .menu li ul li { font-size:12px; text-align:left; background:#fff; line-height:22px; margin-left:-10px; cursor:auto;}
  60. .menu li ul li.activeItem { background:none;}
  61. .menu li ul li a { color:#06c; font-size:14px; text-decoration:underline;}
  62. </style> 
  63. <h2>js2级下拉导航列表[2]</h2><h5>本文出处：<a href="http://www.11gz.com/" target="_blank">Heluyao's Blog</a>，转载请保留<span style="color:#f00; font-weight:bold;">出处链接</span>！</h5> 
  64. <ul class="menu" id="qMenu"> 
  65.                 <li>大类一
  66.                     <ul style="display: none;" class="qMenu2"> 
  67.                         <li>·<a href="#">列表一</a></li> 
  68.                         <li>·<a href="#">列表二</a></li> 
  69.                         <li>·<a href="#">列表三</a></li> 
  70.                         <li>·<a href="#">列表四</a></li> 
  71.                     </ul> 
  72.                 </li> 
  73.                 <li>大类二
  74.                     <ul style="display: none;" class="qMenu2"> 
  75.                         <li>·<a href="#">列表一</a></li> 
  76.                         <li>·<a href="#">列表二</a></li> 
  77.                         <li>·<a href="#">列表三</a></li> 
  78.                         <li>·<a href="#">列表四</a></li> 
  79.                     </ul> 
  80.                 </li> 
  81.                 <li>大类三
  82.                     <ul style="display: none;" class="qMenu2"> 
  83.                         <li>·<a href="#">列表一</a></li> 
  84.                         <li>·<a href="#">列表二</a></li> 
  85.                         <li>·<a href="#">列表三</a></li> 
  86.                         <li>·<a href="#">列表四</a></li> 
  87.                     </ul> 
  88.                 </li> 
  89.                 <li>大类四
  90.                     <ul style="display: none;" class="qMenu2"> 
  91.                         <li>·<a href="#">列表一</a></li> 
  92.                         <li>·<a href="#">列表二</a></li> 
  93.                         <li>·<a href="#">列表三</a></li> 
  94.                         <li>·<a href="#">列表四</a></li> 
  95.                     </ul> 
  96.                 </li> 
  97.                 <li>大类五
  98.                     <ul style="display: none;" class="qMenu2"> 
  99.                         <li>·<a href="#">列表一</a></li> 
  100.                         <li>·<a href="#">列表二</a></li> 
  101.                         <li>·<a href="#">列表三</a></li> 
  102.                         <li>·<a href="#">列表四</a></li> 
  103.                     </ul> 
  104.                 </li> 
  105.                 <li>大类六
  106.                     <ul style="display: none;" class="qMenu2"> 
  107.                         <li>·<a href="#">列表一</a></li> 
  108.                         <li>·<a href="#">列表二</a></li> 
  109.                         <li>·<a href="#">列表三</a></li> 
  110.                         <li>·<a href="#">列表四</a></li> 
  111.                     </ul> 
  112.                 </li> 
  113.             </ul>

第三种：这个功能很强大的说，绝对无限级。只要你按照标签嵌套的模式，想实现多少级就多少几，而且不会存在性能的问题。原理也比较简单。仅仅只是标签的display属性变换。同样也用了一个js框架，主要用于操作文档DOM节点。而且该js框架很小，5k而已咯！值得推荐！

下载: code3.html
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  2. <style type="text/css"> 
  3.     *{ margin:0; padding:0;    list-style:none;}
  4.     body { margin:20px;}
  5.     h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;}
  6.     h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;}
  7.     #nav a { text-decoration:underline;color:#06c; font-size:14px; line-height:24px;}
  8.     #nav ul{ margin-bottom:5px;}
  9.     #nav strong{ color:#696;}
  10.     #nav.dyn li ul{ display:none;}
  11.     #nav.dyn li ul.show{ display:block;}
  12.     #nav.dyn li{ padding-left:15px;}
  13.     #nav.dyn li.parent{    background:url(http://www.11gz.com/blog/images/user_23.gif) 5px 10px no-repeat;}
  14.     #nav.dyn li.open{ background:url(http://www.11gz.com/blog/images/user_23.gif) 5px -34px no-repeat;}
  15.     </style> 
  16. <script type="text/javascript" src="http://www.11gz.com/DOMhelp.js"></script> 
  17. <script type="text/javascript"> 
  18. <!--
  19. sn={
  20.     dynamicClass:'dyn',
  21.     showClass:'show',
  22.     parentClass:'parent',
  23.     openClass:'open',
  24.     navID:'nav',
  25.     init:function(){
  26.         var triggerLink;
  27.         if(!document.getElementById || !document.createTextNode){return;}
  28.         var nav=document.getElementById(sn.navID);
  29.         if(!nav){return;}
  30.         DOMhelp.cssjs('add',nav,sn.dynamicClass);        
  31.         var nested=nav.getElementsByTagName('ul');
  32.         for(var i=0;i<nested.length;i++){
  33.             triggerLink=nested[i].parentNode.getElementsByTagName('a')[0];
  34.             DOMhelp.cssjs('add',triggerLink.parentNode,sn.parentClass);        
  35.             DOMhelp.addEvent(triggerLink,'click',sn.changeSection,false);
  36.             triggerLink.onclick=DOMhelp.safariClickFix;
  37.             if(nested[i].parentNode.getElementsByTagName('strong').length>0){
  38.                 DOMhelp.cssjs('add',triggerLink.parentNode,sn.openClass);        
  39.                 DOMhelp.cssjs('add',nested[i],sn.showClass);
  40.             }
  41.         }
  42.     },
  43.     changeSection:function(e){
  44.         var t=DOMhelp.getTarget(e);
  45.         var firstList=t.parentNode.getElementsByTagName('ul')[0];
  46.         if(DOMhelp.cssjs('check',firstList,sn.showClass)){
  47.             DOMhelp.cssjs('remove',firstList,sn.showClass)
  48.             DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass);
  49.         } else {
  50.             DOMhelp.cssjs('add',firstList,sn.showClass)
  51.             DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass);
  52.         }
  53.         DOMhelp.cancelClick(e);
  54.     }
  55. }
  56. DOMhelp.addEvent(window,'load',sn.init,false);
  57. --> 
  58. </script> 
  59. <h2>js实现无限级下拉导航列表</h2><h5>本文出处：<a href="http://www.11gz.com/" target="_blank">Heluyao's Blog</a>，转载请保留<span style="color:#f00; font-weight:bold;">出处链接</span>！</h5> 
  60. <ul id="nav"> 
  61.     <li><a href="#">主页</a></li> 
  62.     <li><a href="#">产品</a> 
  63.         <ul> 
  64.             <li><a href="#">大类别一</a> 
  65.                 <ul> 
  66.                     <li><a href="#">小类别一</a> 
  67.                         <ul> 
  68.                             <li><a href="#">次类别一</a></li> 
  69.                             <li><a href="#">次类别二</a></li> 
  70.                         </ul> 
  71.                     </li> 
  72.                     <li><a href="#">小类别二</a></li> 
  73.                 </ul> 
  74.             </li> 
  75.             <li><a href="#">大类别二</a></li> 
  76.             <li><a href="#">大类别三</a> 
  77.                 <ul> 
  78.                     <li><a href="#">小类别一</a></li> 
  79.                     <li><a href="#">小类别二</a></li> 
  80.                 </ul> 
  81.             </li> 
  82.         </ul> 
  83.     </li> 
  84.     <li><a href="#">服务</a> 
  85.         <ul> 
  86.             <li><a href="#">大类别一</a></li> 
  87.             <li><a href="#">大类别二</a></li> 
  88.             <li><a href="#">大类别三</a></li> 
  89.         </ul> 
  90.     </li> 
  91.     <li><a href="#">合作</a></li> 
  92.     <li><a href="#">关于我们</a> 
  93.         <ul> 
  94.             <li><a href="#">大类别一</a> 
  95.                 <ul> 
  96.                     <li><a href="#">小类别一</a></li> 
  97.                     <li><a href="#">小类别二</a></li> 
  98.                 </ul> 
  99.             </li> 
  100.             <li><a href="#">大类别二</a> 
  101.                 <ul> 
  102.                     <li><a href="#">小类别一</a></li> 
  103.                     <li><a href="#">小类别二</a></li> 
  104.                 </ul> 
  105.             </li> 
  106.             <li><a href="#">大类别三</a> 
  107.                 <ul> 
  108.                     <li><a href="#">小类别一</a></li> 
  109.                     <li><a href="#">小类别二</a></li> 
  110.                 </ul> 
  111.             </li> 
  112.             <li><a href="#">大类别四</a></li> 
  113.         </ul> 
  114.     </li> 
  115.     <li><a href="#">联系我们</a> 
  116.         <ul> 
  117.             <li><a href="#">大类别一</a></li> 
  118.             <li><a href="#">大类别二</a></li> 
  119.         </ul> 
  120.     </li> 
  121. </ul>

　　相信你能找到你想要的！

]]> http://www.11gz.com/blog/2008/11/05/js-drop-down-navigation/feed/ 2