Question

所以我创建了一个我计划使用自己的功能区菜单的一部分。所以到目前为止它是这样的：

悬停之前：

悬停时：

基本上，我希望它能够显示我的社交图标，以及在我添加时可以使用其他横幅。

以下是我目前使用的代码：

<body>
    <ul class="social">
        <li class="ribbon" media="facebook"><a href="http://facebook.com"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
    </ul>

    <script src="https://use.fontawesome.com/c2f336433a.js"></script>
</body>

这是CSS：

@import 'reset';
@import 'mixins';

ul.social {
    position: absolute;
    z-index: 4;
    margin: -225px auto;
    list-style: none;
    right: 0;

    li.ribbon {
        float: right;
        cursor: pointer;
        position: relative;
        width: 75px;
        height: 250px;

        border: none;
        color: white;
        padding: 5px;

        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        @include transition(all .2s ease-in-out);
        @include filter(drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5)));

        span {
            line-height: 20px;
            font-size: 5em;
        }
    }
    li.ribbon:hover {
        margin-top: 70px;
        color: white;
    }
    li.ribbon:before {
        content: '';
        position: absolute;
        top: 100%; left: 0;
        width: 0; height: 0;

        border-top: 25px solid blue;
        border-right: 50px solid transparent;
    }
    li.ribbon:after {
        content: '';
        position: absolute;
        top: 100%; right: 0;
        width: 0; height: 0;

        border-top: 25px solid blue;
        border-left: 50px solid transparent;
    }

    li.ribbon[media="facebook"] {
        background: #3b5998;
        color: #1e2e4f;
        margin-right: 5px;
    }
    li.ribbon[media="facebook"]:before,
    li.ribbon[media="facebook"]:after {
        border-top-color: #3b5998;
    }
}

请注意，重置只是一个eric meyer重置，而mixins只是用于过渡等...

Answer 1

您无法看到图标的原因是因为225px上有ul的负余量。在悬停时，只有margin-top的{{1}}被设置为li，但70px仍有负余量，因此ul仍在li左右{1}}在视口上方。这意味着155px未定位（即具有静态定位）且位于a顶部附近的li仍然不可见。

您可以通过避开margin上的ul并仅移动li来解决此问题。我已经使用transform: translateY()来移动li，因为这比使用边距（需要重新绘制）更有利于性能。

我还添加了一些额外的属性，例如text-align，line-height等，以便更好看。

ul.social {
  position: absolute;
  z-index: 4;
  margin: 0px auto; /* modified */
  list-style: none;
  right: 0;
}
ul.social li.ribbon {
  float: right;
  cursor: pointer;
  position: relative;
  width: 75px;
  height: 100px; /* modified */
  border: none;
  color: white;
  padding: 5px;
  text-align: center; /* added */
  line-height: 100px; /* added, equal to height */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transform: translateY(-100%); /* added */
  transition: all .2s ease-in-out;
  -webkit-filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
}
ul.social li.ribbon span {
  line-height: 20px;
  font-size: 5em;
}
ul.social li.ribbon:hover {
  transform: translateY(0%); /* added */
  /* margin-top: 70px; removed for better performance */
}
ul.social li.ribbon:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-top: 25px solid blue;
  border-right: 50px solid transparent;
}
ul.social li.ribbon:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 0;
  height: 0;
  border-top: 25px solid blue;
  border-left: 50px solid transparent;
}
ul.social li.ribbon[media="facebook"] {
  background: #3b5998;
  color: #1e2e4f;
  margin-right: 5px;
}
ul.social li.ribbon[media="facebook"]:before,
ul.social li.ribbon[media="facebook"]:after {
  border-top-color: #3b5998;
}

/* added */
ul.social li.ribbon a {
  color: white;
}

<body>
  <ul class="social">
    <li class="ribbon" media="facebook"><a href="http://facebook.com"><i class="fa fa-facebook" aria-hidden="true"></i></a>
    </li>
  </ul>

  <script src="https://use.fontawesome.com/c2f336433a.js"></script>
</body>

CSS功能区＆＃34;菜单＆＃34;没有按照要求工作

1 个答案: