All posts in Code

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.

If you’ve ever built a website before you’ll more than likely know something about CSS, well at least I hope you do otherwise you might have been using tables ;) Naturally, when you make a change to the CSS files on your website, you need to refresh the browser to see the changes, right? Well, I’ve stumbled across something pretty cool, read on..

CSS Refresh is a really small and unobtrusive JavaScript file that monitors your CSS files, when you make a change, the JavaScript file automatically implements the changes and you need not refresh your browser – think of how much time that could save you! If I had a dollar for every time I’d pressed F5, I’d be writing this from my villa in France!

Getting started is really easy, you just need to follow 3 really easy steps which you find here: http://cssrefresh.frebsite.nl/#how

It’s a really useful little tool, give it a go!