右侧带有切换的水平菜单答案

【问题标题】：Horizontal Menu with toggle on the right side右侧带有切换的水平菜单
【发布时间】：2016-04-20 01:38:37
【问题描述】：

我在浏览 thenextweb 时看到右侧的社交图标水平菜单有一个切换按钮

有人知道它是怎么做的吗？

【问题讨论】：

看图无法判断它是如何实现的。从字面上看，这可以有无数种方法。
结合jquery和css来调整图标栏的右边距

【解决方案1】：

我制作了一个文本版本（不带图形）供您参考，因此您可以从那里开始。

$('#menu').click(function(){
	$('.nav-wrapper').toggleClass('active');
});

.nav-wrapper {
  list-style: none;
  float: right;
}

.nav-wrapper > li {
  float: left;
  overflow: hidden;
}

.nav {
  list-style: none;
  margin-right: -115px;
  transition: 0.3s;
}

.nav-wrapper.active .nav {
  margin-right: 0;
  transition: 0.3s;
}

.nav > li {
  float: left;
  width: 18px;
  margin: 0 5px;
  border: 1px solid red;
}

#menu::after {
  display: block;
  content: "OPEN";
  width: 60px;
  height: 20px;
  cursor: pointer;
}

.nav-wrapper.active > #menu::after {
  content: "CLOS"
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="nav-wrapper">
  <li>
    <ul id="nav-bar" class="nav">
      <li>L1</li>
      <li>L2</li>
      <li>L3</li>
      <li>L4</li>
      <li>L5</li>
      <li>L6</li>
    </ul>    
  </li>
  <li id="menu"><li>
</ul>

https://jsfiddle.net/zayzw6es/

【讨论】：

这正是我需要知道的（它是如何完成的），谢谢！