时间戳

首页 > 解决方案 > 悬停时的 CSS 过渡幻灯片菜单 - 固定功能

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

问题描述

通过简单地将 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 上移开，它就会重新隐藏起来……很公平，这就是我猜这种悬停在过渡上的工作原理。然而，我想在角落里放一个小针按钮，我可以点击它，然后保持菜单可见。此外，菜单当前显示在屏幕上的页面“上方” - 当“固定”时，我还希望调整下方页面的大小，以便在固定菜单旁边可以查看所有内容。

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

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

标签： csstransition

解决方案

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

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

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

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

这是一个小提琴

推荐阅读