Build CSS animated circular navigation

Learn the techniques to create an animated circle menu item with a colour-coded fullscreen background


Learn the techniques to create an animated circle menu item with a colour-coded fullscreen background



Some types of navigation are meant to be highly noticeable. In the case of the inspiration for this tutorial, it is clear that the navigation’s purpose is to present itself in a way that directs the user to a specific part of the website.

This type of navigation is ideal for areas of a website that different types of visitor are accessing by making it clear where the information of interest can be found.

This approach to website design can be highly useful for projects that rely on making enquiries or sales conversions from users who have never previously visited the website. In these scenarios, users who don’t immediately see what they want are more likely to click on the back button, meaning that the website has failed to achieved its purpose.

The consequences of these ‘bounces’ can be costly in terms of lost opportunities to produce conversions and actual cash expenditure. The ability to present clear options doesn’t have to be restricted to multipage websites – the same concept can also be used to navigate to sections on the same page. Just use ID names for page content elements and refer to them in your navigation elements using # followed by the ID name to navigate to in the href attribute.


1. Define HTML

First create the main HTML content that contains the effect’s elements. We’ll use a <nav> element to contain the <a> links that become the menu items. The HTML links to CSS and some JavaScript for the visual effects.

2. Adapt navigation HTML

Create a file called ‘menu.js’. Our technique requires the HTML navigation items to have two span items – the first is used as the background circle and the second will contain visible content. Adapting navigation items with JavaScript means that the default HTML is good for SEO.

3. Define page basics

Create a new file called ‘styles.css’. Insert the initial element formatting CSS to define the page body and navigation. This example will have the navigation set to have child content placed in the middle and display as a block element to display at full screen width.

4. Navigation Items

Page navigation items are the <a> links inside the navigation container. These display with a red border and have a bigger font size. Navigation items will animate when hovered, therefore the transition property is used to define an animation transition for an opacity of one second for later CSS states.

5. Navigation interaction

The navigation items should fade to be semitransparent when the user hovers over an item that isn’t being selected. This is achieved in two stages – the first defines all navigations to have a quarter opacity, then the second stage selects the item to have full opacity.

nav:hover a{
opacity: 0.25;
nav:hover a:hover{
opacity: 1;

6. Background animation

The appearing circle animation used in the background is made from the first <span> item used as a square block refined into a circle using clip-path. Only the first <span> element has the properties applied to it to show as the animated circle when the user hovers over the nav item.

nav a span{
position: absolute;
display: table-cell;
vertical-align: middle;
text-align: center;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
nav a span:first-child{
background: #c00;
opacity: 0.5;
transition: -webkit-clip-path 1s, -moz-clip-path 1s, clip-path 1s, border-color 1s;, opacity 1s;
-webkit-clip-path: circle(0% at center);
-moz-clip-path: circle(0% at center);
clip-path: circle(0% at center);
nav a:hover span:first-child{
-webkit-clip-path: circle(30% at center);
-moz-clip-path: circle(50% at center);
clip-path: circle(50% at center);
border-color: rgba(0,0,0,0);

Warning: file_get_contents( failed to open stream: HTTP request failed! HTTP/1.0 500 Internal Server Error in /var/www/html/ on line 9