Code With Logic

Creating Code For Simplicity but Logic For Need

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&#8221;);
}
#start{
position:fixed;
bottom:5px;
left:5px;
height:50px;
width:50px;
background-mage:url(http://img.mywindows8.org/images3/Windows-8-start-button.jpg&#8221;);
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. 

Advertisements

One comment on “Windows 8 Metro UI For Websites: Menu V2

  1. timwilliam2007
    February 26, 2014

    How to make over 16 items if I have a lot of items. I want to make a new menu after reach over 16 items and the button click to slide to menu second.
    Can you help me. I really like your code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on January 29, 2014 by in CodeProject, jQuery.
%d bloggers like this: