zoukankan      html  css  js  c++  java
  • 完全收缩折叠的导航

    css代码:

    <style>
            * {
                margin: 0;
                padding: 0;
            }
    
    
            #s {
                 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 {
                 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;
                 160px;
                display: none;
                position: absolute;
                right: 161px;
                margin-top: -50px;
            }
        </style>

    html代码:

    <body>
    
        <div style=" 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>
  • 相关阅读:
    java设计模式之单例模式
    nginx搭建反向代理服务器详解
    java利用MultipartRequest的getFileName方法不能得到原文件名问题
    window.onload 和doucument.ready执行顺序
    Access control allow origin 简单请求和复杂请求
    bootstrap栅格系统中同行div高度不一致的解决方法
    C# web Api ajax发送json对象到action中
    winserver 08 64位安装sql05 64位提示asp版本注册
    MVC 添加Area
    SQL添加维护 计划失败
  • 原文地址:https://www.cnblogs.com/wy1992/p/7597176.html
Copyright © 2011-2022 走看看