实现效果:
css代码：
*{margin: 0px;padding: 0px;}#box{position: absolute;height: 300px;width: 150px;background-color: antiquewhite;right: -150px;text-align: center;position: fixed;transition: 0.75s;border-radius: 20px;}#box2{width: 500px;}ul li{list-style: none;overflow: hidden;}ul li a{position: relative;text-decoration: none;/* background-color: aqua; */display: block;line-height: 30px;}ul li a:hover{background-color:lightsteelblue;}#chb{display: none;}label{position: absolute;position: fixed;right: 150px;width: 50px;height: 50px;background-color: burlywood;border-radius: 15px;display: inline-block;color:orangered ;font-size: large;text-align: center;line-height: 45px;cursor: pointer;}#chb:checked ~ #box{right: 0px;}
html代码：
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="daohang.css"></head><body><input type="checkbox" id="chb"><label for="chb">菜单</label><div id="box"><ul><li><a href="#">首页</a></li><li><a href="#">用户管理</a></li><li><a href="#">用户配置</a></li><li><a href="#">内容</a></li><li><a href="#">功能配置</a></li><li><a href="#">管理员</a></li></ul></div><div id="box2"><p>CSDN 技术社区CSDN APP：开发者专属移动APP，提供最新技术资讯、开发知识，助力开发者学习和成长，让技术交流更简单。 [1] CSDN Blog：致力于为开发者打造专业技术写作、分享与交流平台，为技术人提供全面的资讯与知识交流互动。 [1] CSDN技术论坛：全力为IT开发者打造分享技术心得、讨论技术话题的信息平台。 [1] CSDN资源下载中心：为IT专业人士提供丰富全面、专业的技术资料分享、交流与下载服务。 [1] CSDN新媒体矩阵涵盖CSDN资讯、AI科技大本营、区块链大本营、GitChat、GitChat精品课、程序人生、人工智能头条、Python大本营、CSDN学院等，覆盖各个专业技术领域，为IT开发者和从业人员提供资讯、学习、交流、互动和分享平台。 [1] CSDN学院CSDN学院是CSDN旗下的在线学习平台，集合了各领域资深技术专家，为广大学员提供优质的在线课程及技术直 播。同时利用互联网优势，精心推出了人工智能、区块链、Python全栈、Web全栈、大数据等实训班，帮助学员系 统提升专业技能。 [1] 覆盖领域：人工智能、大数据、区块链、数据库、大学课程、认证考试、系统/网络、游戏开发、Web开发、移动开发 [1] GitChat作为 IT 领域 UGC 内容付费平台，GitChat 成功为开发者和互联网从业者打造了一个高品质的内容社区。 通 过将用户的专业知识转化为优质内容，平台为学习者提供了丰富而专业的学习选择；同时也通过收益激励方式，让更 多内容创作者可持续地输出自己的知识。 [1] 高校俱乐部CSDN高校俱乐部是由中国专业的IT社区CSDN发起，由全国各高校在校生代表自发加入的IT技术学习型组织。CSDN由此搭建起行业与校园之间的桥梁，为各俱乐部提供IT行业资讯、技术学习、专家交流、技术竞赛、实习就业等服务 [1] 行业研究成果《中国人工智能产业路线图》、《AI技术人才成长路线图》 [1] 最新技术和产业路线图，时时维护，随时更新，动态开放。《CSDN区块链开发者报告》 [1] 聚焦区块链技术扫描、公链选择指南与行业应用开发实战《中国开发者调查报告》 [1] 自首次发布，每年末定期推出。调查报告，持续、全面和深入地反映了中国开发者社群自身状况、各项技术、工具、产品的使用状况和发展趋势，是完整准确了解中国开发者市场的重要参考资料。工具赋能编辑 播报AI社区——在线实验平台平台定位 [1] 为AI爱好者提供一站式从入门到熟练运用到工作中的学习平台 [1] 提供拟真实验环境，让学员学习后直接具备在公司真实线上环境完成分配的工作内容能力 [1] 全面提升学员基础能力+编码能力+实战能力，一次补齐后续工作中所有短板 [1] 平台特色 [1] 一站式AI学习平台，提供常用AI数据集、个人云存储、模型训练、结果导出功能 [1] Web Shell全拟真生产环境，真实体验公司线上实际生产流程，学习和实践高度结合 [1] 多环境快速切换，搭配高配置GPU，快速学习、实践AI课程 [1] 在线答题巩固AI基础能力，在线编程提升代码编写能力 [1] 职业赋能编辑 播报人力资源服务： 科锐福克斯专注于互联网与高科技领域的猎头公司，提供专业人才、中高级人才的寻聘服务（猎头），帮助企业找到关键人才，实现发展战略。 [1] 服务领域 [1] 紧跟新兴科技领域，涵盖人工智能（AI）、区块链（Blockchain）、增强现实（AR）等。 [1] 公司大事记编辑 播报05月CSDN总部落户长沙 共建中国开发者产业中心城市 [2] 08月推出高校合作平台-CSDN教育 [15] 09月推出代码代码托管平台-GitCode [15] 10月举办长沙·中国1024程序员节 [15] 09月 举办 AI开发者大会（AI ProCon ） [3] 11月 举办中国AI开发者大会 [4] 06月 举办以太坊技术及应用大会 [5] 03月举办中国区块链技术及应用峰会(BTA)·北京 [6] 01月举办AI生态赋能“论坛暨CSDN AI新战略发布会”，战略升级AI社区 [7] 07月 承办首届中国人工智能大会CCAI [8] CSDN新界面CSDN新界面(7张)4月CSDN官网界面改版,界面更加清爽 [9] 10月CSDN举办首届中国移动开发者大会06月CSDN 注册会员突破1500万06月CSDN创建TUP品牌，举办首期技术沙龙05月CSDN独立承办第二届中国云计算大会04月CSDN成立江苏乐知信息技术有限公司01月CSDN收购JavaEye程序员深度交流社区10月CSDN收购Unix-Center开源社区06月CSDN 注册会员突破1000万04月举办第三中国软件技术英雄大会合作成立睿智汇海，专注于.NET线下培训推出线下俱乐部--程序员俱乐部02月推出高端用户专属SNS社区--CTO俱乐部12月CSDN 注册会员突破500万11月举办第二届全球软件2.0 技术大会10月CSDN收购时光猎人咨询有限公司发展专业IT人才业务09月举办第二届中国软件技术英雄大会上海分站08月推出基于CSDN会员的SNS服务--个人空间04月举办第二届中国软件技术英雄大会11月CSDN 联合CMP 举办首届全球软件2.0 技术大会10月乐知IT 大学堂）上线08月CSDN 注册会员突破200万04月CSDN 举办首届中国软件技术英雄大会03月与著名JAVA 专家联合成立传智播客教育培训有限公司10月CSDN 技术交易平台上线07月当选 年度Red Herring“亚洲百强企业”01月Gobi 基金注资，成立世纪乐知网络技术有限公司12月荣获中国互联网协会度“创新互联网企业”12月 年“中国BBS 社区100 强”评选，CSDN名列IT类榜首09月CSDN 人才服务平台上线05月CSDN 网站全面改版，网站注册会员突破80万在国内率先推出专业博客服务06月与电子工业出版社联合成立博文视点，专注专业图书出版2000年10月创办中国第一份面向I T 专业开发人员的杂志《程序员》1999年12月推出独具特色的IT专业积分制论坛</p></div></body></html>
