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


Posted in HTML / CSS onMarch 17, 2020

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

PC端

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

移动端

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">
    <!-- 头部 -->
    <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左侧滑动拉伸导航内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
css3应用示例:新增的选择器
Mar 16 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 #HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 #HTML / CSS
html5默认气泡修改的代码详解
Mar 13 #HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 #HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 #HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 #HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 #HTML / CSS
You might like
PHP crypt()函数的用法讲解
2019/02/15 PHP
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
python监控文件并且发送告警邮件
2018/06/21 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
params有什么用
2016/03/01 面试题
分公司经理岗位职责
2013/11/11 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
寄语学生的话
2014/04/10 职场文书
合同协议书格式
2014/04/18 职场文书
团结演讲稿范文
2014/05/23 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
八一建军节慰问信
2015/02/14 职场文书
校运会宣传稿大全
2015/07/23 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android