文
章
目
录
章
目
录
前言
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的过渡动画，避免生硬。
总结
chatgpt写一些前端样式代码还是非常不错的，至少可以帮助实现从0-1，但是后续还是要自己二次优化更佳，以上就是左侧贴边悬浮隐藏展开文章目录css样式代码实现，希望对你有帮助。
