Dreamweaver教程 FrontPage教程 Flash教程 CSS教程
  • javascript教程
  • 当前位置:教程 > 网页制作 > javascript教程 > 正文

    javascript+xml实现二级下拉菜单,不会被任何标签或元素遮住

    编辑:教程网 来源:网络 时间:2011年11月01日 16:45

    一、简单说明

    该菜单最大的优点是可以跨过网页上任何标签,甚至是框架,
    (一般的菜单会被select,object,flash等挡住)
    所以如果你有这方面的需要,
    那么这个菜单是个很好的选择。

    总体而言,它有如下特性:
    (1)菜单的样式和数据都是通过xml配置
    (2)菜单的样式可以随心所欲修改,如:

    <base>
    <background-color>#DDDDDD</background-color>
    <background-image>url(menu_bg.jpg)</background-image>
    <font-size>10pt</font-size>
    <color>#000099</color>
    <width>100%</width>
    <height>32</height>
    <text-align>center</text-align>
    <cursor>default</cursor>
    </base>


    只要节点名称符合各自标签(table,tr,td之一)的style attribute即可。

    (3)主菜单项之间可以设置分割图片,
    子菜单项可以设置分割线的样式。

    (4)所有图片都由css控制,避免路径问题。

    (5)可以设置虚拟目录的别名,为菜单链接使用绝对路径带来方便,如:

    <context>
    <path>hdsa</path>
    </context>


    设置该值后,用户只需根据文件的目录结构写好菜单,而不必担心虚拟目录的问题。

    由于菜单使用了window.createPopup(),
    所以它被限制在IE5.5以上,
    而且子菜单如果是新开窗口,会被拦截。
    注:用window.createPopup()制作菜单受到过前人的启发

    设置该值后,用户只需根据文件的目录结构写好菜单,而不必担心虚拟目录的问题。

    由于菜单使用了window.createPopup(),
    所以它被限制在IE5.5以上,
    而且子菜单如果是新开窗口,会被拦截。
    注:用window.createPopup()制作菜单受到过前人的启发
    =====================================================================


    二、实现的两个脚本可以写在一个文件中:

    (1)处理Popup窗口的脚本

    //------------------ 下面一些函数用来处理弹出窗口 ------------------ //
    var pops = new Array(); // 用来存储Popup窗口家族的数组
    function CreatePopup(degree)
    {
    if (degree < 0) // 层数不能小于0
    return null;
    if (pops[degree] != null) //如果已经存在则不需创建
    return pops[degree];

    if (degree == 0)
    pops[0] = window.createPopup(); //创建最顶层Popup窗口
    else{
    if (pops[degree - 1] == null)
    pops[degree - 1] = CreatePopup(degree - 1) //递归回溯从第一层开始创建
    pops[degree] = pops[degree - 1].document.parentWindow.createPopup(); //从父Popup窗口创建子Popup窗口
    }
    pops[degree].document.body.setAttribute("degree", degree);
    return pops[degree];
    }

    CreatePopup(1); //创建一个2层的Popup家族

    var oPopup = pops[0];
    var timer = null;


    /**
    *显示一级子菜单
    *@param objShow - 显示子菜单的对象
    *@param strGetID - 存储显示内容的标签id
    */
    function showSubMenu1(objShow,strGetID) {
    clearTimer();
    endHideSubMenu();
    var objGet = eval(document.getElementById(strGetID));

    pops[1].hide();
    pops[0].document.body.innerHTML = objGet.innerHTML;
    pops[0].show(0,0,1,1,objShow);
    var intWidth = pops[0].document.body.scrollWidth;
    var intHeight = pops[0].document.body.scrollHeight;
    pops[0].hide();
    pops[0].show(10,objShow.offsetHeight-2,intWidth,intHeight,objShow);

  • 原文来自 教程网 转载请注明:http://www.websmill.com/wangye/javascript/30796.html

  • 上一篇:用JavaScript实现变色背景和文字
  • 下一篇:网页设计:让你的页面动起来