相思资源网 Design By www.200059.com
一、手风琴菜单效果图及代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴效果制作</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.con{
width:908px;
height:300px;
margin:50px auto;
overflow: hidden;
position:relative;
}
.con .list_ul{
}
.con .list_ul li{
width:805px;
height:300px;
position:absolute;
background:#fff;
}
.con .list_ul li span{
width:26px;
height:296px;
text-align: center;
color:#fff;
padding-top:4px;
float:left;
cursor: pointer;
}
.con .list_ul li img{
width:777px;
height:300px;
float:right;
}
.con .list_ul li:after{
display: table;
clear:both;
zoom:1;
content: '';
}
.con .list_ul li:nth-child(1){
left:0;
}
.con .list_ul li:nth-child(2){
left:801px;
}
.con .list_ul li:nth-child(3){
left:828px;
}
.con .list_ul li:nth-child(4){
left:855px;
}
.con .list_ul li:nth-child(5){
left:882px;
}
.con .list_ul li:nth-child(1) span{
background: rgba(8, 201, 160, 0.49);
}
.con .list_ul li:nth-child(2) span{
background: rgba(120, 201, 66, 0.97);
}
.con .list_ul li:nth-child(3) span{
background: rgb(77, 114, 201);
}
.con .list_ul li:nth-child(4) span{
background: rgb(255, 179, 18);
}
.con .list_ul li:nth-child(5) span{
background: rgb(201, 5, 166);
}
</style>
<script src="/UploadFiles/2021-04-02/jquery-1.12.4.min.js">
二、上卷下拉式（层级）菜单效果图和代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用jQuery中的slideToggle制作菜单</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.menu{
width:200px;
margin:10px auto;
}
.menu>li{
background: #8731dd;
color:#fff;
text-indent: 16px;
margin-top:-1px;
cursor: pointer;
}
.menu>li>span{
padding:10px 0;
display:block;
border-bottom: 1px solid #f3f3f3;
}
.menuactive,.menu>li>span:hover{
background:#c7254e;
}
.menu > li ul{
display: none;
}
.menu > li ul li{
text-indent:20px;
background: #9a9add;
border:1px solid #f3f3f3;
margin-top:-1px;
padding:6px 0;
}
.menu >li .active{
display: block;
}
.menu > li ul li:hover{
background:#67C962;
}
.menu_li ul{
margin-bottom:1px;
}
</style>
<script src="/UploadFiles/2021-04-02/jquery-1.12.4.min.js">
三、置顶菜单（当一个菜单到达页面顶部时，停在那）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>置顶菜单</title>
<link rel="stylesheet" href="../css/reset.css" rel="external nofollow" >
<style>
.header{
width:960px;
height:200px;
margin:0 auto;
background: #ccc;
}
.header img{
width:100%;
height:200px;
}
.ul_list{
width:960px;
height:50px;
margin:0 auto;
text-align: center;
display: flex;
justify-content: space-between;/*实现子元素水平方向上平分*/
align-items: center;/*使子元素垂直方向上居中*/
background: #67C962;
}
.ul_list li{
width:160px;
height:50px;
line-height: 50px;
border:1px solid #ccc;
/*使边框合并*/
margin-right:-1px;
}
.ul_list li a{
color:#fff;
}
.ul_list li:hover{
background: #c7254e;
}
.ul_fixed{
position: fixed;
top:0;
}
.menu_pos{
width:960px;
height:50px;
margin:0 auto;
line-height: 50px;
display: none;
}
.con div{
width:958px;
height:300px;
line-height: 300px;
text-align: center;
margin:-1px auto 0;
border: 1px solid #ccc;
}
.footer{
height:300px;
}
.top{
width:38px;
height:38px;
border-radius: 35px;
background: #000;
color:#fff;
font-size:13px;
padding:8px;
text-align: center;
position: fixed;
right:100px;
bottom:20px;
display: none;
}
.top:hover{
cursor: pointer;
}
</style>
<script src="/UploadFiles/2021-04-02/jquery-1.12.4.min.js">
四、无缝滚动效果图及代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.con{
width:662px;
margin:50px auto;
}
.con button{
width:100px;
height:36px;
line-height: 36px;
text-align: center;
border: none;
margin-left:20px;
}
.box{
width:655px;
height:135px;
margin:20px auto;
border:1px solid #ccc;
padding-left:10px;
padding-bottom:10px;
position: relative;
overflow: hidden;
}
.ul_list{
display: flex;
position: absolute;
left:0;
top:0;
padding: 10px;
}
.ul_list li{
width:120px;
height:120px;
border:1px solid #ccc;
margin-left:-1px;
margin-right:10px;
/*margin-top:10px;*/
}
.ul_list li img{
width:100%;
height:100px;
line-height: 100px;
}
</style>
<script src="/UploadFiles/2021-04-02/jquery-1.12.4.min.js">
以上菜单涉及到的知识点如下：
四、jQuery
1、slideDown（）向下展示
2、slideUp（）向上卷起
3、slideToggle（）依次展开或卷起某个元素
五、jQuery链式调用
jquery对象的方法在执行完之后返回这个jquery对象，所有的jQuery对象的方法可以连起来写：
$("#div1").chlidren("ul").slideDown("fast").parent().siblings().chlidren("ul").slideUp("fase")
$("#div1").//id位div1的元素
.chlidren("ul") //该元素下的ul子元素
.slideDown("fast") //高度从零到实际高度来显示ul元素
.parent() //跳转到ul的父元素，也就是id为div1的元素
.siblings() //跳转div1元素同级的所有兄弟元素
.chlidren("ul") //查找这些兄弟元素中的ul子元素
.slideUp("fase") //从实际高度变换为零来隐藏ul元素
总结
以上所述是小编给大家介绍的基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。