固定位置菜单修改指导答案

【问题标题】：Fixed Position Menu modification guidance固定位置菜单修改指导
【发布时间】：2016-03-27 18:12:22
【问题描述】：

找到一个简单的棒状导航，将小菜单放在浏览器窗口的左侧。到目前为止没问题，但我不确定如何将其变成一个滑动菜单，该菜单会缩小为一个图标，就像您在网站模板主题颜色切换器上看到的那样。 {编辑 - 我一直在搜索谷歌，但没有使用我认为的正确术语。感谢任何关于我正在寻找什么的建议，以便解决这个问题并学习。}

类似于 Photoshop 中的这个快速草图。

小提琴是：JSfiddle

代码是：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
  #menu {
    position: fixed;
    left: 0;
    top: 50%;
    width: 8em;
    margin: -2.5em 0 0 0;
    z-index: 5;
    background: white;
    color: #4E4E4E;
    font-weight: bold;
    font-size: large;
    text-align: left;
    border: #4e4e4e;
    border-left: none;
    padding: 0.5em 0.5em 0.5em 2.5em;
    box-shadow: 0 1px 3px black;

  }
  #menu li { margin: 0 }
  #menu a { color: inherit }

</style>
</head>

<body>
<ul id=menu>
<li><a href="#L384">Section 1</a>
<li><a href="#details">Section 2</a>
<li><a href="#FAQ">Section 3</a>
</ul>

</body>
</html>

【问题讨论】：

我在您的问题中没有看到任何 javascript。如果您尝试使用 javascript 来实现您的目标，请发布您所拥有的。如果您还没有，请参考how to ask 帮助主题并修改您的问题。 SO 用于帮助开发人员解决代码中的特定问题。它不是免费的编码服务。
感谢您对我的问题的诚实和直率的回答，但也许您在其中读到了一些实际上并不在其中的内容。我相当肯定没有要求“免费编码服务”，但无论如何感谢您解释。重新阅读我的帖子，我意识到我应该非常明确地要求在特定方向上提供指导，以便我可以解决自己的问题，并会修改以添加此内容。

标签： javascript css menu show-hide

【解决方案1】：

最简单的方法是在菜单中添加一个带有伪元素 :after 的“正方形”，如下所示：

 #menu:after {
   content: '';
   position: absolute;
   top: 0;
   right: -40px;
   height: 40px;
   width: 40px;
   box-shadow: 0 1px 3px black;
   display: block;
   background-color: #fff;
 }
  #menu:before {
   content: '';
   position: absolute;
   z-index:1;
   top: 1px;
   right: -1px;
   height: 39px;
   width: 4px;
   display: block;
   background-color: #fff;
}

before 只是一个覆盖after 阴影的白框，因此它看起来与菜单相连，

然后将菜单定位在仅显示after 元素的窗口之外，并在单击时触发事件以将类添加到菜单以“显示”或“隐藏”。

$('#menu').on('click', function(){
    $('#menu').toggleClass('visible');
});

 #menu {
   position: fixed;
   left: -198px;
   top: 50%;
   width: 8em;
   margin: -2.5em 0 0 0;
   z-index: 5;
   background: white;
   color: #4E4E4E;
   font-weight: bold;
   font-size: large;
   text-align: left;
   border: #4e4e4e;
   border-left: none;
   padding: 0.5em 0.5em 0.5em 2.5em;
   box-shadow: 0 1px 3px black;
   transition: left 0.2s linear;
 }
 
 #menu li {
   margin: 0
 }
 
 #menu a {
   color: inherit
 }
 
 #menu:after {
   content: '';
   position: absolute;
   top: 0;
   right: -40px;
   height: 40px;
   width: 40px;
   box-shadow: 0 1px 3px black;
   display: block;
   background-color: #fff;
 }
  #menu:before {
   content: '';
   position: absolute;
   z-index:1;
   top: 1px;
   right: -1px;
   height: 39px;
   width: 4px;
   display: block;
   background-color: #fff;
 }
 .visible {
   left:0 !important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id=menu>
  <li><a href="#L384">Section 1</a>
    <li><a href="#details">Section 2</a>
      <li><a href="#FAQ">Section 3</a>
</ul>

JSFIDDLE

【讨论】：

啊！使用 after 元素是我正在寻找的线索，谢谢。我在正确表达我的谷歌搜索时遇到了问题，所以我一直在寻找与我需要的东西无关的答案。
这种迷你菜单有“行业”名称吗？固定菜单通常显示顶部和底部类型，浮动会带来一千个 css 浮动教程。大声笑
这些菜单可能有一些“行业”名称，但我无法帮助你，可能一些带有 jqueryui、bootstrap 的库和许多类似的库可能有这些类型的自定义菜单，但因为我获得报酬以制作我自己的设计/代码，我几乎从不使用它们。
好吧，再次感谢您。我本来可以要求的更多，但它符合要求。现在我正在享受修改和使用它的乐趣。会发现您的答案非常有用且有趣。