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

前端  /  管理员 发布于 7年前   195

本文介绍了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左侧滑动拉伸导航内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！


  • 上一条：
    前端实现打印图像功能
    下一条：
    详解nginx过滤url实现前台js的配置问题

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客