Html+Css+Jquery实现左侧滑动拉伸导航菜单栏
2020/3/17 14:01:18
本文主要是介绍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>
Author:TANKING
Web:likeyunba.com
Date:2020-03-17
WeChat:face6009
这篇关于Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)