如何实现默认显线条、悬浮出文字的交互式网站侧边导航

一、CSS代码修改 #

直接替换你原有代码中#mySidenav相关的CSS部分即可，其余位置配置、移动端适配、滚动属性的代码可保持不变：

/* 侧边导航链接基础样式 */
#mySidenav a {
  position: fixed;
  right: 0;
  padding: 10px 15px;
  width: fit-content;
  text-decoration: none;
  font-size: 15px;
  color: #ebb646;
  z-index: 7990;
  transition: transform 0.2s ease;
  /* 默认仅露出右侧线条区域，文字完全隐藏在视口外 */
  transform: translateX(calc(100% - 4px));
}

/* 右侧固定显示的线条，用伪元素实现 */
#mySidenav a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 4px; /* 可自行调整线条宽度 */
  background-color: #ebb646; /* 可自行调整线条颜色 */
}

/* hover状态：文字向左弹出显示 */
#mySidenav a:hover {
  transform: translateX(0);
}

/* 原有位置配置保持不变 */
#supload {
  top: 370px;
}
#sos {
  top: 400px;
}
#govote {
  top: 430px;
}
#solarstates {
  top: 460px;
}
#neuronnectar {
  top: 490px;
}
#rdoor {
  top: 520px;
}
#aboutme {
  top: 550px;
}

@media screen and (max-width:740px){
  #block-yui_3_17_2_1_1632919836480_17663{
  display:none;
}}

html {
    --scroll-behavior: smooth;
    scroll-behavior: smooth;
}

二、参数调整说明 #

• 调整线条宽度：修改#mySidenav a::after里的width值，同时同步修改#mySidenav a中transform: translateX(calc(100% - 4px))的4px为你设置的线条宽度即可
• 调整弹出动画速度：修改transition属性里的0.2s参数，数值越大动画速度越慢
• 调整线条颜色：直接修改#mySidenav a::after里的background-color值即可，可与文字颜色不同

三、原有脚本说明 #

你当前的头部、页脚注入的脚本和侧边导航效果无冲突，不需要修改，可直接保留使用。

内容的提问来源于stack exchange，提问作者Zack Logan