本文主要详细介绍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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。