Introduction
Windows 8 is currently making a lot of noise in the market. One of the things that is entirely different in Windows 8 from revious versions of Windows is the Metro UI. In this article I will show you how to create a Windows 8 start menu for our website using jQuery. Before we can code the menu we need to understand the Windows 8 menu itself. So let’s do some analysis.
Analyzing Windows 8 Start menu
To uncover the secrets let’s proceed in a step-by-step manner.
Windows 8 menu items analysis
Logic for Windows 8 Start menu
It’s time to create logic for the preceding analysis. Now we will select the various elements and methods that we can use from HTML and jQuery to implement the preceding requirements.
Coding the Windows 8 menu
Before we start to build it we need to prepare a workspace for us. Preparing a workspace is very simple. Create a new text file with a name of your choice. Now paste the following code into it.
<html>
<head>
<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css”rel=”stylesheet” type=”text/css” />
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js”></script>
<meta charset=”utf-8″ />
<title>Overlay by Arpit</title>
<style>
/* we will use this section for adding css classes or any styling */
</style>
</head>
<body>
<!– HTML will go here –>
<script>
$(document).ready(function () {
// We will use this for adding our jQuery or scripts
});
</script>
</body>
</html>
Now save your text file and ensure its extension is “html”.
Let’s prepare our HTML first.
<div id=“bg”></div>
<div class=“menu”>
<div class=“main”>Item 1</div>
<div class=“main”>Item 2</div>
<div class=“main”>Item 3</div>
<div class=“main”>Item 4</div>
<div class=“main”>Item 5</div>
<div class=“main”>Item 6</div>
<div class=“main”>Item 7</div>
<div class=“main”>Item 8</div>
<div class=“main”>Item 9</div>
</div>
<input id=“start”type=buttonvalue=“Show/Hide”/>
Add the code above in the body section of your HTML file.
CSS for Windows 8 menu
Copy and paste the following CSS into the style section of our file.
.menu{
position:fixed;
left:10px;
top:10px;
display:inline-block;
width:350px;
height:350px;
}
.main{
width:100px;
height:100px;
background-color:orange;
transition:all 0.5s;
display:inline-block;
margin:2px;
}
#bg{
position:fixed;
left:0px;
top:0px;
width:350px;
height:350px;
background-image:url(“http://www.softwarecrew.com/wp-content/uploads/2011/08/windows_8_wallpaper_large.png”);
}
#start{
position:fixed;
left:10px;
top:330px;
}
jQuery for Windows 8 menu
Copy and paste the following jQuey code to the script section.
$(“.main”).mousedown(function(){
$(this).css(“-webkit-transform”,“scale(0.93,0.93)”);
});
$(“.main”).mouseup(function(){
$(this).css(“-webkit-transform”,“scale(1,1)”);
});
$(“#start”).click(function(){
if($(“.menu”).css(“margin-left”)== “-400px”)
{
$(“#bg”).fadeIn(200);
$(“.menu”).animate({
“margin-left”:0
},500);
}
else{
$(“#bg”).fadeOut(400);
$(“.menu”).animate({
“margin-left”:-400
},500);
}
});
Line no. 1 is responsible for detecting the mouse button down event on tiles.
Line no. 2 is responsible for shrinking the tile size on mouse down.
Line no. 5 is responsible for detecting the mouse button up event on tiles.
Line no. 6 is responsible for growing the shrinked tile.
Line no. 9 is responsible for detecting the click event on start.
Line no. 10 is responsible for checking whether menu is open or close.
Line no. 12 is responsible for bringing the menu background in view.
Line no. 13-15 is responsible for bringing the tiles in menu with sliding animation. 500 is a time of animation in milliseconds.
Line no. 18-21 is responsible for fading out the background and closing the menu with sliding effect.
Full Code listing
<!DOCTYPE html>
<html>
<head>
<linkhref=“http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css”rel=“stylesheet”type=“text/css”/>
<scriptsrc=“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<scriptsrc=“http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js”></script>
<metacharset=utf-8/>
<style>
.menu{
position:fixed;
left:10px;
top:10px;
display:inline-block;
width:350px;
height:350px;
}
.main{
width:100px;
height:100px;
background-color:orange;
transition:all 0.5s;
display:inline-block;
margin:2px;
}
#bg{
position:fixed;
left:0px;
top:0px;
width:350px;
height:350px;
background-image:url(“http://www.softwarecrew.com/wp-content/uploads/2011/08/windows_8_wallpaper_large.png”);
}
#start{
position:fixed;
left:10px;
top:330px;
}
</style>
</head>
<body>
<divid=“bg”></div>
<divclass=“menu”>
<divclass=“main”>Item 1</div>
<divclass=“main”>Item 2</div>
<divclass=“main”>Item 3</div>
<divclass=“main”>Item 4</div>
<divclass=“main”>Item 5</div>
<divclass=“main”>Item 6</div>
<divclass=“main”>Item 7</div>
<divclass=“main”>Item 8</div>
<divclass=“main”>Item 9</div>
</div>
<inputid=“start”type=buttonvalue=“Show/Hide”/>
<script>
$(“.main”).mousedown(function(){
$(this).css(“-webkit-transform“,“scale(0.93,0.93)”);
});
$(“.main”).mouseup(function(){
$(this).css(“-webkit-transform“,“scale(1,1)”);
});
$(“#start”).click(function(){
if($(“.menu”).css(“margin-left”)== “-400px”)
{
$(“#bg”).fadeIn(200);
$(“.menu”).animate({
“margin-left”:0
},500);
}
else{
$(“#bg”).fadeOut(400);
$(“.menu”).animate({
“margin-left”:-400
},500);
}
});
</script>
</body>
</html>
Output
That’s all for this article. It’s a very basic version of a Windows 8 menu. In my next articles I will present the improved version of this menu. So stay tuned and don’t forget to share and comment. Your comments are required to improve this menu.