【30天30个小项目】纯css/html实现侧边导航栏

简介: 【30天30个小项目】纯css/html实现侧边导航栏

实现效果:



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>
目录
相关文章
|
8天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
18 0
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
3天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
6天前
|
资源调度 前端开发 JavaScript
Tailwind CSS如何在vue项目中使用
Tailwind CSS如何在vue项目中使用
25 8
|
11天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
12 0
|
27天前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
1月前
|
XML Java 数据格式
springboot 微服务项目如何集成 html 页面
springboot 微服务项目如何集成 html 页面
29 0
|
1月前
会员项目定价卡css3特效
会员项目定价卡css3特效
15 2
会员项目定价卡css3特效
|
1月前
使用html+css制作一个发光立方体特效
使用html+css制作一个发光立方体特效
20 2
使用html+css制作一个发光立方体特效