html5点击显示展开列表,jQuery和CSS3滑动展开菜单按钮插件

这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后，子菜单以滑动的方式依次展开，效果非常炫酷。

使用方法

在页面中引入jquery文件。

HTML

使用下面的HTML结构来创建滑动展开菜单。

• Trigger Button

• jQuery

• Script

• Net

• Menu

CSS样式

然后添加下面的CSS样式。

ul.menu li, ul.menu li .sub-menu {

border-radius: 100%;

height: 100px;

width: 100px;

}

ul.menu {

list-style: none;

margin: 0;

padding: 0;

}

ul.menu li {

margin: 0;

padding: 0;

position: absolute;

background-color: #5408FF;

cursor: pointer;

left: 0;

right: 0;

top: 0;

bottom: 0;

transition: all 0.5s;

display: flex;

justify-content: center;

align-items: center;

}

ul.menu li span {

color: #11111C;

font-weight: 700;

font-size: 1.5rem;

letter-spacing: 0.1px;

}

ul.menu li .sub-menu {

height: 100px;

width: 100px;

position: absolute;

top: 100px;

background-color: white;

}

ul.menu li:hover {

background-color: #FF08FF;

}

ul.menu li#push {

z-index: 50;

background-color: #FF08FF;

}

ul.menu li#push span {

font-size: 2rem;

}

ul.menu li#push.move {

left: -200px;

}

ul.menu li#push.rotate {

transform: rotate(-315deg);

}

ul.menu li#pushed-center {

z-index: 10;

}

ul.menu li#pushed-left-1 {

z-index: 20;

}

ul.menu li#pushed-left-1.move {

left: -100px;

}

ul.menu li#pushed-right-1 {

z-index: 30;

}

ul.menu li#pushed-right-1.move {

left: 100px;

}

ul.menu li#pushed-right-2 {

z-index: 40;

}

ul.menu li#pushed-right-2.move {

left: 200px;

}

Javascript

最后通过下面的js代码来触发按钮的点击展开动画。

$(document).ready(function() {

$('#push').on('click',function(){

$('#push, #pushed-center, #pushed-left-1, #pushed-right-1, #pushed-right-2').toggleClass('move');

$('#push').toggleClass('rotate');

});

});