html - 水平弹出菜单 - 隐藏选项

Question

我需要为按钮创建简单的水平(向左)弹出菜单。我准备了这个DEMO .

.menu {
  position: absolute;
  right: 0;
  height: 50px;
  width: 50px;
  color: white;
}
.menu li {
  pointer-events: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  list-style: none;
  line-height: 100%;
  transform: translateZ(0);
}
.menu a {
  pointer-events: auto;
  position: relative;
  display: block;
  min-width: 5em;
  margin-bottom: .4em;
  padding: .4em;
  line-height: 100%;
  font-size: 16px;
  text-decoration: none;
  color: white;
  transition: background 0.3s;
}
.menu a:active, .menu a:focus {
  background: #B44659;
}
.menu i {
  display: block;
  margin-bottom: .2em;
  font-size: 2em;
}
.menu span {
  font-size: .625em;
  font-family: sans-serif;
  text-transform: uppercase;
}
.menu li:hover ul {
  transform: translateX(0);
  background: #B44659;
}
.menu > li {
  display: block;
}
.menu > li > a {
  background: #7D294E;
}
.menu > li:hover {
  z-index: 100;
}
.menu > li:hover a {
  background: #B44659;
}
.menu > li a:hover {
  background: #F56356;
}
.menu > li > a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 4px;
  opacity: 0;
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
  transition: opacity 0.5s;
}
.menu > li:hover a:after {
  opacity: 1;
}
.menu > li ul {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 100%;
  height: 100%;
  width: auto;
  white-space: nowrap;
  transform: translateX(100%);
  background: #B44659;
  transition: 0.5s transform;
}

<ul class="menu">
  <li>
    <a href="#">
      <span>ITEM 1</span>
    </a>
    <ul>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.1</span>
        </a>
      </li>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.2</span>
        </a>
      </li>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.3</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

当您将鼠标悬停在某个元素上时，选项会从右向左滑动。问题是隐藏它们 - 现在它们只是移回右边，但我想完全隐藏它们。是否可以使用纯 CSS 实现此目的？

Answer 1

您可以将overflow: hidden 设置到您的菜单。此外，您还需要设置更大的宽度，这样当您滑动菜单的其余部分时，它就不会溢出。

.visible-item{
  width: 40px;
  text-align: center;
}
.menu {
  position: absolute;
  right: 0;
  height: 30px;
  width: 50px;
  color: white;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}

.menu:hover{
  width: 400px;
}
.menu li {
  pointer-events: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  list-style: none;
  line-height: 100%;
  transform: translateZ(0);
}
.menu a {
  pointer-events: auto;
  position: relative;
  display: block;
  min-width: 5em;
  margin-bottom: .4em;
  padding: .4em;
  line-height: 100%;
  font-size: 16px;
  text-decoration: none;
  color: white;
  transition: background 0.3s;
}
.menu a:active, .menu a:focus {
  background: #B44659;
}
.menu i {
  display: block;
  margin-bottom: .2em;
  font-size: 2em;
}
.menu span {
  font-size: .625em;
  font-family: sans-serif;
  text-transform: uppercase;
}
.menu li:hover ul {
  transform: translateX(0);
  background: #B44659;
}
.menu > li {
  display: block;
}
.menu > li > a {
  background: #7D294E;
}
.menu > li:hover {
  z-index: 100;
}
.menu > li:hover a {
  background: #B44659;
}
.menu > li a:hover {
  background: #F56356;
}
.menu > li > a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 4px;
  opacity: 0;
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
  transition: opacity 0.5s;
}
.menu > li:hover a:after {
  opacity: 1;
}
.menu > li ul {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 100%;
  height: 100%;
  width: auto;
  white-space: nowrap;
  transform: translateX(100%);
  background: #B44659;
  transition: 0.5s transform;
}

<ul class="menu">
  <li>
    <a href="#" class="visible-item">
      <span>ITEM 1</span>
    </a>
    <ul>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.1</span>
        </a>
      </li>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.2</span>
        </a>
      </li>
      <li>
        <a href="https://google.co.uk/" target="_blank">
          <span>SUBITEM 1.3</span>
        </a>
      </li>
    </ul>
  </li>
</ul>