构建一个粘贴在中心 html 上的右侧菜单

Posted 2023-03-06

【中文标题】构建一个粘贴在中心 html 上的右侧菜单

【英文标题】：building a right side menu that sticks on center html

【发布时间】：2017-06-09 01:58:09

【问题描述】：

首先我很抱歉我创建了这个新问题，但我一直在寻找这个停留在 html 页面右侧中心的菜单/导航。一个例子就像你可以在页面左侧看到的社交插件：http://www.addthis.com/social-buttons

我想用我自己的图像制作一个类似的图像，从而导致不同的 html 页面。希望有人能帮忙。

【问题讨论】：

您之前检查过 html 文档吗？如果您想学习如何构建它，那应该是首先要寻找的地方

【参考方案1】：

将此应用于菜单的容器 div：

.menu 
  position: fixed;
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);

【讨论】：

您可能想要添加 transform: translateY(-50%) 以便菜单居中。 （请注意，您需要浏览器支持的前缀）

@TinaFlorijn 不客气。我还编辑了答案，因为丹尼尔提出了一个很好的观点。如果它对您有用，请不要忘记将其标记为已接受:)

我没有足够的声誉来点赞:(

@TinaFlorijn 哦，没关系。我的意思是点击我的答案上的复选框，接受它:)

是的，谢谢！你还知道如何让一个div从页面右侧滑入html中心吗？

【参考方案2】：

您可以使用一些 CSS3 普通定位（如轴平移属性）来做到这一点，但我认为更好的做法是使用Flexbox。

只需在您的元素周围创建一个容器并为其赋予以下属性：

.container 
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

你的元素当然会在.container div 中。

这是加了前缀的版本，所以才这么长。