Windows 8 Metro UI For Websites: Menu V1

Arpit Jain

Rate me:

5.00/5 (1 vote)

30 Jan 2014CPOL4 min read

11.8K

Windows 8 Metro UI for websites

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 previous 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.

The user presses the “Start Key” to open the start menu. Or the user can click on the Start button to open it.
The moment the start key is pressed, the current screen fades out.
The Start menu background fades in.
All menu items slide in on that background.
Steps 2, 3 and 4 are done very quickly and that makes all these steps unnoticeable.
Next the user presses the “ESC” or “Start key” while the menu is open.
After step 6, the Main Menu zooms out.
The last active screen fades in.
This completes the Windows 8 menu open and close.

Windows 8 Menu Items Analysis

All tiles in the menu are of the two shapes “large” and “medium”.
On the click of a tile, the application is activated with flip animation if it’s a Windows 8 app.
If a tile is for a Windows Desktop program, then that program is opened.
When tile is pressed, it is zoomed out a bit. A little shrink type effect.
When the click on tile is released, a grow effect on the tile is activated.
After the click on the tile, the menu is closed.

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.

First of all, we need one big rectangle to represent our menu background. This can be done using a DIV tag.
For the background image effect, we can set the appropriate image in the background. This can be done using the “background-image” property of the div.
Next, we need to create tiles for the menu.
Tiles are simple rectangular boxes so it can be created using a DIV.
For a press and release effect on a tile, we can use the scale property of the DIV.
To open the menu, we can bind the “Start key” with it.
To close the menu, we can use the same “Start key”.
To add animation while opening the menu, we can use the “fade in” effect of jQuery for menu background.
We can use a sliding effect on menu items while a menu is opening.
When closing a menu, we can use the “fade out” effect of jQuery for background.

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

<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.

HTML

<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.

Div with id=”bg” represents the menu background.
Div with id=”menu” is a wrapper around the menu items or tiles.
Div with id=”main” represents the menu tiles.
Input id=”start” is a button used for triggering the menu open/close action.

CSS for Windows 8 Menu

Copy and paste the following CSS into the style section of our file.

CSS

  .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 jQuery code to the script section.

JavaScript

$(".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

HTML

<!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

Summary

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.

Filed under: CodeProject, jQuery