伸缩菜单

柔情只为你懂 2022-07-14 11:20 287阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #ul1 li{
                width: 100px;
                height:20px;
                line-height: 20px;
                text-align: center;
                position: relative;
                float: left;
                text-decoration: none;
                background-color: #9F3;
                border: 1px solid #660;
            }
            #ul1 li div{
                background-color: #ccc;
                overflow: hidden;
                position: absolute;
                top:20px;
                width: 100%;
                height: 0;
            }
    
        </style>
        <script src="move3.js"></script>
        <script>
    
            window.onload=function(){
                var oUl=document.getElementById('ul1');
                var aLi=oUl.getElementsByTagName('li');
                var i=0;
                for(i=0;i<aLi.length;i++){
                    aLi[i].onmouseover=function(){
                        var oDiv=this.getElementsByTagName('div')[0];
                        oDiv.style.height='auto';
                        var iHeight=oDiv.offsetHeight;
                        oDiv.style.height=0;
                        startMove(oDiv,{
      opacity:100,height:iHeight});
                    };
                    aLi[i].onmouseout=function(){
                        var oDiv=this.getElementsByTagName('div')[0];
                        startMove(oDiv,{
      opacity:0,height:0});
                    }
                }
            }
        </script>
    </head>
    <body>
    <ul id="ul1">
        <li>
            首页
            <div>
                asfsdf <br/>
                sfsd
                sdafasd <br/>
                sdfdf
            </div>
        </li>
        <li>
            产品
            <div>
                asfsdf <br/>
                sdfsdf <br/>
                sdfsdf <br/>
                sdfsdf <br/>
                sfsd
                sdafasd <br/>
                sdfdf
            </div>
        </li>
        <li>
            关于
            <div>
                asfsdf <br/>
                sfsd
                sdafasd <br/>
                sdfdf
            </div>
        </li>
    </ul>
    </body>
    </html>