Question

我通过简单地将CSS Transition应用于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中删除一个类以使其扩展：

test_thing1.tavern.yaml

.no-pin类使侧栏菜单的左边距为负。

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

这里是fiddle

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

1 个答案: