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的动画按钮代码教程
Nov 23 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 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
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php实现session共享的实例方法
2019/09/19 PHP
js的一些常用方法小结
2011/06/29 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
python 调用HBase的简单实例
2016/12/18 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
在python中安装basemap的教程
2018/09/20 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python获取整个网页源码的方法
2020/08/03 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
《我不是最弱小的》教学反思
2014/02/23 职场文书
会计简历自我评价
2015/03/10 职场文书
宿舍管理制度范本
2015/08/07 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
go类型转换及与C的类型转换方式
2021/05/05 Golang
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
Vue全局事件总线你了解吗
2022/02/24 Vue.js
MySQL数据库简介与基本操作
2022/05/30 MySQL