暂无标签

分享一个discuz下拉菜单的完整js代码

摘要 无意中发现的discuz论坛中那个“发布新贴”等下拉菜单很有点特色，自动选择向上或向下显示菜单内容，对避免被其它控件遮住也有很好的处理方法（iframe）。 现把整个代码提出来，只需将整个代码复制下来保存为html文件即可，所有需要的js都在其中了。你可以运

无意中发现的discuz论坛中那个“发布新贴”等下拉菜单很有点特色，自动选择向上或向下显示菜单内容，对避免被其它控件遮住也有很好的处理方法（iframe）。

现把整个代码提出来，只需将整个代码复制下来保存为html文件即可，所有需要的js都在其中了。你可以运用在你的网站中，这绝对是一个成熟的方法。

代码：

<!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">   
<head>   
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
    <meta http-equiv="Content-Language" content="zh-CN" />   
    <title>下拉菜单兼容版 </title>     
    <script language="JavaScript">    
    <!--   
var userAgent = navigator.userAgent.toLowerCase();   
var is_opera = userAgent.indexOf('opera') != -1 && opera.version();   
var is_ie = (userAgent.indexOf('msie') != -1 && !is_opera) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);   
function $(id) {return document.getElementById(id);}   
function isUndefined(variable) {return typeof variable == 'undefined' ? true : false;}   
function doane(event) {   
    e = event ? event : window.event;   
    if(is_ie) {   
        e.returnValue = false;   
        e.cancelBubble = true;   
    } else if(e) {   
        e.stopPropagation();   
        e.preventDefault();   
    }   
}   
var jsmenu = new Array();   
var ctrlobjclassName;   
jsmenu\['active'\] = new Array();   
jsmenu\['timer'\] = new Array();   
jsmenu\['iframe'\] = new Array();   
function initCtrl(ctrlobj, click, duration, timeout, layer) {   
    if(ctrlobj && !ctrlobj.initialized) {   
        ctrlobj.initialized = true;   
        ctrlobj.unselectable = true;   
        ctrlobj.outfunc = typeof ctrlobj.onmouseout == 'function' ? ctrlobj.onmouseout : null;   
        ctrlobj.onmouseout = function() {   
            if(this.outfunc) this.outfunc();   
            if(duration < 3) jsmenu\['timer'\]\[ctrlobj.id\] = setTimeout('hideMenu(' + layer + ')', timeout);   
        }   
        ctrlobj.overfunc = typeof ctrlobj.onmouseover == 'function' ? ctrlobj.onmouseover : null;   
        ctrlobj.onmouseover = function(e) {   
            doane(e);   
            if(this.overfunc) this.overfunc();   
            if(click) {   
                clearTimeout(jsmenu\['timer'\]\[this.id\]);   
            } else {   
                for(var id in jsmenu\['timer'\]) {   
                    if(jsmenu\['timer'\]\[id\]) clearTimeout(jsmenu\['timer'\]\[id\]);   
                }   
            }   
        }   
    }   
}   
function initMenu(ctrlid, menuobj, duration, timeout, layer, drag) {   
    if(menuobj && !menuobj.initialized) {   
        menuobj.initialized = true;   
        menuobj.ctrlkey = ctrlid;   
        menuobj.onclick = ebygum;   
        menuobj.style.position = 'absolute';   
        if(duration < 3) {   
            if(duration > 1) {   
                menuobj.onmouseover = function() {   
                    clearTimeout(jsmenu\['timer'\]\[ctrlid\]);   
                }   
            }   
            if(duration != 1) {   
                menuobj.onmouseout = function() {   
                    jsmenu\['timer'\]\[ctrlid\] = setTimeout('hideMenu(' + layer + ')', timeout);   
                }   
            }   
        }   
        menuobj.style.zIndex = 50;   
        if(is_ie) {   
            menuobj.style.filter += "progid:DXImageTransform.Microsoft.shadow(direction=135,color=#CCCCCC,strength=2)";   
        }   
        if(drag) {   
            menuobj.onmousedown = function(event) {try{menudrag(menuobj, event, 1);}catch(e){}};   
            menuobj.onmousemove = function(event) {try{menudrag(menuobj, event, 2);}catch(e){}};   
            menuobj.onmouseup = function(event) {try{menudrag(menuobj, event, 3);}catch(e){}};   
        }   
    }   
}   
var menudragstart = new Array();   
function menudrag(menuobj, e, op) {   
    if(op == 1) {   
        if(in_array(is_ie ? event.srcElement.tagName : e.target.tagName, \['TEXTAREA', 'INPUT', 'BUTTON', 'SELECT'\])) {   
            return;   
        }   
        menudragstart = is_ie ? \[event.clientX, event.clientY\] : \[e.clientX, e.clientY\];   
        menudragstart\[2\] = parseInt(menuobj.style.left);   
        menudragstart\[3\] = parseInt(menuobj.style.top);   
        doane(e);   
    } else if(op == 2 && menudragstart\[0\]) {   
        var menudragnow = is_ie ? \[event.clientX, event.clientY\] : \[e.clientX, e.clientY\];   
        menuobj.style.left = (menudragstart\[2\] + menudragnow\[0\] - menudragstart\[0\]) + 'px';   
        menuobj.style.top = (menudragstart\[3\] + menudragnow\[1\] - menudragstart\[1\]) + 'px';   
        doane(e);   
    } else if(op == 3) {   
        menudragstart = \[\];   
        doane(e);   
    }   
}   
function showMenu(ctrlid, click, offset, duration, timeout, layer, showid, maxh, drag) {   
    var ctrlobj = $(ctrlid);   
    if(!ctrlobj) return;   
    if(isUndefined(click)) click = false;   
    if(isUndefined(offset)) offset = 0;   
    if(isUndefined(duration)) duration = 2;   
    if(isUndefined(timeout)) timeout = 500;   
    if(isUndefined(layer)) layer = 0;   
    if(isUndefined(showid)) showid = ctrlid;   
    var showobj = $(showid);   
    var menuobj = $(showid + '_menu');   
    if(!showobj|| !menuobj) return;   
    if(isUndefined(maxh)) maxh = 400;   
    if(isUndefined(drag)) drag = false;   
    if(click && jsmenu\['active'\]\[layer\] == menuobj) {   
        hideMenu(layer);   
        return;   
    } else {   
        hideMenu(layer);   
    }   
    var len = jsmenu\['timer'\].length;   
    if(len > 0) {   
        for(var i=0; i<len; i++) {   
            if(jsmenu\['timer'\]\[i\]) clearTimeout(jsmenu\['timer'\]\[i\]);   
        }   
    }   
    initCtrl(ctrlobj, click, duration, timeout, layer);   
    ctrlobjclassName = ctrlobj.className;   
    ctrlobj.className += ' hover';   
    initMenu(ctrlid, menuobj, duration, timeout, layer, drag);   
    menuobj.style.display = '';   
    if(!is_opera) {   
        menuobj.style.clip = 'rect(auto, auto, auto, auto)';   
    }   
    setMenuPosition(showid, offset);   
    if(is_ie && is_ie < 7) {   
        if(!jsmenu\['iframe'\]\[layer\]) {   
            var iframe = document.createElement('iframe');   
            iframe.style.display = 'none';   
            iframe.style.position = 'absolute';   
            iframe.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';   
            $('append_parent') ? $('append_parent').appendChild(iframe) : menuobj.parentNode.appendChild(iframe);   
            jsmenu\['iframe'\]\[layer\] = iframe;   
        }   
        jsmenu\['iframe'\]\[layer\].style.top = menuobj.style.top;   
        jsmenu\['iframe'\]\[layer\].style.left = menuobj.style.left;   
        jsmenu\['iframe'\]\[layer\].style.width = menuobj.w;   
        jsmenu\['iframe'\]\[layer\].style.height = menuobj.h;   
        jsmenu\['iframe'\]\[layer\].style.display = 'block';   
    }   
    if(maxh && menuobj.scrollHeight > maxh) {   
        menuobj.style.height = maxh + 'px';   
        if(is_opera) {   
            menuobj.style.overflow = 'auto';   
        } else {   
            menuobj.style.overflowY = 'auto';   
        }   
    }   
    if(!duration) {   
        setTimeout('hideMenu(' + layer + ')', timeout);   
    }   
    jsmenu\['active'\]\[layer\] = menuobj;   
}   
function setMenuPosition(showid, offset) {   
    var showobj = $(showid);   
    var menuobj = $(showid + '_menu');   
    if(isUndefined(offset)) offset = 0;   
    if(showobj) {   
        showobj.pos = fetchOffset(showobj);   
        showobj.X = showobj.pos\['left'\];   
        showobj.Y = showobj.pos\['top'\];   
        showobj.w = showobj.offsetWidth;   
        showobj.h = showobj.offsetHeight;   
        menuobj.w = menuobj.offsetWidth;   
        menuobj.h = menuobj.offsetHeight;   
        if(offset < 3) {   
            menuobj.style.left = (showobj.X + menuobj.w > document.body.clientWidth) && (showobj.X + showobj.w - menuobj.w >= 0) ? showobj.X + showobj.w - menuobj.w + 'px' : showobj.X + 'px';   
            menuobj.style.top = offset == 1 ? showobj.Y + 'px' : (offset == 2 || ((showobj.Y + showobj.h + menuobj.h > document.documentElement.scrollTop + document.documentElement.clientHeight) && (showobj.Y - menuobj.h >= 0)) ? (showobj.Y - menuobj.h) + 'px' : showobj.Y + showobj.h + 'px');   
        } else if(offset == 3) {   
            menuobj.style.left = (document.body.clientWidth - menuobj.clientWidth) / 2 + document.body.scrollLeft + 'px';   
            menuobj.style.top = (document.body.clientHeight - menuobj.clientHeight) / 2 + document.body.scrollTop + 'px';   
        }   
        if(menuobj.style.clip && !is_opera) {   
            menuobj.style.clip = 'rect(auto, auto, auto, auto)';   
        }   
    }   
}   
function hideMenu(layer) {   
    if(isUndefined(layer)) layer = 0;   
    if(jsmenu\['active'\]\[layer\]) {   
        try {   
            $(jsmenu\['active'\]\[layer\].ctrlkey).className = ctrlobjclassName;   
        } catch(e) {}   
        clearTimeout(jsmenu\['timer'\]\[jsmenu\['active'\]\[layer\].ctrlkey\]);   
        jsmenu\['active'\]\[layer\].style.display = 'none';   
        if(is_ie && is_ie < 7 && jsmenu\['iframe'\]\[layer\]) {   
            jsmenu\['iframe'\]\[layer\].style.display = 'none';   
        }   
        jsmenu\['active'\]\[layer\] = null;   
    }   
}   
function fetchOffset(obj) {   
    var left_offset = obj.offsetLeft;   
    var top_offset = obj.offsetTop;   
    while((obj = obj.offsetParent) != null) {   
        left_offset += obj.offsetLeft;   
        top_offset += obj.offsetTop;   
    }   
    return { 'left' : left_offset, 'top' : top_offset };   
}   
function ebygum(eventobj) {   
    if(!eventobj || is_ie) {   
        window.event.cancelBubble = true;   
        return window.event;   
    } else {   
        if(eventobj.target.type == 'submit') {   
            eventobj.target.form.submit();   
        }   
        eventobj.stopPropagation();   
        return eventobj;   
    }   
}   
function menuoption_onclick_function(e) {   
    this.clickfunc();   
    hideMenu();   
}   
function menuoption_onclick_link(e) {   
    choose(e, this);   
}   
function menuoption_onmouseover(e) {   
    this.className = 'popupmenu_highlight';   
}   
function menuoption_onmouseout(e) {   
    this.className = 'popupmenu_option';   
}   
function choose(e, obj) {   
    var links = obj.getElementsByTagName('a');   
    if(links\[0\]) {   
        if(is_ie) {   
            links\[0\].click();   
            window.event.cancelBubble = true;   
        } else {   
            if(e.shiftKey) {   
                window.open(links\[0\].href);   
                e.stopPropagation();   
                e.preventDefault();   
            } else {   
                e.stopPropagation();   
                e.preventDefault();   
            }   
        }   
        hideMenu();   
    }   
}   
</script>   
<STYLE TYPE="text/css">    
* { word-wrap: break-word;  }   
body { background: #FFF; text-align: center;}   
body, td, input, textarea, select, button { color: #000; font: 12px/1.6em Helvetica, Arial, sans-serif; }   
body, ul { margin: 0; padding: 0; }   
div {width:100%;height:800px;padding-top:400px;text-align: center;}   
a:link,a:visited{float:left;display: block;color:#fff;height:28px;line-height:28px;width:120px;background:#990;border:solid  #CCC;border-width:3px 0;overflow:hidden;}   
a:hover{background: #396;color:#222;}   
.dropmenu {cursor: pointer;background: #393;}   
.popupmenu_popup { text-align: left; line-height: 1.4em; overflow: hidden; border: 1px solid #ccc; background: #FFF; }   
.headermenu_popup { width: 120px; }   
.headermenu_popup li { float: left; width: 114px;margin:0 3px; line-height: 24px; height: 24px; overflow: hidden;  }   
.headermenu_popup li a:link,.headermenu_popup li a:visited{display: block;text-align: center;color:#666;width:100%;background: #fff;border:0;}   
.headermenu_popup li a:hover {background: #eee;}   
</STYLE>   
</head>   
<body>   
<div>   
<a href="http://www.jcodecraeer.com" id="post" class="dropmenu" onmouseover="showMenu(this.id)">发表</a>   
<a href="http://www.jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0531/219.html" id="my" class="dropmenu" onmouseover="showMenu(this.id)">我的</a>   
<br>   
<br>   
<select name="" style="clear:left;float:left;">   
    <option value="" selected>这里是测试select会不会显示在上面   
    <option value="">不会   
</select>   
<ul class="popupmenu_popup headermenu_popup" id="post_menu" style="display: none">   
    <li><a href="#1">新话题</a></li>   
    <li><a href="#2">新投票</a></li>   
    <li><a href="#3">新文章</a></li>   
    <li><a href="#4">新商品</a></li>   
    <li><a href="#5">新活动</a></li>   
</ul>   
<ul class="popupmenu_popup headermenu_popup" id="my_menu" style="display: none">   
    <li><a href="#1">我的话题2</a></li>   
    <li><a href="#2">我的收藏2</a></li>   
    <li><a href="#3">我的订阅2</a></li>   
    <li><a href="#4">我的权限2</a></li>   
    <li><a href="#5">我的投票2</a></li>   
    <li><a href="#6">我的商品2</a></li>   
    <li><a href="#7">我的悬赏2</a></li>   
    <li><a href="#8">我的活动2</a></li>   
    <li><a href="#9">我的辩论2</a></li>   
</ul>   
</div>   
</body>   
</html>
泡在网上的日子
每天进步一点点
0

粉丝

0

关注

0

获赞

0

访问

推荐文章