Line number 1 represents the background of the menu.

Line number 2 represents the collection of tiles.

Div with class=”``3” represents a single tile.

Div with id=”``4” represents the “Desktop” app.

Div with id=”``5” 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 `6and `7are 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 “`8” to “`9”
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. });
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 “`0” (visible) to take note of the menu visibility. It will be set to 1when the menu is open and it will be 2if the menu is closed. Initially, it is set to `2because 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 comments section. Thanks for reading. Don’t forget to share and like this article.

For SOURCE CODE

Filed under: CodeProject, jQuery

License

Written By

Student

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

Comments and Discussions

You must Sign in to use this message board.

Last Visit: 31-Dec-99 18:00 Last Update: 29-May-24 3:55Refresh1

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