悬停时的 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 来检测何时单击固定按钮并从 #slidingBox 中删除类以使其保持展开：

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

.no-pin类是给侧边栏菜单负左边距的原因。

若要使固定菜单和内容并排显示，可以使用弹性框样式。确保设置显示：灵活;用于侧边栏和主要内容区域周围的容器。

这是一个小提琴