Click here to Skip to main content
15,667,577 members
Articles / Web Development / HTML
Posted 30 Jan 2014


13 bookmarked

Windows 8 Metro UI For Websites: Menu V2

Rate me:
Please Sign up or sign in to vote.
4.71/5 (4 votes)
5 Feb 2014CPOL3 min read
Enhanced version of the Windows 8 menu for websites

Image 1


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

height:24%;background-color:orange;transition:all 0.5s;display:
background-size: contain;} 

In CSS, fixed values of width and height are converted into percentages and styling information 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.
  5. JavaScript
    1.       $(document).ready(function(){
    2.           $(".main").mousedown(function(){
    3.               $(this).css("-webkit-transform","scale(0.93,0.93)");
    4.           });
    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.


Live Output

Image 2

Image 3

Image 4

Image 5

Image 6


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 comments section. Thanks for reading. Don’t forget to share and like this article. 


Filed under: CodeProject, jQuery
Image 7 Image 8


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

SuggestionResponsive Design Required Pin
Singh Vijay Kumar22-Dec-14 18:44
professionalSingh Vijay Kumar22-Dec-14 18:44 
Generalerrors in code snippets Pin
Middle Manager4-Feb-14 6:17
Middle Manager4-Feb-14 6:17 
GeneralRe: errors in code snippets Pin
Arpit Jain4-Feb-14 6:32
Arpit Jain4-Feb-14 6:32 
GeneralRe: errors in code snippets Pin
Middle Manager4-Feb-14 6:36
Middle Manager4-Feb-14 6:36 
GeneralRe: errors in code snippets Pin
Richard Deeming4-Feb-14 9:25
mveRichard Deeming4-Feb-14 9:25 
QuestionSource code missing Pin
Anurag Gandhi3-Feb-14 3:15
professionalAnurag Gandhi3-Feb-14 3:15 
AnswerRe: Source code missing Pin
Arpit Jain4-Feb-14 7:30
Arpit Jain4-Feb-14 7:30 
Here you can find the entire source code.[^]
Arpit Jain

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.