当前位置:Web前端 > > 正文

html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)

时间:2021-10-12 00:29:25类别:Web前端

html导航条下拉菜单代码

Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码

本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,分享给大家,具体如下:

PC端

html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)

移动端

html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)

代码

  • <!DOCTYPE html>
    <html>
    <head>
        <title>左侧导航</title>
        <meta charset="utf-8">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
        <style>
            *{
                margin:0;
                padding:0;
            }
    
            #header{
                width: 100%;
                height: 60px;
                background: #fff;
                position: fixed;
                top: 0;
            }
    
            #header .dh_btn{
                width: 60px;
                height: 60px;
                background: #f00;
                float: left;
                cursor: pointer;
                line-height: 60px;
                text-align: center;
            }
    
            #header .user_admin_btn{
                width: calc(100% - 60px);
                height: 60px;
                background: pink;
                float: right;
            }
    
            #left_dh{
                width: 0;
                height: 100%;
                background: #39f;
                display: block;
                position: fixed;
                left: 0;
            }
    
            #black_bg{
                width: 100%;
                height: 100%;
                position: fixed;
                background: rgba(0,0,0,0.5);
                z-index: -999999;
                display: none;
            }
        </style>
    </head>
    <body bgcolor="#eee">
        <!-- 头部 -->
        <li id="header">
            <li class="dh_btn" onclick="openLeft_dh()">打开</li>
            <li class="user_admin_btn"></li>
        </li>
    
        <!-- 左侧导航 -->
        <li id="left_dh"></li>
    
        <!-- 半透明黑色背景 -->
        <li id="black_bg" onclick="closeLeft_dh()"></li>
        
        <!-- jquery展开导航 -->
        <script> 
            function openLeft_dh() {
                $("#left_dh").css({"width":"180px","transition":"0.3s"});
                $("#black_bg").css("display","block");
            }
    
            function closeLeft_dh() {
                $("#left_dh").css({"width":"0","transition":"0.3s"});
                $("#black_bg").css("display","none");
            }
        </script>
    </body>
    </html>
    
  • 到此这篇关于Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码的文章就介绍到这了,更多相关Htm左侧滑动拉伸导航内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!

    上一篇下一篇

    猜您喜欢

    热门推荐