【CSS分享】自动隐藏左侧边栏ribbon，当鼠标移至左侧位置才显示

提前声明：本来非作者，是一位网友从Blue-topaz-examples示例库扒的代码

一、使用效果

1. 平时自动隐藏左侧边ribbon
   

   

   image2736×1722 64.8 KB

2. 当鼠标移至左侧位置才显示
   

   

   image2736×1718 77 KB

二、CSS代码

body.hide-titlebar-close-btn .file-tree-plugin-view .oz-nav-action-button {
  margin-left: 20px !important;
}

body.hide-titlebar-close-btn.view-button-front .workspace-leaf-content[data-mode='source'] .view-content .markdown-source-view:not(.is-live-preview)::before {
  left: 38px;
}

body.hide-titlebar-close-btn.is-hidden-frameless .titlebar-button.mod-logo {
  display: none;
}

body.hide-titlebar-close-btn.is-hidden-frameless .workspace-ribbon.mod-left .sidebar-toggle-button {
  padding-top: var(--size-4-2);
}

body .workspace-ribbon.mod-left:not(:hover)~.workspace-split .workspace-tabs.mod-top.mod-top-left-space .workspace-tab-header-container {
  margin-left: 30px;
  transition: all 350ms ease-in-out;
}

body .workspace-ribbon.mod-left:not(:hover):before,
body .workspace-ribbon.side-dock-ribbon.mod-left:not(:hover) {
  margin-left: -40px;
}

body .workspace-ribbon.side-dock-ribbon.mod-left .sidebar-toggle-button.mod-left,
body .workspace-ribbon.mod-left:before,
body .workspace-ribbon.side-dock-ribbon.mod-left,
body .workspace-ribbon.mod-left:hover~.workspace-split .workspace-tabs.mod-top .workspace-tab-header-container {
  transition: all 350ms ease-in-out;
}

body.hide-titlebar-close-btn .workspace-ribbon.side-dock-ribbon.mod-left .sidebar-toggle-button.mod-left {
  background: unset;
}


body:not(.background-settings-workplace-background-image) .workspace-tabs.mod-top {
  background: var(--background-secondary-alt);
}

body.hide-titlebar-close-btn .view-header {
  padding-left: 24px;
}

body.hide-titlebar-close-btn.view-button-front .workspace-leaf-content:is([data-mode="preview"], [data-mode="source"]) .view-header .view-actions>:is([aria-label^="该面板处于编辑视图中"], [aria-label^="Current view: editing"]) {
  left: 30px
}

body.hide-titlebar-close-btn.view-button-front .workspace-leaf-content[data-mode='preview'] .view-header .view-actions>:is([aria-label^="该面板处于阅读视图中"], [aria-label^="Current view: reading"]) {
  left: 30px;
}

非常感谢您！这个css样式我找了很久，全网搜不到。今天有幸看到，谢谢。非常感谢您。

不客气，因为我自己有这个需求，分享出来是希望可以帮到有相同需求的人，节省大家搜寻的时间。很高兴能帮到你。

可以问一下，您这个录制gif的软件叫什么吗？

我也来推荐一个gif制作工具 ，licecap 小巧好用，才几兆。可以录屏生成gif。可以找绿色版，免安装。

你这个是怎么弄的，我也不喜欢弹来弹去

各位大佬谁能够将minimal主题的代码扣下来，将ribbon放置在左下角，感激不尽

請問有法折衷嗎？ 左側欄還是會彈出來，只是鼠標必須放到按鈕位置xD

如果你是想自己改 CSS，我可以给你大概讲讲这块的结构，可能是你遇到问题的原因。

在这个区域一共有 5 个元素。

1. 左侧栏按钮①，它是透明背景的。
2. 左侧栏②
3. 左侧栏按钮①层级下的灰块③，它的位置基于左侧栏②，它的长宽可以自行设定，它的存在是为了填补标签栏④（灰色背景）和 Ob 窗口左边线之间距离（透明背景）。
4. 标签栏④
5. 主编辑区⑤

标签栏④和主编辑区⑤共同的宽度 + 左侧栏②宽度 = Ob窗口宽度。

我们的主要目标是增加主编辑区⑤的宽度。

为了达到主要目标，我们要移动左侧栏②的位置，让它移出窗口，从而减小占宽，这就是为什么这个值是负数 margin-left: -32px; /*左侧栏位置*/。

但是，改变左侧栏②的位置，标签栏④的宽度也会变宽，如果不改变左侧栏按钮①的位置，按钮就会和标签重叠。

灰块③的情况更为复杂，因为它的存在是为了填补标签栏④（灰色背景）和 Ob 窗口左边线之间距离（透明背景），所以既可以调整位置又可以调整大小，还可以用别的样式方案代替它原本的作用。

像楼主的代码，好像只改变了左侧栏②，按钮和标签栏都好好的，

其实不光改变了左侧栏②的位置，并且单独调整了标签栏④与 Ob 窗口左边线之间的距离，又选中灰块③移开后出现空白的区域，加上和标签栏一致的背景。

body:not(.background-settings-workplace-background-image) .workspace-tabs.mod-top {
  background: var(--background-secondary-alt);
}

我将这个背景改为红色，演示如下：

当楼主的代码鼠标悬停在左侧栏按钮①，左侧栏②整个恢复原来的位置，灰块③也恢复到原来位置，由于颜色相同，实现了平常和悬停时平滑的过渡。

请问这个插件是什么？

谢谢！！！！！

不完全一样。效果展示：

.workspace-ribbon {
  padding-left: 44px; /*左侧栏按钮与命令区间距*/
  padding-block: 0; /*贴底边*/
}
.workspace-ribbon.mod-left .side-dock-ribbon-action {
  margin: 7px 0 8px; /*左侧栏按钮与底边间距|设置、命令区按钮间距|整体与底边间距*/
}

.workspace-ribbon.mod-left {
  overflow: visible;
  position: absolute;
  display: flex;
  flex-direction: row;
  z-index: 17;
  bottom: 0; /*整体位置*/
  gap: 0; /*设置区与命令区间距*/
}
.side-dock-actions, .side-dock-settings {
  position: relative;
  display: flex;
  flex-direction: row;
  background: var(--background-secondary); /*设置、命令区背景颜色*/
  gap: var(--size-4-1); /*设置、命令区按钮间距*/
}

/*平时隐藏，悬停显示*/
.workspace-ribbon.mod-left:not(:hover) {opacity: 0; transition: var(--anim-duration-fast);}

.side-dock-settings {
  border-right: var(--size-2-1) solid var(--background-modifier-border); /*右边框粗细颜色等*/
  border-top-right-radius: var(--radius-m); /*右边框弧度*/
}

/*设置、命令区按钮阴影*/
:is(.side-dock-settings, .side-dock-actions) .clickable-icon:hover {background-color: transparent;}

太感谢了，效果很好

我估计是按照此贴修改了，也实现效果了，但我大部分时候还是开着左侧窗口的，最左侧的ribbon不显示，但留下一个白条。当鼠标移过去，就显示ribbon。
如果我现在想改回去，如何修改css？