使用方法
在页面中引入jquery和字体图标文件font-awesome.css。
HTML结构
该工具栏菜单的HTML结构如下:
CSS样式
为该工具栏菜单添加如下的CSS样式:
#wrapper {
text-align:center;
font-family: 'Lato', sans-serif;
text-transform:uppercase;
}
#toolbar {
width:100%;
max-width:670px;
min-width:550px;
margin: 70px auto;
}
.button {
width:70px;
height:70px;
border-radius:50%;
background-color:#3AB09E;
color:#ffffff;
text-align:center;
font-size:3.5em;
position:relative;
left:50%;
margin-left:-35px;
z-index:1;
}
.button,.icons{
-webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
transition: all 1s cubic-bezier(.87,-.41,.19,1.44);
}
.button:after {
content:"+";
}
.button.active {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left:60px;
}
.icons {
width:0%;
overflow:hidden;
height:36px;
list-style:none;
padding:16px 10px 10px 50px;
background-color:#ffffff;
box-shadow: 1px 1px 1px 1px #DCDCDC;
margin:-68px 0 0 45%;
border-radius: 2em;
}
.icons.open {
width:80%;
margin:-68px 0 0 5%;
overflow:hidden;
}
.icons li {
display: none;
width:10%;
color:#3AB09E;
}
.icons.open li {
width:16%;
display: inline-block;
}
#wrapper { text-align:center; font-family: 'Lato', sans-serif; text-transform:uppercase; } #toolbar { width:100%; max-width:670px; min-width:550px; margin: 70px auto; } .button { width:70px; height:70px; border-radius:50%; background-color:#3AB09E; color:#ffffff; text-align:center; font-size:3.5em; position:relative; left:50%; margin-left:-35px; z-index:1; } .button,.icons{ -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44); transition: all 1s cubic-bezier(.87,-.41,.19,1.44); } .button:after { content:"+"; } .button.active { -webkit-transform: rotate(45deg); transform: rotate(45deg); left:60px; } .icons { width:0%; overflow:hidden; height:36px; list-style:none; padding:16px 10px 10px 50px; background-color:#ffffff; box-shadow: 1px 1px 1px 1px #DCDCDC; margin:-68px 0 0 45%; border-radius: 2em; } .icons.open { width:80%; margin:-68px 0 0 5%; overflow:hidden; } .icons li { display: none; width:10%; color:#3AB09E; } .icons.open li { width:16%; display: inline-block; }
初始化插件
在页面DOM元素加载完毕之后,通过下面的jquery代码来打开和关闭工具栏菜单。
$( ".button" ).click(function() {
$(this).toggleClass( "active" );
$(".icons").toggleClass( "open" );
});
投稿: 2601929995@qq.com
原文链接:http://www.htmleaf.com/jQuery/Menu-Navigation/201701164323.html
$( ".button" ).click(function() { $(this).toggleClass( "active" ); $(".icons").toggleClass( "open" ); });
未经允许不得转载:Html5圈 » jquery和CSS3带弹性动画效果的工具栏菜单