html 号召性用语按钮
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 号召性用语按钮相关的知识,希望对你有一定的参考价值。
<!--- Menu button --->
<script>
$(".btn").click(function(){
$(".btn-content").toggleClass("active");
})
</script>
<script>
$(window).bind("load", function() {
$('#navToggle').click(function(){
$('#navToggle, html').toggleClass("activeNav");
});
$('#mobileMenu li').click(function() {
$(this).toggleClass("clicked");
});
});
</script>
/* --------- MOBILE MENU -------------*/
#mobileMenu {
position: fixed;
z-index: 1005;
top: 0;
left: 0;
right: 0;
bottom: auto;
}
.activeNav #mobileMenu {
/* height: 100%; */
bottom: 0;
box-sizing: border-box;
/* padding-bottom: 60px; */
}
#mobileMenu nav {
overflow-y: auto;
height: 100%;
}
html.activeNav body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
overflow-y: none;
}
#menu {
display: none;
}
#navToggle {
width: 100%;
color: #111;
padding: 0px 0;
position: relative;
text-align: left;
cursor: pointer;
background:none!important;
}
#mobileMenu #navToggle {display:none;}
#navToggle:before {
font-family: FontAwesome;
margin-left: 5px;
content: "\f0c9 ";
line-height: 1em;
font-size: 1em;
color:#333;
background:none;
}
#mobileMenu {
display: inline-block;
background: #222;
position: fixed;
z-index: 99999;
top:0px;
left:0px;
overflow: hidden;
}
#mobileMenu nav {
display: none; }
#mobileMenu li {
list-style-type: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#mobileMenu li a {
width: 100%;
text-decoration: none;
display: inline-block;
box-sizing: border-box; }
#mobileMenu li span {
display: block;
padding: 20px 10px;
color: #fff;
}
#mobileMenu .current {
background: rgba(0, 0, 0, 0.3);
}
#mobileMenu li a:hover {
background: rgba(255, 255, 255, 0);}
/* #mobileMenu li:active {
background: rgba(255, 255, 255, 0.1); } */
#mobileMenu .parent > span:after {
position: relative;
display: inline-block;
font-family: FontAwesome;
margin-left: 10px;
content: "\f107";
line-height: 1em; }
#mobileMenu .parent.clicked > span:after {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
/* ---------------------------------- */
/* ----------- SUB MENU ----------- */
/* ---------------------------------- */
#mobileMenu li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
background: rgba(255,255,255,0.07); }
#mobileMenu li ul a {
padding-left: 30px; }
#mobileMenu li a:hover {
background: rgba(255, 255, 255, 0); }
/* #mobileMenu li:active {
background: rgba(255, 255, 255, 0.1); } */
#mobileMenu .parent > a:after {
font-family: FontAwesome;
margin-left: 8px;
content: "\f107";
line-height: 1em; }
/* ----------- Call to action Toggle button ----------- */
.btn-content{
position: fixed;
width: 100px;
height: 100px;
font-style: normal !important;
bottom:20px;
right:20px;
z-index: 99999999999;
display:block!important;
}
.material-icons {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.btn-content > .btn{
position: absolute;
left: 80%;
display: flex;
z-index: 10;
margin-left: -40px;
top: 80%;
margin-top: -40px;
border-radius: 50%;
transition: all .2s linear;
width: 60px;
height: 60px;
cursor: pointer;
background:red;
}
.btn-content > .btn i{
margin: auto;
color: #FFF;
transition: .25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
font-size:20px;
}
.btn-content > .btn i:before{
content:"\f067";
font-family:Fontawesome;
}
.btn-content.active > .btn {
left: 50%;
top: 50%;
background: #333;
}
.btn-content.active > .btn i{
transform: rotate(45deg);
}
.btn-content > .btn-expanded{
position: absolute;
left: 80%;
margin-left: -40px;
top: 80%;
z-index: 9;
margin-top: -40px;
border-radius: 50%;
transition: all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
width: 60px;
height: 60px;
background: #FFF;
overflow: hidden;
transform: rotate(-15deg);
font-size:7px;
opacity:0;
}
.btn-content.active .btn-expanded{
transform: scale(2.3) rotate(0deg);;
left: 50%;
top: 50%;
opacity:1;
}
.btn-content.active .btn-expanded > btn-expanded-content{
width: 100%;
height: 100%;
position: relative;
}
.btn-expanded-content > .btn-icon{
position: absolute;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
color: #263238;
cursor: pointer;
transition: .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.btn-expanded-content > .btn-icon:hover{
color: #F44336;
}
.btn-expanded-content > .btn-icon > i{
font-size: 13px;
line-height: 20px;
}
.btn-expanded-content > .btn-icon:nth-child(1){
left: 50%;
top: 0px;
margin-left: -10px;
}
.btn-expanded-content > .btn-icon:nth-child(1):before{
content:"\f0e0";
font-family:Fontawesome;
}
.btn-expanded-content > .btn-icon:nth-child(2){
right: -2px;
top: 50%;
margin-top: -10px;
}
.btn-expanded-content > .btn-icon:nth-child(2):before{
content:"\f095";
font-family:Fontawesome;
}
.btn-expanded-content > .btn-icon:nth-child(3){
left: 50%;
bottom: 0px;
margin-left: -10px;
}
.btn-expanded-content > .btn-icon:nth-child(3):before{
content:"\f16d";
font-family:Fontawesome;
}
.btn-expanded-content > .btn-icon:nth-child(4){
left: 0px;
top: 50%;
margin-top: -10px;
}
.shadow {
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}
#toTop {
left: 20px;
}
<!--- Menu button --->
<div class="btn-content">
<div class="btn shadow">
<i class="material-icons"></i>
</div>
<div class="btn-expanded shadow">
<div class="btn-expanded-content">
<div class="btn-icon mail" onClick="window.location='contact.html'">
<i class="material-icons"></i>
</div>
<div class="btn-icon phone" onClick="window.location='tel:0400 000 000'" >
<i class="material-icons"></i>
</div>
<div class="btn-icon insta" onClick="window.open('http://www.instagram.com', '_blank')">
<i class="material-icons"></i>
</div>
<div class="btn-icon menu">
<div id="navToggle">
<i class="material-icons"></i>
</div>
</div>
</div>
</div>
</div>
以上是关于html 号召性用语按钮的主要内容,如果未能解决你的问题,请参考以下文章
MVC AJAX 号召性用语不将 JSON 返回到 AJAX,而仅返回带有纯 JSON 的页面