jQuery浮动遮罩导航菜单悬停下拉效果
黑色简洁风格的浮动导航菜单，搭配鼠标悬停时的半透明遮罩，看起来挺有质感的，交互效果也比较顺滑。用的是jQuery，逻辑清晰，代码量不大，适合用来做企业官网或者展示型网站的头部导航。
导航的DOM 结构挺规整，用类名就能轻松选中各个部分。比如顶级菜单、子菜单，操作起来顺手。想控制哪个元素显示或隐藏，$(this).children()一套下来就搞定。
.hover()方法用得比较巧，鼠标一碰就弹出菜单，离开就收回。配合遮罩层，还能让下拉菜单更突出，不容易误点。.show()、.hide()这些基本功，不用花太多脑筋。
遮罩层是个全屏的
，用z-index和opacity一组合，就能达到背景虚化、聚焦导航的效果。视觉上挺舒服的，体验也不错。
动画效果也做得还蛮自然，.fadeIn()、.fadeOut()这些平滑过渡让下拉菜单不会太突兀。响应速度也挺快，不卡。
如果你想做个不那么死板的导航，能动、够酷、还好改，这套代码真的可以参考一下。顺手附上两个类似的例子，感兴趣你可以去看看：
jquery 下拉菜单导航效果
jquery 鼠标悬停滑动下拉导航菜单效果.zip
如果你网站结构层级比较多，或者想强调导航区域，不妨试试加上遮罩层这种方式。清爽又不影响用户体验。
下载地址
用户评论
