导航条伸缩

css

.box{
            width: 100%;
            height: 50px;
            background-color:gray;
            z-index: 9999;
        }
        ul{
            list-style: none;
            float: left;
        }
        ul li{
            display: inline;
            padding: 0 10px;
        }
        .icon{
            float: right;
            height: 30px;
            width: 60px;
            margin-top: 10px;
        }

html

<div class="box" id="box">
        <ul class="ul">
            <li><a href="">aaaaaaaaaaaaa</a></li>
            <li><a href="">aaaaaaaaaaaaa</a></li>
            <li><a href="">aaaaaaaaaaaaa</a></li>
        </ul>
        <img class="icon" id="icon" src="img/shrink.png" onclick="shrinking()" />
    </div>

js

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    function shrinking(){  
        var theWidth = ($(window).width());
        var subNav=document.getElementById("subNav"); 
        if( $(".ul").css("display")=='block' ){
            $("#box").animate({width:70},"slow");
            $(".ul").css('display','none');
            $(".icon").attr("src","img/shrink3.png");  /*更换图片*/
        }else{
            $("#box").animate({width:theWidth},"slow");
            $(".ul").css('display','block');
            $(".icon").attr("src","img/shrink.png");
        }   
    } 
</script>

运行结果：

点击图标收缩，变成下图

样式丑，有点辣眼睛，但是能学会这个功能就可以啦（手动笔芯