Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020-03-28 07:30
701 查看
本文介绍了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"> <!-- 头部 --> <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左侧滑动拉伸导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- jQuery实现简单的滑动导航代码(移动端)
- 原生 js+css+html实现轮播图效果及左侧菜单栏效果
- jQuery实现的滑块滑动导航效果示例
- jQuery弹性滑动导航菜单实现思路及代码
- Jquery网页内滑动缓冲导航的实现代码
- jQuery弹性滑动导航菜单实现思路及代码
- CSS实现HTML背景图片拉伸铺满示例
- 基于HTML+CSS+JS实现增加删除修改tab导航特效代码
- jQuery+css实现的蓝色水平二级导航菜单效果代码
- 最常见的左侧分类菜单栏jQuery实现代码
- jQuery+CSS实现一个侧滑导航菜单代码
- html css js 实现Tab标签页示例代码
- html+css+javascript实现列表循环滚动示例代码
- HTMl+CSS+JQuery实现简单的图片滑动切换
- jQuery+css实现的蓝色水平二级导航菜单效果代码
- html、css和jquery相结合实现简单的进度条效果实例代码
- html、css和jquery相结合实现简单的进度条效果实例代码
- css实现文字层浮在图片之上示例代码
- jquery验证表单的js代码(HTML+CSS+PHP代码部分省略)
- JQuery实现表格中相同单元格合并示例代码