Windows 8 Metro UI For Websites: Menu V2

 

Introduction

In this article I will show you the enhanced version of the Windows 8 menu for websites. In my last article I showed the basic menu but now we will see the more similar menu. We will not do the Windows 8 menu analysis again but I’ll list some key points. So let's start.

Key Improvements in V2

The following improvements are made in this version of menu:

1. Shortcut key integrated with menu. Apart from on-screen Start button now "Start Key" and "Ctrl key" can also be used for accessing the menu.
2. Improved background effect.
3. Improved tiles.
4. Improved menu opening effect.
5. Improved menu closing effect.
6. Other minor fixes.

HTML for menu

1.   <divid="bg"></div>
2.   <divclass="menu">
3.       <divclass="main">Item 1</div>
4.       <divclass="main">Item 2</div>
5.       <divclass="main">Item 3</div>
6.       <divclass="main">Item 4</div>
7.       <divclass="main">Item 5</div>
8.       <divclass="main">Item 6</div>
9.       <divclass="main">Item 7</div>
10.       <divclass="main">Item 8</div>
11.       <divclass="main">Item 9</div>
12.       <divclass="main">Item 10</div>
13.       <divclass="main">Item 11</div>
14.       <divclass="main">Item 12</div>
15.       <divclass="main">Item 13</div>
16.       <divclass="main">Item 14</div>
17.       <divclass="main">Item 15</div>
18.       <divclass="main">Item 16</div>
19.   </div>
20.   <divid="desk"></div>
21.   <divid="start"></div>

 

Line number 1 represents the background of the menu.

Line number 2 represents the collection of tiles.

Div with class="main" represents a single tile.

Div with id="desk" represents the "Desktop" app.

Div with id="start" is for the on-screen Start button.

CSS for menu 

.menu{
position:fixed;
left:10px;
top:10px;
display:inline-block;
width:100%;
height:100%;
}
#desk{
position:fixed;
display:none;
left:0px;
top:0px;
background-color:#4a5b4c;
width:100%;
height:100%;
}
.main{
width:24%;
height:24%;
background-color:orange;
transition:all 0.5s;
display:inline-block;
margin:2px;
}
#bg{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background-mage:url("http://www.softwarecrew.com/wp-content/uploads/2011/08/windows_8_wallpaper_large.png");
}
#start{
position:fixed;
bottom:5px;
left:5px;
height:50px;
width:50px;
background-mage:url("http://img.mywindows8.org/images3/Windows-8-start-button.jpg");
background-size: contain;
} 

In CSS, fixed values of width and height are converted into percentages and styling info is added for the Desktop (desk).

jQuey for menu

Major changes are made in jQuery.

1. Use of the animation function is completely removed because of lag in sliding effects.
2. Sliding effects are completely removed.
3. Easing type is changed from "linear" to "easeOutQuint"
4. Extra code is added for switching between Desktop and menu.

1.       $(document).ready(function(){

2.           $(".main").mousedown(function(){

3.               $(this).css("-webkit-transform","scale(0.93,0.93)");

4.           });

5.        

6.           $(".main").mouseup(function(){

7.               $(this).css("-webkit-transform","scale(1,1)");

8.           });

9.           var vis=false;

10.       $("#start").click(function(){

11.       if(vis === false)

12.       {   

13.           $("#desk").fadeOut(200);

14.           $("#bg").fadeIn(500);

15.           $(".menu").show("scale",{

16.               direction:"both",

17.               origin:["middle","center"],

18.               percent:100,

19.               easing:"easeOutQuint"

20.               },500);

21.           vis=true;

22.       }

23.       else{

24.           $("#bg").fadeOut(500);

25.           $(".menu").hide("scale",{direction:"both",origin:["middle","center"],percent:50},300);

26.           vis=false;

27.           $("#desk").fadeIn(200); 

28.       }

29.       });          

30.       $(document).keydown(function(e){

31.       if(e.which==17 || e.which==91 ){

32.           $("#start").trigger("click");

33.       }

34.       });

35.   });

From lines 1-8, the code is unchanged.

Line number 9 declares and defines a variable "vis" (visible) to take note of the menu visibility. It will be set to true when the menu is open and it will be false if the menu is closed. Initially it is set to false because the menu is closed.

Line number 10 is for binding the click event with the on-screen "Start button".

Line number 11 is to check whether menu is visible or not. If it is open then code from line number 12 to 22 is executed. If menu is not visible then code from line number 24 to 28 is executed.

Line number 13 hides the Desktop so that the menu can be open.

Line number 14 brings the menu background in.

Line number 15-20 brings the tile collection on menu with scaling effect. Tiles are set to scale in both directions. The origin is from where they start scaling. The percent is for how much to scale. Easing is an animation speed specifying function. 500 is a time in milliseconds elapsed in doing all this animation.

Line number 24 fades out the menu background.

Line number 25 hides all the tiles of the menu with scaling effect. Direction is both, in other words scaling should occur from both sides. Origin is where to end the scaling. Percent is up to how much to scale. This line actually shrinks the tiles instead of scaling since the percent is set to 50. It reduces the tile from 100 percent to 50 percent and then hides the menu.

Line number 27 makes the Desktop active.  

Line number 30 binds the keydown event on the document. This event is fired whenever the user presses a key.

Line number 31 checks whether the pressed key is the Windows key or a Control key. If it is then line number 32 triggers the click event on the on-screen Start button.

Output

Live Output

 

 

 

Summary

I hope you have enjoyed this article. Nevertheless I have much more to show so stay tuned for my next articles. In case of any doubt feel free to ask in the comment section. Thanks for reading. Don't forget to share and like this article.