网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
ccit吧 关注：22贴子：152
  • 2回复贴，共1页

js 下拉导航源码---详细注释

只看楼主收藏回复

/*
* 程序效果:下拉导航
* 程序设计:lxs_lingting
* 完成日期:2011-05-02
* 联系 Q Q:525909366
* 个人主页:http://hi.baidu.com/lxs_lingting/home
*/
//*** 已使用 javascript 方法名
// write_dh() 生成一级导航
// write_map(id) 生成二级菜单
// c_l() 判断浏览器
// getXY(t) 获取二级菜单坐标
// getElement(tagname) 创建对象
// none_child() 隐藏打开的二级菜单
/*参数设置*/
var $_dh_width=900;//导航宽
var $_dh_height=30;//导航高
var $_dh_childWidth=120;//二级列表宽度
var $_dh_tb=new Array(10,5);//一级导航文字与上下距离   IE，其它
var $_target_f="_blank";//一级分类链接状态   _self 当前页打开   _blank 新窗口打开
var $_target_c="_blank";//二级分类链接状态
var $_dh_color="#000000";
var $_dh_data=[];//一级导航 li **
//var $_dh_child_data=[];//二级菜单 div **
var $_dh_child_=null;
var $_rq_div="m_";//导航容器ID
/* 生成二级导航 */
function write_map(id)
{
if($_dh_array[id].length>1)
{
   /* 获取标签子标签 a 距左侧距离 */
   var $_width=$_dh_data[id].childNodes[0].offsetLeft;
   /* 判断浏览器并确定距左距离 */
   var $_l=(c_l()?(getXY($_dh_data[id])[0]+$_width):$_width);
   /* 创建子菜单并存入二级菜单** */
   /* $_dh_child_data[id]=getElement("div"); */
   /* 创建子菜单并存入二级菜单** */
   $_dh_child_=getElement("div");
   /* 为子菜单容器div定义css样式 */
   with($_dh_child_.style)
   {
     width=$_dh_childWidth+"px";
     padding="1 3 1 3";
     height="auto";
     border="1px solid #ff0000";
     position="absolute";
     left=$_l;
     top=getXY($_dh_data[id])[1]+$_dh_height;
   }
   /* 将div创建到body中 */
   document.body.appendChild($_dh_child_);
   /* 生成ul并创建到div中 */
   var $_child_ul=getElement("ul");
   $_dh_child_.appendChild($_child_ul);
   /* 生成二级菜单子项 */
   for(var i=0;i<$_dh_array[id][1].length;i++)
   {
    /* 创建二级菜单子项li同时定义li的css样式 */
    var $_child_li=getElement("li");
    with($_child_li.style)
    {
     width="100%";
     height="auto";
     textAlign="left";
     padding="1 0 1 0";
     margin="1 0 1 0";
    }
    /* 将二级菜单内容写入li中并将li创建到ul中 */
    $_child_li.innerHTML="<a href='"+$_dh_array[id][1][i][1]+"' target='"+$_target_f+"'><span style='cursor:pointer; font-size:12px; color:#ff0000;'>"+$_dh_array[id][1][i][0]+"</span></a>";

IP属地:辽宁1楼2011-05-02 14:16回复
        $_child_ul.appendChild($_child_li);
       }
    }
    }
    /*   返回要创建的对象   */
    function getElement(tagname)
    {
    return document.createElement(tagname);
    }
    /*   根据不同浏览器返回二级菜单坐标 x y   */
    function getXY(t)
    {
    var arr=new Array();
    arr[0]=t.offsetLeft;
    arr[1]=t.offsetTop;
    /* 如果是IE浏览器 */
    if(c_l())
    {
       do
       {
        t=t.parentNode;
        if(t.tagName=="BODY")
        {
         break;
        }
        else
        {
         arr[0]+=t.offsetLeft;
         arr[1]+=t.offsetTop;
        }
       }while(t);
    }
    return arr;
    }
    /*   判断浏览器   */
    function c_l()
    {
    if(document.all)
       return true;
    else
       return false;
    }
    /*   导航栏信息   */
    var $_dh_array=
    [
    [ /* 0 */
        /* 为一级导航目录 */
       ["网站首页","javascript:void(0)","_self"],/* 0,0    当第二个参数无连接时值为javascript:void(0)     无连接时将第三个参数设置为_self */
       /* 为二级导航目录 */
       [/* 0 1   */
        ["首页测试","http://zhidao.baidu.com/","_blank"],/* 0 1 0 */
        ["测试首页","http://zhidao.baidu.com/","_blank"],
        ["试首测页","http://zhidao.baidu.com/","_blank"]
       ]
    ],
    [
       ["公司简介","http://zhidao.baidu.com/","_blank"],
       [
        ["公司简介1","http://zhidao.baidu.com/","_blank"],
        ["公司简介2","http://zhidao.baidu.com/","_blank"]
       ]
    ],
    [
       ["产品展示","http://zhidao.baidu.com/","_blank"],
       [
        ["衣服","http://zhidao.baidu.com/","_blank"],
        ["运动鞋","http://zhidao.baidu.com/","_blank"]
       ]
    ],
    [
       ["案例展示","http://zhidao.baidu.com/","_blank"],
       [
        ["工程案例","http://zhidao.baidu.com/","_blank"],
        ["测试案例","http://zhidao.baidu.com/","_blank"]
    
    IP属地:辽宁2楼2011-05-02 14:16
    回复
         ]
      ],
      [
         ["联系我们","http://zhidao.baidu.com/","_blank"]
      ]
      ];
      /***********************************   生成一级导航栏信息   *******************************/
      function write_dh()
      {
      var $_cd=getElement("div");
      with($_cd.style)
      {
         width=$_dh_width+"px";
         height=$_dh_height+"px";
         overflow="hidden";
      }
      document.getElementById($_rq_div).appendChild($_cd);
      var $_cul=getElement("ul");
      $_cd.appendChild($_cul);
      /* 获取导航条每个li的宽度 */
      var $_cli_width=parseInt($_dh_width / $_dh_array.length);
      for(var i=0;i<$_dh_array.length;i++)
      {
         $_dh_data[i]=getElement("li");
         with($_dh_data[i].style)
         {
          width=$_cli_width+"px";
          height=(c_l()?$_dh_height:($_dh_height))+"px";
          padding=(c_l()?$_dh_tb[0]:$_dh_tb[1])+" 0 "+(c_l()?$_dh_tb[0]:$_dh_tb[1])+" 0";
          fontSize="13px";
          textAlign="center";
          letterSpacing="1px";
         }
         $_dh_data[i].innerHTML="<a href='"+$_dh_array[i][0][1]+"' target='"+$_dh_array[i][0][2]+"'><span style='cursor:pointer; width:auto; color:"+$_dh_color+"' onmouseover='none_child();write_map("+i+")'>"+$_dh_array[i][0][0]+"</span></a>";
         $_cul.appendChild($_dh_data[i]);
      }
      }
      /*   删除其它子菜单   */
      function none_child()
      {
      /*
      //循环删除已打开二级菜单div
      for(var i=0;i<$_dh_child_data.length;i++)
      {
         if($_dh_child_data[i])
         {
          //alert($_dh_child_data.length);
          document.body.removeChild($_dh_child_data[0]);
         }
      }
      */
      if($_dh_child_)
      {
         document.body.removeChild($_dh_child_);
         $_dh_child_=null;
      }
      }
      /*   网页加载后生成导航   */
      /*   点击页面隐藏子菜单   */
      window.onload=function()
      {
      write_dh();
      document.body.onclick=none_child;
      }
      
      IP属地:辽宁3楼2011-05-02 14:16
      回复

        扫二维码下载贴吧客户端

        下载贴吧APP
        看高清直播、视频！
        • 2回复贴，共1页
        发表回复
        发贴请遵守贴吧协议及“七条底线”贴吧投诉
        内  容:
          查看全部
        发 表
        保存至快速回贴

        发布成功
        去贴吧APP订阅抽奖结果通知
        扫码进入贴吧APP
        ···········
        开奖后第一时间站内信通知
        ···········
        中奖结果全员公示