伸缩菜单的制作

HTML代码

<ul class="nav">
    <li><a class="on" href="#">首　　页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

js代码

<script>
        window.onload = function () {
            var oNav = document.getElementsByTagName('ul')[0];
            var aA = oNav.getElementsByTagName('a');
            for (var i = 0; i<aA.length; i++) {
                aA[i].onmouseover = function () {
                    if (this.className != "on") {
                        clearInterval(this.timer);
                        var This = this;
                        This.time = setInterval(function () {
                            This.style.width = This.offsetWidth + 8 + "px";
                            if (This.offsetWidth >= 120)
                                clearInterval(This.time);
                        }, 30)
                    }
                }
                aA[i].onmouseout = function () {
                    if (this.className != "on") {
                        clearInterval(this.time);
                        var This = this;
                        this.time = setInterval(function () {
                            This.style.width = This.offsetWidth - 8 + "px";
                            if (This.offsetWidth <= 80) {
                                This.style.width = '80px';
                                clearInterval(This.time);
                            }
                        }, 30)
                    }
                }
            }
        }

css样式

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 14px;
        }

        a {
            color: #333;
            text-decoration: none
        }

        .nav {
            list-style: none;
            height: 30px;
            border-bottom: 10px solid #F60;
            margin-top: 20px;
            padding-left: 50px;
        }

        .nav li {
            float: left
        }

        .nav li a {
            display: block;
            height: 30px;
            text-align: center;
            line-height: 30px;
            width: 80px;
            background: #efefef;
            margin-left: 1px;
        }

        .nav li a.on, .nav li a:hover {
            background: #F60;
            color: #fff;
        }
    </style>```

**效果展示**

![输入图片说明](https://static.oschina.net/uploads/img/201611/10094736_azbF.png "在这里输入图片标题")

转载于:https://my.oschina.net/u/2929937/blog/785427