实现效果:
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] 自2004年首次发布，每年末定期推出。调查报告，持续、全面和深入地反映了中国开发者社群自身状况、各项技术、工具、产品的使用状况和发展趋势，是完整准确了解中国开发者市场的重要参考资料。 工具赋能编辑 播报 AI社区——在线实验平台 平台定位 [1] 为AI爱好者提供一站式从入门到熟练运用到工作中的学习平台 [1] 提供拟真实验环境，让学员学习后直接具备在公司真实线上环境完成分配的工作内容能力 [1] 全面提升学员基础能力+编码能力+实战能力，一次补齐后续工作中所有短板 [1] 平台特色 [1] 一站式AI学习平台，提供常用AI数据集、个人云存储、模型训练、结果导出功能 [1] Web Shell全拟真生产环境，真实体验公司线上实际生产流程，学习和实践高度结合 [1] 多环境快速切换，搭配高配置GPU，快速学习、实践AI课程 [1] 在线答题巩固AI基础能力，在线编程提升代码编写能力 [1] 职业赋能编辑 播报 人力资源服务： 科锐福克斯 专注于互联网与高科技领域的猎头公司，提供专业人才、中高级人才的寻聘服务（猎头），帮助企业找到关键人才，实现发展战略。 [1] 服务领域 [1] 紧跟新兴科技领域，涵盖人工智能（AI）、区块链（Blockchain）、增强现实（AR）等。 [1] 公司大事记编辑 播报 2020年 05月CSDN总部落户长沙 共建中国开发者产业中心城市 [2] 08月推出高校合作平台-CSDN教育 [15] 09月推出代码代码托管平台-GitCode [15] 10月举办长沙·中国1024程序员节 [15] 2019年 09月 举办2019 AI开发者大会（AI ProCon 2019） [3] 2018年 11月 举办2018中国AI开发者大会 [4] 06月 举办以太坊技术及应用大会 [5] 03月举办中国区块链技术及应用峰会(BTA)·北京 [6] 01月举办AI生态赋能“2018论坛暨CSDN AI新战略发布会”，战略升级AI社区 [7] 2015年 07月 承办首届中国人工智能大会CCAI [8] 2013年 CSDN新界面 CSDN新界面(7张) 4月CSDN官网界面改版,界面更加清爽 [9] 2010年 10月CSDN举办首届中国移动开发者大会 06月CSDN 注册会员突破1500万 06月CSDN创建TUP品牌，举办首期技术沙龙 05月CSDN独立承办第二届中国云计算大会 04月CSDN成立江苏乐知信息技术有限公司 01月CSDN收购JavaEye程序员深度交流社区 2009年 10月CSDN收购Unix-Center开源社区 06月CSDN 注册会员突破1000万 04月举办第三中国软件技术英雄大会 合作成立睿智汇海，专注于.NET线下培训 推出线下俱乐部--程序员俱乐部 02月推出高端用户专属SNS社区--CTO俱乐部 2008年 12月CSDN 注册会员突破500万 11月举办第二届全球软件2.0 技术大会 10月CSDN收购时光猎人咨询有限公司发展专业IT人才业务 09月举办第二届中国软件技术英雄大会上海分站 08月推出基于CSDN会员的SNS服务--个人空间 04月举办第二届中国软件技术英雄大会 2007年 11月CSDN 联合CMP 举办首届全球软件2.0 技术大会 10月乐知IT 大学堂）上线 08月CSDN 注册会员突破200万 04月CSDN 举办首届中国软件技术英雄大会 03月与著名JAVA 专家联合成立传智播客教育培训有限公司 2006年 10月CSDN 技术交易平台上线 07月当选2006 年度Red Herring“亚洲百强企业” 01月Gobi 基金注资，成立世纪乐知网络技术有限公司 2005年 12月荣获中国互联网协会2005年度“创新互联网企业” 2004年 12月2004 年“中国BBS 社区100 强”评选，CSDN名列IT类榜首 09月CSDN 人才服务平台上线 05月CSDN 网站全面改版，网站注册会员突破80万 在国内率先推出专业博客服务 2003年 06月与电子工业出版社联合成立博文视点，专注专业图书出版 2000年 10月创办中国第一份面向I T 专业开发人员的杂志《程序员》 1999年 12月推出独具特色的IT专业积分制论坛</p> </div> </body> </html>
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)