CODEWITHSUNDEEP
htmlcss
madcrazydrumma
madcrazydrumma

Reputation: 1897

CSS ribbon "menu" isn't working as desired

So I've created part of a ribbon menu I plan on using myself. So here is what it looks like so far:

Before hover:

Before hover

On hover:

On hover

Basically, I want it to show my social icon as well as being able to use my other banners when i add them in.

Here is the code that I am using so far:

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

Here is the 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;
    }
}

Note that the reset is just an eric meyer reset and the mixins are just for transitions etc...

Upvotes: 0

Views: 48

Answers (1)

Harry
Harry

Reputation: 89750

The reason why you weren't able to see the icon was because there was a negative margin of 225px on the ul. On hover, only the margin-top of the li was being set to 70px but the ul still has the negative margin, so the li is still around 155px above the viewport. This means that the a which is not positioned (that is, has static positioning) and is near the top of the li is still not visible.

You can correct this by avoiding the margin on the ul and just moving the li around. I've used the transform: translateY() to move the li around because that is better for performance than using margins (which need repainting).

I have also added some extra properties like text-align, line-height etc for a better look.

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>

Upvotes: 1

Related Questions