伸缩菜单

最新推荐文章于 2023-08-19 10:26:35 发布

Apress92

最新推荐文章于 2023-08-19 10:26:35 发布

阅读量487

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/bin1813/article/details/53513117

版权

javascript 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

<!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>

Apress92

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伸缩菜单

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; } #ul1 li{ width: 100px;
复制链接

扫一扫