CSS3 Ribbon Menu: A CSS3 Tutorial for Creating Animated Menus

By Michael Rohde

Today I am presenting another CSS3 tutorial for creating animated menus. I found the sample code and demo on Jack Moore’s site (http://jacklmoore.com/notes/css3-ribbon-menu/). The code provides a base from which you can customize your own animated menu using CSS3.

As per usual, the caveat must be stated that this CSS3 technique does not work in Microsoft’s Internet Explorer. However, besides the hover state, the rest of the code should work just fine in all browsers.

Let’s get started with the HTML:

 

<div class='ribbon'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>About</span></a>
    <a href='#'><span>Services</span></a>
    <a href='#'><span>Contact</span></a>
</div>

 

You’ll note that the HTML is very basic and simple as it should be. One of the advantages of coding in CSS3 is that the heavy lifting is done in the .css file and not in the .htm file. The HTML does create a link for each item on the menu by using href tags. You’ll want to replace the # with your own URLs or anchors.

Now for the CSS3. In Jack’s code, he starts by defining how the forked ends and folds are created with pseudo-elements:

 

.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;
}

 

In this code, the pseudo-elements are .ribbon:after and .ribbon:before. The first block of code defines the margins, the content, the float and the border. The second and third block defines the ribbon’s right and left border’s as being transparent.

Now for the links:

 

.ribbon a:link, .ribbon a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}

 

This block of code defines the color, text decoration, the alignment, it’s size and does not allow any overflow to be seen.

And now for the animated folds. This includes vendor-specific code for the different browsers. This is the meat of the code:

 

.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;
}

 

In order to vertically center text inside of an element, you should set the line-height to be the desired height of the element and remove any vertical padding. This keeps the height fixed and the text centered even if you decide to change the font attributes.

By providing a larger top margin, you are giving the span space to be animated while staying within the anchor element. When you define the span as having a relative position, it provides reference for the pseudo-elements (before and after) that are absolutely positioned.

The vendor-specific code refers to the transitions. These are specific to each browser and are not yet universal.

 
.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;
}

 

The folded edges are created when the visitor hovers over a link. This is done through the before and after pseudo-elements. They are usually hidden due to the overflow attribute given to the anchor and are absolutely positioned underneath the span element. In Jack’s code, the pseudo-elements contain only a bottom border and a left or right border. The borders are as thick as they are long and are next to each other. This creates two triangles that you can apply color to.

Now that you have the basic code, you can customize it for your own site.

 

 

 



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date