jquery实现下拉菜单滑动效果不变,jquery左右滑动菜单

jquery实现下拉菜单滑动效果不变,jquery左右滑动菜单,jQuery实现下拉菜单滑动效果

本文主要详细介绍jQuery下拉菜单的滑动效果。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。

当我们制作网页时,我们有时希望有一个又酷又流畅的下拉菜单。虽然我们用最基本的css和js就能做到,但是用jQuery只需要很短的代码就能完成下面的效果。

是不是很流畅?将鼠标移动到目标上的自动下拉菜单中,只需要两行代码:

$(' ').hover(function() {

$(这个)。孩子(“”)。slide toggle();

});

其中hover是鼠标经过和离开的复合写法,一般是这样写的。

$(' ').hover(function() {

$(这个)。孩子(“”)。slide down();

},function() {

$(这个)。孩子(“”)。slide up();

});

也就是说,在hover中写两个函数,一个是鼠标经过,一个是鼠标离开,两者之间用逗号隔开。但是,可以看出,上面我的代码只写了一个函数。这是因为如果我们只在hover中编写一个函数,那么当鼠标经过或离开时,这种效果会重复出现,这样更容易编写。

把它放在整体代码里,这样用:

!文档类型html

meta charset='UTF-8 '

风格

* {

边距:0;

填充:0;

}

李{

list-style-type:无;

}

一个{

文字-装饰:无;

字体大小:20px

}。导航{

边距:100px

}。navli {

位置:相对;

浮动:左;

宽度:80px

高度:50px

文本对齐:居中;

}。阿利导航

显示:块;

宽度:100%;

身高:100%;

行高:50px

颜色:黑色;

边框:1px纯色天蓝色;

}。悬停{

背景色:粉色;

}。导航ul {

显示:无;

位置:绝对;

顶配:50px

左:0;

宽度:100%;

border-left:1px solid # FECC5B;

border-right:1px solid # FECC5B;

}。导航ul li {

border-bottom:1px solid # FECC5B;

}。阿利导航:盘旋{

背景色:# fff 5 da;

}

/风格

script src=' https://code . jquery . com/jquery-3 . 5 . 1 . min . js '/script

/头

身体

ul class='nav '

A href='# '消息/a

保险商实验所

A href=' '跟随/a

/李

A href=' '注释/a

/李

A href=' '喜欢/a

/李

/ul

/李

A href='# '消息/a

保险商实验所

A href=' '跟随/a

/李

A href=' '注释/a

/李

A href=' '喜欢/a

/李

/ul

/李

A href='# '消息/a

保险商实验所

A href=' '跟随/a

/李

A href=' '注释/a

/李

A href=' '喜欢/a

/李

/ul

/李

/ul

脚本

$(function() {

$('.nav Li’)。hover(function() {

$(这个)。儿童(' ul ')。slide toggle();

});

})

/脚本

/body

/html

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • 使用jquery实现图片轮播效果如何,jQuery图片轮播
  • 使用jquery实现图片轮播效果如何,jQuery图片轮播,使用jQuery实现图片轮播效果
  • 举例说明jquery中each函数的使用,jquery each()
  • 举例说明jquery中each函数的使用,jquery each(),JQuery中each()的使用方法说明
  • 一篇文章带你了解jquery动画人物,一篇文章带你了解jquery动画制作
  • 一篇文章带你了解jquery动画人物,jquery的动画,一篇文章带你了解jQuery动画
  • trigger的用法总结,jquery trigger 传参数
  • trigger的用法总结,jquery trigger 传参数,jQuery中值得注意的trigger方法浅析
  • js hover 触发事件显示另一元素,js hover 触发事件,jQuery中多个元素的Hover事件解决方案
  • js apply 实现原理,jquery apply用法_1
  • js apply 实现原理,jquery apply用法
  • js apply 实现原理,jquery apply用法,js中apply方法的使用详细解析
  • js apply 实现原理,jquery apply用法,JS中apply()的应用实例分析
  • jq获取radio选中的值,jquery radio 取值
  • jq获取radio选中的值,jquery radio 取值,Jquery获取radio选中值实例总结
  • 留言与评论(共有 条评论)
       
    验证码: