win10开始菜单CSS源代码，DIV源代码，

该下拉菜单的HTML结构非常简单，基本的HTML结构如下：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

<div id="top-bar" class="top-bar">

<div class="bar">

<button id="navbox-trigger" class="navbox-trigger"><i class="fa fa-lg fa-th"></i></button>

</div>

<div class="navbox">

<div class="navbox-tiles">

<a href="#" class="tile">

<div class="icon"><i class="fa fa-home"></i></div><span class="title">Home</span>

</a>

......

</div>

</div>

</div>

CSS样式

在CSS样式中，顶部导航条.top-bar设置为固定高度50像素和相对定位，并给出一个较高的z-index值。

?

1

2

3

4

5

.top-bar {

height: 50px

position: relative

z-index: 1000

}

下拉菜单.navbox开始的时候是隐藏的，它采用绝对定位，通过translateY方法将它移动到导航条上方200像素的地方。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

.top-bar .navbox {

visibility: hidden

opacity: 0

position: absolute

top: 100%

left: 0

z-index: 1

-webkit-transform: translateY(-200px)

-ms-transform: translateY(-200px)

transform: translateY(-200px)

-webkit-transition: all .2s

transition: all .2s

}

接着在下拉菜单被激活的时候，它的透明度被设置回1，变为可见状态，并通过translateY方法将它移动回原来的位置。

?

1

2

3

4

5

6

7

8

9

.top-bar.navbox-open .navbox {

visibility: visible

opacity: 1

-webkit-transform: translateY(0)

-ms-transform: translateY(0)

transform: translateY(0)

-webkit-transition: opacity .3s, -webkit-transform .3s

transition: opacity .3s, transform .3s

}

JavaScript

该特效中使用jQUery切换相应的class类和用于打开菜单按钮。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

(function () {

$(document).ready(function () {

$('#navbox-trigger').click(function () {

return $('#top-bar').toggleClass('navbox-open')

})

return $(document).on('click', function (e) {

var $target

$target = $(e.target)

if (!$target.closest('.navbox').length &&!$target.closest('#navbox-trigger').length) {

return $('#top-bar').removeClass('navbox-open')

}

})

})

}.call(this))

想学Win10 UWP开发，不知从何下手？那么本系列文章可能正是你所需要的。从今天开始IT之家将陆续推出Windows10开发新手入门系列专题，供对Win10开发感兴趣的小伙伴们参考学习。

作为系列专题的开篇，本文并不会包含技术性方面的内容，主要是向大家征集意见和建议，并对我们即将使用的Win10开发平台作一个简单的介绍。

Win10通用平台

我们通常所说的UWP，即Universal Windows Platform，意为通用Windows平台，针对该平台开发的应用可同时运行在多种不同类型的Win10设备中，包括手机、平板、PC（笔记本和台式机），甚至是Xbox One以及Hololens中，还有各种物联网设备。

这里的通用实质是源代码的“通用”，开发者还是需要针对不同平台设备编译不同的版本。其实通用应用的概念在WP8.1时就已诞生，不过在Win10中更进一步，逻辑代码和UI代码都可以得到最大程度共用。

开发框架和语言

过去很长一段时间以来，甚至是现在，在Windows桌面平台较流行的开发方式便是使用微软提供的MFC框架以及WinForm/WPF框架，前者是对Windows API的C++封装，后者则是对Windows API的.NET封装，使用C#语言开发。到了Win8中微软引入了全新的应用程序架构，即WinRT，并延续到了Win10（包括Win10 Mobile）中，专门用来开发Windows应用商店应用，它支持使用C++、C#、VB.NET，甚至是JavaScript语言进行开发。

多年来微软一直在不断推广和改进自家的C#语言，C#是一门完全面向对象的编程语言，入门上手较为容易，也是微软比较推荐的编程语言。在本系列专题中，我们即使用C#编程语言完成一系列示例。

除了C#语言，我们还需要学习XAML语言，对于有WPF开发经验的朋友会非常熟悉。XAML主要用于设计应用界面，类似于呈现网页的HTML语言。前面我们提到Win10通用应用针对不同设备都可以使用同一套UI，那么这就要求我们设计的界面能够适应各种不同尺寸的屏幕，因此还需要掌握一些有关响应式界面设计的技巧。

准备工作

我们将在后续的系列文章中逐步渗透以上技术，如果你已经打算跟着我一起动手，那么现在你需要准备以下软硬件工具：

• 一台运行Win10（建议升级到TH2）的电脑，点此下载Win10 TH2正式版系统；

• 安装Visual Studio 2015（建议安装最新Update1版本）以及Win10 SDK，点此下载所需工具；

• 一部运行Windows 10 Mobile（10586系统）的手机；

注：如果你没有Win10 Mobile手机也可以通过模拟器进行调试，不过这需要你的电脑CPU支持虚拟化技术。因为运行Win10 Mobile手机模拟器所需的Hyper-V虚拟机依赖于CPU的虚拟化技术。

在下一篇文章中我们将创建一个最简单的应用，并对Win10 UWP应用的整个结构进行分析，熟悉Visual Studio 2015开发环境。

最后，由于豆豆并非专业出身，因此本系列专题定位为入门性质，目前还在摸索中，豆豆将和大家一同学习。如果文章出现技术性错误，也恳请您指出，豆豆将虚心学习和接受。对于学习过程中遇到的任何问题以及想要分享的内容，也欢迎入驻软媒IT之家IT圈参与讨论。如果你有什么意见和建议也请在评论或IT圈中发帖提出。

---