Create a Windows 8 Menu with HTML/CSS and jQuery

Posted on April 10, 2013 in jQuery/JavaScript Category

In this tutorial you will learn how to create a beautiful animated colorful menu with HTML, CSS and jQuery inspired from Windows 8 Style. We will use the latest jQuery version (1.9.1) hosted on Google Libraries and a custom thick Google Font to give our menu a clean style.

Difficulty: Medium

Step 1 - What you Need

For this tutorial you will need 2 blank files:

  • index.html
  • styles.css


As text editor you can use Notepad++, which is free, easy to use and recommended to everyone!

The main objective will be to create 6 squares with different colors and in the middle of them a thick clean text.

Step 2 - jQuery and Google API Fonts

Besides the usual HTML code, first do not forget to include in your header the latest jQuery script and of course the custom Google Font. See below:

Latest jQuery Include:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
	<title>Create a Animated Colorful Menu with HTML/CSS and jQuery</title>
	<link type="text/css" href="styles.css" rel="stylesheet" />
	<link href=",300,600" rel="stylesheet" type="text/css" />
	<script src=""></script>
	<div class="menu">
		<a class="yellow" href="#">Home</a>
		<a class="green" href="#">Blog</a>
		<a class="pink" href="#">Write for Us</a>
		<a class="purple" href="#">Themes</a>
		<a class="blue" href="#">Portfolio</a>
		<a class="orange" href="#">Contact</a>

If you open your html file now, you will see a simple page with no design applied. For this we need to write the magic CSS styles.

Step 3 - Adding the CSS Styles

* {
	margin: 0;
	padding: 0;
body {
	background: #111;
	color: #FFF;
	font-family:'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 16pt;
a {
	color: #FFF;
	text-decoration: none;
.menu {
	width: 570px;
	margin: 30px auto;
.menu a {
	width: 180px;
	line-height: 180px;
	display: block;
	margin: 4px;
	text-align: center;
	opacity: 0.3;
.yellow { background: #fdd22a; }
.blue { background: #009fe3; }
.purple { background: #574696; }
.orange { background: #ee7202; }
.pink { background: #e61c67; }
.green { background: #96c11f; }

And the design is ready! You can refresh your page and check the difference.

Step 4 - Adding the jQuery Code

To make the opacity increase smoothly to 100% you need to use jQuery.

We will use 3 functions here:

  • .ready
  • .hover
  • .animate

On the Hover Function we need to refer to all links inside ".menu" class, but the animation should run only on the element you hover.

Place the below code, above the </head> tag:

<script type="text/javascript">
$(document).ready(function() {
	$('.menu a').hover(function() {
			opacity: 1
		}, 300);
	}, function() {
			opacity: 0.3
		}, 300);

Refresh the page again and see the magic. Now when you go with your mouse over a button, the opacity will become 100%. It's a similar menu as Windows 8 with a minimal feel.

Final Results

How to Create a Clean Windows 8 Animated Colorful Menu with HTML/CSS and jQuery

View Demo

Download Files

Related Articles
  1. Rebecca says:

    CSS doesn’t work. What might the problem be?


    • Hello Rebecca,

      Not sure exactly what you have done there. Is it possible to put your code to jsFiddle or CodePen and give me the link back to check it?

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

6 + = eight

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.