水平菜单，右侧有切换功能

Question

我正在浏览下一个网页并看到右侧的社交图标水平菜单有一个切换按钮

有谁知道它是如何完成的？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

.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"
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/zayzw6es/