赛光时代小编这几天在设计前端的时候苦逼的搜索一个下拉菜单的效果，因为自己的前端技术还不是太好，所以就东找找西找找皇天不负有心人找到了适合的还不错的下拉菜单效果，代码精简功能也不错。所以赛光时代小编给大家分享一下
1首先我们需要引入jQUERY代码示例如下
<script src="您的服务器路径/jquery.js" type="text/javascript"></script>
2引入下面的代码
<script type="text/javascript">
jQuery(document).ready(function(){
var qcloud={};
$('[_t_nav]').hover(function(){
var _nav = $(this).attr('_t_nav');
clearTimeout( qcloud[ _nav + '_timer' ] );
qcloud[ _nav + '_timer' ] = setTimeout(function(){
$('[_t_nav]').each(function(){
$(this)[ _nav == $(this).attr('_t_nav') ? 'addClass':'removeClass' ]('set');
});
$('#'+_nav).stop(true,true).slideDown(100);
}, 150);
},function(){
var _nav = $(this).attr('_t_nav');
clearTimeout( qcloud[ _nav + '_timer' ] );
qcloud[ _nav + '_timer' ] = setTimeout(function(){
$('[_t_nav]').removeClass('set');
$('#'+_nav).stop(true,true).slideUp(100);
}, 150);
});
});
</script>
3让后在我们需要的地方增加相应的代码即可如下
<li _t_nav="project"><a href="#">我是父级栏目</a></li>
<!--下面是子导航-->
<div id="project" class="nav-down-menu" style="display: none;" _t_nav="project">
<p><a href="#">建站产品</a></p>
<p><a href="#">使用帮助</a></p>
<p><a href="#">建站报价</a></p>
</div>
总结其实上面就是一个hover鼠标滑过控制对应的要显示的东西的属性。来达到隐藏和显示的效果。为什么推荐出来这个因为用这个我们可以轻松的实现不同样式的下级导航只需要增加_t_nav="project" 和对应的要显示的内容的部分，这样方便我们控制，感谢这个代码的提供者。后续赛光时代小编会为大家更多的编程和特效方面的知识和内容。让我们共同进步。