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中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
用canvas显示验证码的实现
Apr 10 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
Document 对象的常用方法
2009/07/31 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
jquery编写日期选择器
2017/03/16 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
在线课程:Skillshare
2019/04/02 全球购物
家庭困难证明
2014/10/12 职场文书
公司搬迁通知
2015/04/20 职场文书
航班延误投诉信
2015/07/02 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python