悬停时的 CSS 过渡幻灯片菜单 - 固定功能

Question

我通过简单地将 CSS 转换应用于 div，从页面左侧创建了一个简单的滑出菜单。该 div 具有以下 CSS 类：

#slidingBox {
position: absolute;
width: 400px;
height: 100%;
background-color: #d9dada;
top: 0px;
left: 0px;
margin-left: -390px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
overflow-y: scroll;
}
     #slidingBox:hover {
         margin-left: 0px;
     }

它工作正常。我在一侧有 10px 的菜单，当我将鼠标悬停在它上面时，整个面板变得可见。但是，一旦我将鼠标从 DIV 上移开，它就会立即隐藏起来……很公平，我猜这就是这种悬停在过渡上的工作原理。然而，我想在角落里放一个小针按钮，我可以点击它，然后让菜单保持可见。此外，菜单当前显示在屏幕上的页面“上方” - 当“固定”时，我还希望调整下方页面的大小，以便在固定菜单旁边可以查看所有内容。

我可以坐下来玩一会儿，但是时间已经过去了，如果有人能指出我正确的方向，那将是一个很大的帮助！

我知道有许多不同/更好的方法来做我已经在这里做过的事情，所以任何其他的指针都会有很大的帮助。

Answer 1

您可以使用 jQuery 来检测 pin 按钮何时被单击并从 #slidingBox 中删除一个类以使其保持展开：

$('#pin-menu-button').click(function() {
  $('#slidingBox').toggleClass('no-pin');
});

.no-pin 类赋予侧边栏菜单负左边距。

要使固定菜单和内容并排显示，您可以使用 flexbox 样式。确保你设置了 display:flex;用于侧边栏和主要内容区域周围的容器。

这是fiddle