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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 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投票程序源码
2007/03/11 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
django允许外部访问的实例讲解
2018/05/14 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
python 字典访问的三种方法小结
2019/12/05 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
Django视图、传参和forms验证操作
2020/07/15 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
python try...finally...的实现方法
2020/11/25 Python
策划助理岗位职责
2013/11/18 职场文书
暑期实践思想汇报
2014/01/06 职场文书
建筑工地标语
2014/06/18 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
补充协议书
2015/01/28 职场文书
离婚起诉状范本
2015/05/19 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js