I reckon towards the beginning of 2011 Ribbon Menu’s became really popular and since then I’ve stumbled across hundreds of websites that make use of them. It isn’t always the menu per say, and often used to represent the ul li structures of sidebars, but nevertheless, ribbon’s are popular and this post will assist you.
The combination of CSS3 transitions and CSS2 pseudo-elements will allow you to create an awesome ribbon menu, but please note that IE8 and IE9 don’t support CSS3 transitions so the hover states won’t be animated.
Right, let’s get to it:
First things first, the HTML:
The next thing we need to do is write some CSS to style the forked ends:
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #fff;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
Let’s setup the actual link styling:
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
And now the animated folds:
.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background, margin 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background, margin 0.2s; /* FF4+ */
-ms-transition: background, margin 0.2s; /* IE10 */
-o-transition: background-color, margin-top 0.2s; /* Opera 10.5+ */
transition: background, margin 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
And there we have it, an awesome ribbon menu with transition animation!
This tutorial was created by Jack Moore.
Recent Comments