完全收缩折叠的导航

css代码：

<style>
        * {
            margin: 0;
            padding: 0;
        }


        #s {
            width: 30px;
            height: 30px;
            position: relative;
            float: right;
            background-color: black;
            background-image: url(nav.png);
            background-repeat: no-repeat;
            background-size: 30px,30px;
            margin-top: 10px;
            margin-right: 10px;
            cursor: pointer;
        }

        .f {
            width: 160px;
            height: 250px;
            background-color: gray;
            float: right;
            position: relative;
            display: none;
            border: 1px solid white;
        }

        .s {
            height: 50px;
            line-height: 50px;
            color: white;
            text-align: center;
            position: relative;
            border-bottom: 1px solid white;
            cursor: pointer;
        }

        .d {
            color: white;
            background-color: gray;
            list-style-type: none;
            line-height: 50px;
            width: 160px;
            display: none;
            position: absolute;
            right: 161px;
            margin-top: -50px;
        }
    </style>

html代码：

<body>

    <div style="width: 100%; height: 50px; background-color: black; position: relative;">
        <div id="s">
        </div>
    </div>
    <div class="f" id="t">


        <div class="s">
            监测监控
            <ul class="d">
                <li>长虹电视</li>
                <li>联想电脑</li>
                <li>苹果手机</li>
                <li>海尔冰箱</li>
            </ul>
        </div>


        <div class="s">
            用户管理
            <ul class="d">
                <li>篮球</li>
                <li>足球</li>
                <li>排球</li>
            </ul>

        </div>


        <div class="s">
            系统设置
            <ul class="d">
                <li>轿车</li>
                <li>吉普车</li>
                <li>卡车</li>
                <li>自行车</li>
                <li>电动车</li>
            </ul>
        </div>


        <div class="s">
            数据查询
            <ul class="d">
                <li>可口可乐</li>
                <li>美年达</li>
            </ul>
        </div>


        <div class="s">
            帮助
            <ul class="d">
                <li>香蕉</li>
                <li>苹果</li>
                <li>橘子</li>
            </ul>
        </div>


    </div>


</body>

js代码：

<script>
    $('.f .s').hover(function () { $(this).children('ul').show(); }, function () { $(this).children('ul').hide(); });

    $('.f').hover(function () { $(this).show(); }, function () { $(this).hide(); });

    $('#s').click(function () { $('.f').show();});
</script>

 

posted @ 2017-09-26 15:48  游称  阅读(198)  评论(0)  编辑  收藏  举报