JavaScript實現下拉菜單

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜單</title>
    <style type="text/css">
        body,ul,li{
            margin:0;
            padding:0;
            font-size:13px;
        }
        ul,li{
            list-style:none;
        }
        #divselect{
            width:186px;
            margin:80px auto;
            position:relative;
            z-index:10000;
        }
        #divselect cite{
            width:150px;
            height:24px;
            line-height:24px;
            display:block;
            color:#807a62;
            cursor:pointer;
            font-style:normal;
            padding-left:4px;
            padding-right:30px;
            border:1px solid #333333;
        }
        #divselect ul{
            width:184px;
            border:1px solid #333333;
            background-color:#ffffff;
            position:absolute;
            z-index:20000;
            margin-top:-1px;
            display:none;
        }
        #divselect ul li{
            height:24px;
            line-height:24px;
        }
        #divselect ul li a{
            display:block;
            height:24px;
            color:#333333;
            text-decoration:none;
            padding-left:10px;
            padding-right:10px;
        }
        /*插入一個三角符號*/
        cite:before{
            /*目的是撐開容器*/
            content: "";
            position: absolute;
            /*相對父容器定位*/
            right: 7px;
            bottom: 7px;
            /*寬高設爲0*/
            width:0;
            height: 0;
            border-width: 4px;
            border-style: solid;
            /*上左下右:表示上面是888顏色,其餘都是透明*/
            border-color: #888 transparent transparent transparent;
            /*CSS3屬性:0.5s是過過渡時間 , all:transition-property執行變換的屬性*/
            transition:all 0.5s;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -o-transition: all 0.5s;

            /*設置旋轉元素的基點位置*/
            transform-origin: 50% 25%;
            /*IE9*/
            -ms-transform-origin: 50% 25%;
            /*Safari Chrome*/
            -webkit-transform-origin: 50% 25%;
            /*Opera*/
            -o-transform-origin: 50% 25%;
            /*Firefox*/
            -moz-transform-origin: 50% 25%;
        }
        /*菜單打開時候的三角符號*/
        .open cite:before{
            transform: rotate(180deg);
            /*Safari Chrome*/
            -webkit-transform: rotate(180deg);
            /*Firefox*/
            -moz-transform: rotate(180deg);
            /*Opera*/
            -o-transform: rotate(180deg);
            /*IE9*/
            -ms-transform: rotate(180deg);
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var box=document.getElementById('divselect'),
                    title=box.getElementsByTagName('cite')[0],
                    menu=box.getElementsByTagName('ul')[0],
                    as=box.getElementsByTagName('a'),
                    index=-1;
            function resetStyle_a() {
                for (var i=0;i<as.length;i++){
                    as[i].style.background="#fff";
                }
            }
            function closeMenu() {
                box.className="";
                menu.className="";
                menu.style.display="none";
                index=-1;
                resetStyle_a();
            }
            function openMenu() {
                box.className = "open";
                menu.style.display = "block";
            }

            // 點擊三角時
            title.onclick=function(event){
                event=event||window.event;
                //stopPropagation符合W3C標準,不支持IE瀏覽器
                //cancelBubble支持IE,但是不符合W3C標準
                if (event.stopPropagation){
                    event.stopPropagation();
                }else {
                    event.cancelBubble=true;
                }
                // 執行腳本
                if (box.className == "open"){
                    closeMenu();
                }else{
                    openMenu();
                }
            }

            for (var i=0;i<as.length;i++){
                //鼠標劃過
                as[i].onmouseover=function () {
                    resetStyle_a();
                    this.style.background = "#ccc";
                    index=this.getAttribute("selectid")-1;
                },
                //點擊選項
                as[i].onclick=function () {
                    closeMenu();
                    title.innerHTML = this.innerHTML;
                },
                //鼠標移開
                as[i].onmouseout=function () {
                    resetStyle_a();
                    this.style.background = "#fff";
                    index=-1;
                }
            }

            document.onkeydown=function (event) {
                event=event||window.event;
                if (box.className=="open"){
                    event.preventDefault ? event.preventDefault() : event.returnValue = false;
                    if (event.keyCode==40){
                        //鍵盤按向下按鈕時
                        index++;
                        if (index>as.length-1){
                            index=0;
                        }
                        resetStyle_a();
                        as[index].style.background="#ccc";
                    }
                    else if (event.keyCode==38){
                        //鍵盤按向上按鈕時
                        index--;
                        if (index<0){
                            index=as.length-1;
                        }
                        resetStyle_a();
                        as[index].style.background="#ccc";
                    }
                    else  if (event.keyCode==13&&index!=-1){
                        //按enter鍵,並且選中內容的時候
                        title.innerHTML = as[index].innerHTML;
                        index=-1;
                        closeMenu();
                        resetStyle_a();
                    }
                }else {

                }
            }

            //ID 獲取DOM
            function getDOM(name){
                return document.getElementById(name);
            }
            //Tag 獲取DOM
            function getClass(name){
                return document.getElementsByTagName(name);
            }
            //點擊選中項時
            function setectProvice() {
                var li=getDOM("all").getElementsByTagName("li");
                for (var i=0;i<li.length;i++){
                    li[i].onclick=function(){
                        title.innerHTML=this.innerHTML;
                        close();
                    }
                }
            }

            document.onclick=function () {
                closeMenu();
            }
        }
    </script>
</head>
<body>
<div id="divselect">
    <cite>請選擇分類</cite>
    <ul id="all">
        <li id="li"><a href="javascript:;" selectid="1">ASP開發</a></li>
        <li><a href="javascript:;" selectid="2">.NET開發</a></li>
        <li><a href="javascript:;" selectid="3">PHP開發</a></li>
        <li><a href="javascript:;" selectid="4">Javascript開發</a></li>
        <li><a href="javascript:;" selectid="5">Java</a></li>
    </ul>
</div>
<script type="text/javascript">
    window.onblur = function() {
        document.title = '合';
    };
    window.onfocus = function() {
        document.title = "開";
    };
</script>
</body>
</html>
JavaScript實現下拉菜單

工作中用到的腳本合集

24-5-18 X

iOS Library not loaded: @rpath/libswiftCore.dylib

Charles從入門到精通

JavaScript實現下拉菜單

javaScript實現彈出層效果

iOS JSPatch熱更新之實戰演練

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結
