Windows 8 Metro UI 网站：菜单 V2

Arpit Jain

4.71/5 (4投票s)

2014年1月30日

CPOL

3分钟阅读

20995

Windows 8 网站菜单的增强版本

引言

在本文中，我将向您展示网站的增强版 Windows 8 菜单。在我的上一篇文章中，我展示了基本菜单，但现在我们将看到更相似的菜单。我们不会再次进行 Windows 8 菜单分析，但我会列出一些关键点。让我们开始吧。

V2 中的主要改进

此版本的菜单进行了以下改进

快捷键与菜单集成。除了屏幕上的“开始”按钮外，现在“开始键”和“Ctrl 键”也可以用于访问菜单。
改进的背景效果
改进的磁贴
改进的菜单打开效果
改进的菜单关闭效果
其他细微修复

菜单的 HTML

<divid=“bg”></div>
<divclass=“menu”>
<divclass=“main”>项目 1</div>
<divclass=“main”>项目 2</div>
<divclass=“main”>项目 3</div>
<divclass=“main”>项目 4</div>
<divclass=“main”>项目 5</div>
<divclass=“main”>项目 6</div>
<divclass=“main”>项目 7</div>
<divclass=“main”>项目 8</div>
<divclass=“main”>项目 9</div>
<divclass=“main”>项目 10</div>
<divclass=“main”>项目 11</div>
<divclass=“main”>项目 12</div>
<divclass=“main”>项目 13</div>
<divclass=“main”>项目 14</div>
<divclass=“main”>项目 15</div>
<divclass=“main”>项目 16</div>
</div>
<divid=“desk”></div>
<divid=“start”></div>

第 1 行代表菜单的背景。

第 2 行代表磁贴的集合。

类为“main”的 Div 代表单个磁贴。

id 为“desk”的 Div 代表“桌面”应用程序。

id 为“start”的 Div 用于屏幕上的“开始”按钮。

菜单的 CSS

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

在 CSS 中，width 和 height 的固定值转换为百分比，并添加了桌面 (desk) 的样式信息。

菜单的 jQuery

jQuery 中进行了重大更改。

由于滑动效果的滞后，完全删除了动画函数的使用。
完全删除了滑动效果。
缓动类型从“linear”更改为“easeOutQuint”
添加了额外的代码用于在桌面和菜单之间切换。

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.   });

从第 1-8 行，代码没有更改。

第 9 行声明并定义了一个变量“vis”（可见）来记录菜单的可见性。当菜单打开时，它将被设置为 true，如果菜单关闭，它将被设置为 false。最初，它被设置为 false，因为菜单已关闭。

第 10 行用于将点击事件与屏幕上的“开始”按钮绑定。

第 11 行用于检查菜单是否可见。如果它已打开，则执行从第 12 行到 22 行的代码。如果菜单不可见，则执行从第 24 行到 28 行的代码。

第 13 行隐藏桌面，以便可以打开菜单。

第 14 行引入菜单背景。

第 15-20 行以缩放效果将磁贴集合带到菜单上。磁贴设置为在两个方向上缩放。原点是它们开始缩放的位置。百分比用于缩放多少。缓动是指定动画速度的函数。 500 是完成所有这些动画所经过的毫秒时间。

第 24 行淡出菜单背景。

第 25 行以缩放效果隐藏菜单的所有磁贴。方向是双向，换句话说，缩放应该从两侧发生。原点是缩放结束的位置。百分比是缩放到的程度。此行实际上缩小了磁贴而不是缩放，因为百分比设置为 50。它将磁贴从 100% 降低到 50%，然后隐藏菜单。

第 27 行使桌面处于活动状态。

第 30 行将 keydown 事件绑定到文档。每当用户按下键时，都会触发此事件。

第 31 行检查按下的键是否是 Windows 键或 Control 键。如果是，则第 32 行触发屏幕上的“开始”按钮上的点击事件。