How To Create CSS3 Navigation Circles

In my travels across the internet I discover lots of cool ways to implement CSS3. Most recently, I found a site that shows a creative way to implement navigation through interactive circles. The navigation effect starts off appearing as a simple circled arrow. However, when the visitor mouses over the circle, it expands and a preview image appears in place of the arrow. The visitor can then click that circle to navigate to the desired page.

Here’s a demo  which was originally created by Mary Lou, a freelance web designer and developer with a passion for interaction design.

CSS3 Transitions

The basic principle behind the code is to create a bubble with a thumbnail image that takes advantage of CSS3 transitions. Let’s start by showing the HTML:

<div class=”cn-nav”>
<a href=”#” class=”cn-nav-prev”>
<span>Previous</span>
<div style=”background-image:url(../images/thumbs/1.jpg);”></div>
</a>
<a href=”#” class=”cn-nav-next”>
<span>Next</span>
<div style=”background-image:url(../images/thumbs/3.jpg);”></div>
</a>
</div>

Show Me the CSS3 Code

And now to dive into the CSS. The code assumes that you have a container from which to work within. The height and width is set to 70 pixels so that you have room in which to work:

.cn-nav > a{

position: absolute;

top: 0px;

height: 70px;

width: 70px;

}

a.cn-nav-prev{

left: 0px;

}

a.cn-nav-next{

right: 0px;

}

The next bit of code delves into the creation of the circle that will contain the arrows as a background image by using the radius property along with the transition property. To make the element look like a circle, Mary Lou set the border radius to half of its width and height. She then uses a negative margin to set the arrow image into the center of the link element. This snippet of code also contains the transition times used for the ease function:

.cn-nav a span{

width: 46px;

height: 46px;

display: block;

text-indent: -9000px;

-moz-border-radius: 23px;

-webkit-border-radius: 23px;

border-radius: 23px;

cursor: pointer;

opacity: 0.9;

position: absolute;

top: 50%;

left: 50%;

background-size: 17px 25px;

margin: -23px 0 0 -23px;

-webkit-transition: all 0.4s ease;

-moz-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

-ms-transition: all 0.4s ease;

transition: all 0.4s ease;

}

Background Images

And the span itself for the background image is coded as follows:

.cn-nav a.cn-nav-prev span{

background: #666 url(../images/prev.png) no-repeat center center;

}

.cn-nav a.cn-nav-next span{

background: #666 url(../images/next.png) no-repeat center center;

}

Moving forward, Mary Lou then explains that the div with the thumbnail will have an initial height and width of 0 pixels with an absolute position in the center of the link element. The border radius and margins will also be set to 0 to begin with. The background image should fill the entire element and therefore the background size should be set to 100% for both width and height. This next snippet of code also includes the easing function:

.cn-nav a div{

width: 0px;

height: 0px;

position: absolute;

top: 50%;

left: 50%;

overflow: hidden;

background-size: 100% 100%;

background-position: center center;

background-repeat: no-repeat;

margin: 0px;

-moz-border-radius: 0px;

-webkit-border-radius: 0px;

border-radius: 0px;

-webkit-transition: all 0.2s ease-out;

-moz-transition: all 0.2s ease-out;

-o-transition: all 0.2s ease-out;

-ms-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

}

Up next, Mary Lou explains that you have to set the elements for when the visitor hovers over the image. This is where the span increases to 100 pixels for both width and height and the negative margins now increase to 50 pixels. Correspondingly, the background image is also increased along with changing the background color and the opacity:

.cn-nav a:hover span{

width: 100px;

height: 100px;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

opacity: 0.6;

margin: -50px 0 0 -50px;

background-size: 22px 32px;

background-color:#a8872d;

}

There’s one more piece of code that you need to complete this CSS3 navigation style. Here, the thumbnail div element will expand to 90 pixels so that the span element now appears as a border to the thumbnail. The background size is also increased and the negative margins and the border radius is adjusted to half of the element’s width:

.cn-nav a:hover div{

width: 90px;

height: 90px;

background-size: 120% 120%;

margin: -45px 0 0 -45px;

-moz-border-radius: 45px;

-webkit-border-radius: 45px;

border-radius: 45px;

}

And that’s it. We give Mary Lou special thanks for coming up with this code.