JavaScript实现下拉菜单_transform-origin 模拟下拉菜单-CSDN博客

本文链接：https://blog.csdn.net/darongzi1314/article/details/52604947
<!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>