行业资讯 2025年08月6日
0 收藏 0 点赞 832 浏览 1945 个字
摘要 :

文章目录 前言 代码实现 效果演示 总结 前言 Java潘老师想给博客做个比较好看的文章目录,毕竟现在的文章目录样式效果很不友好,使用起来也不方便,并且在浏览器放大12……




  • 前言
  • 代码实现
  • 效果演示
  • 总结

前言

Java潘老师想给博客做个比较好看的文章目录,毕竟现在的文章目录样式效果很不友好,使用起来也不方便,并且在浏览器放大125%时,会自动默认展开导致文章内容被遮挡,非常影响阅读体验,于是决定让chatgpt帮我写一个贴边悬浮隐藏和展开的文章目录样式。

代码实现

一开始chatgpt做出的不是很好,也可能是部分要求描述不到位导致的,经过多次修改,基本达到的想要的效果,但是还是有部分Java潘老师自己就自己优化了,我们先直接上优化后的html代码。

<!DOCTYPE html>
<html lang=\"en\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    display: flex;
    height: 100vh;
    overflow: hidden;
  }
  
  .sidebar {
    position: fixed;
    width: 1px;
    height: 50%;
    background-color: #f0f0f0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
    transition: width 1s ease-in-out;
    top: 25%;
  }
  
  .sidebar.expanded {
    width: 250px;
  }
  
  .toggle-text {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
    background-color: #f0f0f0;
    padding: 5px 8px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
    transition: transform 1s ease-in-out;
    white-space: nowrap;
  }
  
  .sidebar.expanded .toggle-text {
    transform: translate(100%, -50%) rotate(0);
  }
  
  .menu {
    display: none;
    overflow-y: auto;
    max-height: 100%;
    transition: display 1s ease-in-out;
  }
  
  .sidebar.expanded .menu {
    display: block;
  }
  
  .menu ul {
    list-style: none;
    margin: 0;
    padding: 10px;
  }
  
  .menu ul li {
    margin: 10px 0;
  }
</style>
</head>
<body>
  <div class=\"sidebar\" id=\"sidebar\">
    <span class=\"toggle-text\" id=\"toggle-text\">文<br>章<br>目<br>录</span>
    <div class=\"menu\" id=\"menu\">
      <ul>
        <li>章节一</li>
        <li>章节二</li>
        <li>章节三</li>
        <!-- 添加更多章节 -->
      </ul>
    </div>
  </div>
  
  <script>
    const sidebar = document.getElementById(\'sidebar\');
    const toggletext = document.getElementById(\'toggle-text\');
    toggletext.addEventListener(\'click\', () => {
      sidebar.classList.toggle(\'expanded\');
    });
  </script>
</body></html>

以上代码你可以复制保存下来存放到html中,在浏览器中打开看下效果,这里使用的js实现的动态效果,你可以根据需要自己换成jquery也行。

效果演示

文章目录展开时效果,默认隐藏就是“文章目录”4个字贴在左边,整体都是垂直居中状态,当水平和竖直方向内容超出长度时,会自动显示滚动条,展开和隐藏都有1s的过渡动画,避免生硬。

左侧贴边悬浮隐藏展开文章目录css样式实现

总结

chatgpt写一些前端样式代码还是非常不错的,至少可以帮助实现从0-1,但是后续还是要自己二次优化更佳,以上就是左侧贴边悬浮隐藏展开文章目录css样式代码实现,希望对你有帮助。

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/8991.html

管理员

相关推荐
2025-08-06

文章目录 一、Reader 接口概述 1.1 什么是 Reader 接口? 1.2 Reader 与 InputStream 的区别 1.3 …

988
2025-08-06

文章目录 一、事件溯源 (一)核心概念 (二)Kafka与Golang的优势 (三)完整代码实现 二、命令…

465
2025-08-06

文章目录 一、证明GC期间执行native函数的线程仍在运行 二、native线程操作Java对象的影响及处理方…

348
2025-08-06

文章目录 一、事务基础概念 二、MyBatis事务管理机制 (一)JDBC原生事务管理(JdbcTransaction)…

456
2025-08-06

文章目录 一、SnowFlake算法核心原理 二、SnowFlake算法工作流程详解 三、SnowFlake算法的Java代码…

517
2025-08-06

文章目录 一、本地Jar包的加载操作 二、本地Class的加载方法 三、远程Jar包的加载方式 你知道Groo…

832
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号