使用jQuery+CSS3实现的windows10开始菜单的下拉导航菜单特效
这是关于下拉导航菜单，模仿windows10开始菜单的特殊效果。下拉菜单使用jQuery和CSS3来完成类似的windows10开始菜单的风格的影响，其代码简单，效果很时尚。下载下载演示源代码
下拉菜单的HTML结构非常简单，基本的HTML结构如下所示：
回家
......
css样式
在CSS样式，顶部导航bar.top-bar设置为一个固定的50像素的高度和相对定位，并给出了一个更高的z-index值。
{顶部栏
身高：50px；
职位：相对；
Z指数：1000；
}
下拉菜单，。Navbox，是隐藏在它开始。它使用绝对定位和移动200像素导航栏通过translatey方法。
top-bar.navbox {。
可见性：隐藏；
不透明性：0；
位置：绝对的；
顶部：100%；
左：0；
Z指数：1；
WebKit的变换：translatey（- 200px）；
MS变换：translatey（- 200px）；
变换：translatey（- 200px）；
WebKit的过渡：all.2s；
过渡：all.2s；
}
然后，当下拉菜单被激活时，它的透明度设置为1并且可见。它回到它原来的位置，通过translatey。
top-bar.navbox-open.navbox {。
可见性：可见；
不透明性：1；
WebKit的变换：（0）translatey；
MS：translatey变换（0）；
translatey变换：（0）；
WebKit的过渡：opacity.3s，-webkit-transform.3s；
过渡：opacity.3s，transform.3s；
}
Javaｓｃｒｉｐｔ
这种特殊效果使用jQuery切换相应的类，并打开菜单按钮。
（函数（）{（））
$（文档）Ready（函数（）{）
$（#导航触发）。Click（function（）{）
返回$（' #顶栏）ToggleClass（'navbox-open）；
}）；
返回$（document），（听到咔哒声，功能（e）{）
var目标；
目标= $（美元e.target）；
如果（！target.closest美元（'列表的长度）！target.closest美元（#导航触发）。长度）{
返回$（' #顶栏）RemoveClass（'navbox-open）；
}
}）；
}）；
}调用（这个）；