CSS 悬停时转换幻灯片菜单 - 能够固定

Question

我通过简单地将 CSS 过渡应用到 div，从页面左侧创建了一个简单的滑出菜单。 div 有以下 CSS class:

#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 上移开，它就会迅速回到隐藏状态……很公平，我猜这就是悬停在过渡上的工作原理。但是，我想在角落里放一个小图钉按钮，我可以单击它，然后使菜单保持可见。此外，菜单当前显示 'over' 屏幕上的页面 - 当 'pinned' 我还希望调整下方页面的大小，以便在固定菜单旁边显示所有内容。

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

我知道有很多 different/better 方法可以完成我在这里所做的事情，所以任何其他指示都会有很大帮助。

Answer 1

您可以使用 jQuery 来检测图钉按钮何时被点击，并从 #slidingBox 中删除 class 以使其保持展开状态：

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

.no-pin class 使侧边栏菜单具有负左边距。

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

这是一个fiddle

CSS 悬停时转换幻灯片菜单 - 能够固定

CSS Transition Slide Menu on hover - ability to pin

css

transition