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:
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...
Aucun commentaire:
Enregistrer un commentaire