Slick Circular CSS3 Navigation Menu Tutorial

In my last article 20 HTML5 and CSS3 menu tutorials. I provided you with a showcase of some of the top CSS3 menu tutorials. After writing that article I was inspired to create my own custom css3 menu tutorial. In this tutorial you will learn how to create a unique slick circular css3 navigation menu that has swift, colorful and stylish hover over effect. This effect uses both the new CSS3 properties, transition and transforms.

As you may know CSS3 is not supported by every browser, a majority of browsers use webkits for the new css3 properties to function. I have applied the webkits in this tutorial and as of now this navigation menu functions in: Mozilla Firefox, Opera, Safari, Chrome and IE 10. I didn’t check any older versions of browsers.

I would also recommend this tutorial for those who already have a moderate understanding of CSS and HTML.

Let’s get started…

What We Are Creating

Click the blue “live demo” link to see the circular CSS3 navigation menu in action! OR hit the download button if you’re in a rush.

Live Demo | Download

What do you think? Please leave your feedback in the comments section below.

The great thing about this menu is that not one single image is required other than my body background. I built this navigation with pure CSS and HTML so it’s fully scalable and can be adjusted for any dimensions.

Remember that you can apply your own custom effects to this navigation menu and make it your own. You don’t need to abide by my colors or shapes. You could start by adjusting the colors or maybe just having one hover over color, as opposed to five. You could even adjust the radius to use squares instead of circles. This CSS3 navigation menu is totally customizable for you.

If you’re interested in learning how to create this css3 navigation menu then keep reading..

The HTML Markup

First things first, the HTML markup.

 
<ul class="custom-menu"> 
	<li>	
		<a href="#">
			<div class="content"> 
			<h2 class="link">Home</h2>
			<h3 class="secondary">Where It Happens</h3> 
			</div>
		</a> 
	</li> 
</ul>

As you can see I’m using a very simple HTML markup. There is one difference with the HTML in the demo as opposed to HTML above. As I have used 5 menu buttons in the live demo. I copied the code above 5 times and placed it inside an unordered list (ul). I have also applied separate classes for each link tag (li), to create different hover over colors for the menus.

To save you the hassle, I have copied the exact HTML from the live demo.


<ul class="custom-menu"> 
	<li>	
		<a href="#">
			<div class="content"> 
			<h2 class="link">Home</h2>
			<h3 class="secondary">Where It Happens</h3> 
			</div>
		</a> 
	</li> 
	
	
<li class="custom-menu1">	
		<a href="#">
			<div class="content"> 
			<h2 class="link">About</h2>
			<h3 class="secondary">Who We Are..</h3> 
			</div>
		</a> 
	</li> 



<li class="custom-menu2">	
		<a href="#">
			<div class="content"> 
			<h2 class="link">Services</h2>
			<h3 class="secondary">We can fix you up..</h3> 
			</div>
		</a> 
	</li> 



<li class="custom-menu3">	
		<a href="#">
			<div class="content"> 
			<h2 class="link">Portfolio</h2>
			<h3 class="secondary">Our Work</h3> 
			</div>
		</a> 
	</li> 	


<li class="custom-menu4">	
		<a href="#">
			<div class="content"> 
			<h2 class="link">Contact</h2>
			<h3 class="secondary">Talk to us..</h3> 
			</div>
		</a> 
	</li> 	
	
	
</ul> 

Inside the link tags we have a div class labeled content which I have used for positioning the content. I have also used h2 for the main link and h3 for the hover over link.

The CSS

Below you can find the most important part of the tutorial, the CSS.

.custom-menu {
margin: 90px auto;  
height: 400px; 
width: 67%
} 


.custom-menu li { 
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
float: left;
background: #222;
margin-right: 4px;
border-radius: 110px; 

transition: 500ms; 
-webkit-transition: 500ms; /* Safari & Chrome */
-o-transition: 500ms; /* Opera */ 
-moz-transition: 500ms; /* Old firefox */

} 

.custom-menu li a { 
color: #fff;
text-align: center; 
text-decoration: none; 
} 


.custom-menu li:hover {

transform: rotate(360deg) scale(1.3,1.3);
-webkit-transform: rotate(360deg) scale(1.3,1.3); /* Safari & Chrome */
-o-transform: rotate(360deg) scale(1.3,1.3); /* Opera */ 
-moz-transform: rotate(360deg) scale(1.3,1.3); /* Old firefox */

transition: 500ms;  
-webkit-transition: 500ms; /* Safari & Chrome */
-o-transition: 500ms; /* Opera */ 
-moz-transition: 500ms; /* Old firefox */

background-color: #29abe2; 
border: 7px solid #fff; 
} 


.content { 
margin-top: 32px; 
} 


.link { 
font-size: 22px; 
color: #fff; 
}

.secondary { 
transform: translateY(-200px); 
-webkit-transform: translateY(-200px); /* Safari & Chrome */
-o-transform: translateY(-200px);  /* Opera */ 
-moz-transform: translateY(-200px);  /* Old firefox */

transition: 1s;
-webkit-transition: 1s; /* Safari & Chrome */
-o-transition: 1s; /* Opera */ 
-moz-transition: 1s; /* Old firefox */
} 


.custom-menu li:hover .link {
font-size: 30px; 
}

.custom-menu li:hover .secondary { 
transform: translateY(0px);
-webkit-transform: translateY(0px);  /* Safari & Chrome */
-o-transform: translateY(0px); /* Opera */ 
-moz-transform: translateY(0px);  /* Old firefox */
} 


/* purple */ 
li.custom-menu1:hover { 
background-color: purple;
}

/* dark blue */ 

li.custom-menu2:hover { 
background-color: #014B67;
} 


/* orange */ 
li.custom-menu3:hover {
background-color: orange; 
} 

/* red */ 
li.custom-menu4:hover { 
background-color: red; 
} 



It seems like a lot of code, but it really isn’t. Now I will be explaining the most important CSS properties so you can understand what is actually happening with the code.

First we have the .custom-menu I’ve used this to position the navigation menu in the center of the page by applying a width and a margin.

.custom-menu li This element plays an important role in this CSS3 navigation menu. I used this to create the shape and size of the element using a width and height of 200px and a border radius to create a circular shape. This is also where I have applied the transition of 500ms for the speed of the hover over effect.

.custom-menu li a This is where I positioned the link in the center of the circle. I also applied the white color and deleted the default underlining of the link.

.custom-menu li:hover This is where I applied the 360deg rotating transform and scaled the circle up by one size.

.content Use the content class to position the link. I used a margin of 32px to push it down a little.

.secondary This is where you would apply the styling for your h2 link and in my case the transform property to push the h2 element off the screen. This is also where I applied a transition speed of 1 second for the text appearing hover over (h3 tags).

.custom-menu li:hover .secondary Here I have used the “transform:translateY(0px)” which returns the h2 element to its original position but to the user it’s the result of the hover over effect, if that makes sense.

.link Here you can apply any text styles that you may want to use on your own menu. All I have added is a font size of 22px.

.custom-menu li:hover .link This is the hover over effect for the .link class. I have adjusted the font size of the menu to change to 30px when hovering over.

li.custom-menu1:hover And last but not least the color changes. I assigned each link (li) a class and created a hover element for each one which allowed me to choose different colors for the hover overs.

And that’s everything.. You are free to download the source files and do whatever you want with it. If you have any questions, please let me know. Enjoy and thanks for reading.

Sign On Up..

Enjoyed this tutorial? Please consider signing up to our newsletter by entering your email address in the form below. You will receive our recent blog updates, our exclusives, top resources, latest web trends and many awesome tutorials like this one!. We value your privacy and will not re-distribute your email address. Plus no spam!

Author: Jake

Share This Post On
  • Robert Khayat

    Hey Jake,

    Inspiring CSS3 tutorial, I really enjoyed seeing this!!

    After downloading the provided source it seems as if there is an extra tag causing to display on the design, otherwise this is very good css work! Thank you!!

    • http://www.develop-a-website.com/ Jake

      Hi Robert,

      Thanks for the great feedback! I just downloaded the source code and
      I’m trying to find this extra tag, but I can’t seem to locate it. Do you mind
      telling me where it is so I can correct it. Thanks again.

      • Robert Khayat

        <=== There's the culprit (This was downloaded from the link provided at the top of the page

        Slick Circular CSS3 Navigation Menu Tutorial

        Back to The Tutorial..

        • http://www.develop-a-website.com/ Jake

          mmmm very strange, It doesn’t show up for me when I download the source files..