html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
类别:Web前端 浏览量:2511
时间:2021-10-12 00:29:25 html导航条下拉菜单代码
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码本文介绍了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"> <!-- 头部 --> <li id="header"> <li class="dh_btn" onclick="openLeft_dh()">打开</li> <li class="user_admin_btn"></li> </li> <!-- 左侧导航 --> <li id="left_dh"></li> <!-- 半透明黑色背景 --> <li id="black_bg" onclick="closeLeft_dh()"></li> <!-- 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左侧滑动拉伸导航内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- vscode快速生成html框架(VSCode 自定义html5模板的实现)
- html5 布局设计(Html5导航栏吸顶方案原理与对比实现)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- html5定位地理位置(Html5获取高德地图定位天气的方法)
- html5长按动画效果(HTML5自定义元素播放焦点图动画的实现)
- dedecms内容页代码(DEDECMS生成HTML时提示 DedeTag Engine Create File False的解决方法)
- html5应用的几个建议
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
- nginx更改html内容(apache与iis下让html格式的页面也同样具有shtml的动态解析)
- html5自动轮播图代码(HTML5播放实现rtmp流直播)
- HTML5面试题
- ih5如何点击按钮跳转至网页(HTML5跳转小程序wx-open-launch-weapp的示例代码)
- html5游戏新手引导开发(使用数据结构给女朋友写个Html5走迷宫游戏)
- html5input标签的默认属性(移动端HTML5 input常见问题小结)
- html5中datalist标签
- react代码展示(教你如何从 html 实现一个 react)
- 以后显卡多了一个新选择,N卡和A卡外又多了个I卡(以后显卡多了一个新选择)
- 读卖乐园的彩灯(读卖乐园的彩灯)
- 新疆80后在淘宝卖干果 以前是 不务正业 如今帮乡亲致富(新疆80后在淘宝卖干果)
- 弄清楚了销 售 买 卖这四个字,母婴生意做起来就没那么难了(弄清楚了销售买)
- 数读 买首饰金是 投资黄金 吗 买金容易卖金难(数读买首饰金是)
- 销 售 买 卖 你真的了解这四个字了吗(销售买)
热门推荐
- 云服务器和普通服务器有什么区别(云服务器是什么?云服务器是如何工作的?)
- mysql substr函数的用法(MySQL切分函数substring的具体使用)
- php字符串教程学习(php学习笔记之字符串常见操作总结)
- python集合类(Python数据类型之Set集合实例详解)
- python代码词频分析(python实现词法分析器)
- php单例模式教程学习(PHP下用Swoole实现Actor并发模型的方法)
- python设置微信(利用python实现在微信群刷屏的方法)
- 腾讯云服务器怎么安装win7(腾讯云主机上使用Windows系统时的激活与更新操作教程)
- 微信小程序签名怎么操作(微信小程序实现简单手写签名组件的方法实例)
- dedecms安装使用教程(网站子目录安装dedecms导致网页布局混乱的解决方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9