Home > php教程 > PHP开发 > body text

Navigation drop-down menu effect implemented by jQuery

高洛峰
Release: 2016-12-15 16:04:42
Original
1316 people have browsed it

The effect is as shown in the picture:

Navigation drop-down menu effect implemented by jQuery

html code:

jQuery code:

//导航效果(兼容IE6)
/*
1.使用$("#navigation ul li:has(ul)")函数来选择含有
    元素的
  • 元素,然后为它们添加hover事件, 2.在hover事件的第一个函数内,使用$(this).children("ul")找到
  • 元素内部的
      元素,然后用stop(true,true)语句使导航向下扩展 3.在hover事件的第二个函数内,用stop(true,true).slideUp("fast")语句使导航向上隐藏 4.在两个动画效果之前都添加了stop(true,true)方法,这样做的好处是能把为执行完的动画队列清空,并且将正在执行的动画跳转到末状态 */ $(function(){ $("#navigation ul li:has(ul)").hover(function(){ $(this).children("ul").stop(true,true).slideDown(400); },function(){ $(this).children("ul").stop(true,true).slideUp("fast"); }); })
Copy after login


For more articles related to the navigation drop-down menu effect implemented by jQuery, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!