Html
    Css
    Js

    
                        
* {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
}
body {
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:#eee;
}
body .container {
	border-radius:8px;
	box-shadow:6px 6px 24px rgba(0,0,0,0.1);
	cursor:pointer;
	display:flex;
}
body .container .box {
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:200px;
	height:500px;
	padding:0px 20px;
	transition:all 0.3s;
	color:white;
}
body .container .Hover {
	width:260px;
	transition:all 0.3s;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.1
 立即下载

jQuery手风琴菜单代码

更新时间:2020-04-06 14:39:37

横向展开手风琴,当鼠标移入的时候当前盒子横向展开,兄弟盒子收拢

0