这是一款仿窗口10开始菜单的下拉导航菜单特效。该下拉菜单使用jQuery和CSS3来完成类似窗口10开始菜单样式效果，它的代码简洁，效果非常时尚。

查看演示源码下载

该下拉菜单的超文本标记语言结构非常简单，基本的超文本标记语言结构如下：

div id=' top-bar ' class=' top-bar ' div class=' bar ' button id=' nav box-trigger ' class=' nav box-trigger ' I class=' fa fa-LG fa-th '/I/button/div class=' nav box ' div class=' nav box-tiles ' a href=' # ' class=' tile ' div class=' icon ' I class=' fa fa-home '/I/div span class=' title ' home/span/a./div /div/divCSS样式

在半铸钢钢性铸铁(铸造半钢)样式中，顶部导航条。顶栏设置为固定高度50像素和相对定位，并给出一个较高的z指数值。顶杆{高： 50像素相对位置：z指数： 1000；}下拉菜单。导航盒开始的时候是隐藏的，它采用绝对定位，通过翻译方法将它移动到导航条上方200像素的地方。顶级酒吧navbox { visibility:隐藏；opa城市3360 0；绝对位置：前：名100%；左： 0；z-index : 1；-web套件-transform : translateY(-200 px)；-ms-transform : translateY(-200 px)；transform : translateY(-200 px)；-网络套件-transit : all。2s；过渡：所有。2s；}接着在下拉菜单被激活的时候，它的透明度被设置回1,变为可见状态，并通过翻译方法将它移动回原来的位置。顶栏.中框-打开.导航框{ visibility:可见；opa城市3360 1；-web工具包-transform : translateY(0)；-ms-transform : translateY(0)；transform : translateY(0)；-网络套件-transit :不透明度。3s-网络工具包-传输。3s；过渡：不透明度。3s，transform .3s}JavaScript

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

（函数(){ $(文档))。就绪(函数(){ $(' #导航框-触发器')).单击(function(){ return $(“# top-bar”)).切换类(“导航框-打开”)；});返回$(文档)。打开('点击')，函数{ var $ target$ target=$(e . target)；if(！$ target.closest(' .navbox ').长度！$目标。更近(#导航框-触发器').长度){ return $('#top-bar ').移除CLaSS('导航框-打开')；} });});}.叫（这个));