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

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

PC端

移动端

代码

!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">
        !-- 头部 -->
        div id="header">
            div class="dh_btn" onclick="openLeft_dh()">
    打开/div>
            div class="user_admin_btn">
    /div>
        /div>
        !-- 左侧导航 -->
        div id="left_dh">
    /div>
        !-- 半透明黑色背景 -->
        div id="black_bg" onclick="closeLeft_dh()">
    /div>
            !-- 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左侧滑动拉伸导航内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！