4d84a934
 曹明
初始代码提交
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<style>
.quick.quick-quick {position:fixed; bottom:0; left:0; z-index:900; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); height:60px;}
.quick.quick-quick .quick-menu{background-color: #B70000; -webkit-appearance:none;outline:none;display:inline-block; width:36px !important; height:36px !important; line-height:38px !important; text-align:center !important; position:absolute; bottom:17px; left:17px; z-index:999; -moz-box-shadow:0 0 0 4px #FFFFFF, 0 2px 5px 4px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 0 0 4px #FFFFFF, 0 2px 5px 4px rgba(0, 0, 0, 0.25); box-shadow:0 0 0 4px #FFFFFF, 0 2px 5px 4px rgba(0, 0, 0, 0.25); -webkit-transition: -webkit-transform 200ms; -webkit-transform:rotate(1deg);-moz-transition: -webkit-transform 200ms; -moz-transform:rotate(1deg); color:#FFF;}
.quick.quick-quick .quick-menu:before{font-size:20px;}
.quick.quick-quick .quick-menu:checked{-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);}
.quick.quick-quick>div {width:32px; height:32px; border-radius:32px; -moz-box-shadow:0 0 0 3px #FFFFFF, 0 2px 5px 3px rgba(0, 0, 0, 0.25); -webkit-box-shadow:0 0 0 3px #FFFFFF, 0 2px 5px 3px rgba(0, 0, 0, 0.25); box-shadow:0 0 0 3px #FFFFFF, 0 2px 5px 3px rgba(0, 0, 0, 0.25); background:#B70000; position:absolute; bottom:0; left:0; margin-bottom:20px; margin-left:20px; z-index:900; -webkit-transition: -webkit-transform 200ms;-moz-transition: -webkit-transform 200ms;}
.quick.quick-quick>div a{color:#fff; font-size:20px; display: block; height: 100%; line-height: 33px; text-decoration:none; text-align: center;}
.quick.quick-quick>div a i{ display:inline-block; width:20px; height:20px;}
.quick.quick-quick>div.on:nth-of-type(1) {-webkit-transform: translate(0, -100px) rotate(720deg);-moz-transform: translate(0, -100px) rotate(720deg);}
.quick.quick-quick>div.on:nth-of-type(2) {-webkit-transform: translate(47px, -81px) rotate(720deg);-moz-transform: translate(47px, -81px) rotate(720deg);}
.quick.quick-quick>div.on:nth-of-type(3) {-webkit-transform: translate(81px, -45px) rotate(720deg);-moz-transform: translate(81px, -45px) rotate(720deg);}
.quick.quick-quick>div.on:nth-of-type(4) {-webkit-transform: translate(100px, 0) rotate(720deg);-moz-transform: translate(100px, 0) rotate(720deg);}
</style>
<div class="quick quick-quick" id="quick-quick">
<span class="quick-menu img-circle" style="background-color:#B70000;"><i class="fa fa-plus"></i></span>
<input type="checkbox" id="quick-btn" class="quick-menu img-circle" style="opacity:0;" />
{php $i = 1;}
{loop $_W['quickmenu']['menus'] $nav}
<div style="background-color:#B70000;{$nav['css']['icon']['style']}">
<a href="{$nav['url']}" title="{$nav['name']}">
{if !empty($nav['icon'])}
<i style="background:url({media $nav['icon']}) no-repeat;background-size:cover;width:18px;height:18px;{$nav['css']['icon']['style']}"></i>
{else}
<i class="fa fa-fw {$nav['css']['icon']['icon']}" style="{$nav['css']['icon']['style']}"></i>
{/if}
</a>
</div>
{php if($i>4) break;}
{php $i++;}
{/loop}
</div>
<script>
window.addEventListener("DOMContentLoaded", function(){
var btn = document.getElementById("quick-btn");
btn.onclick = function(){
var divs = document.getElementById("quick-quick").querySelectorAll("div");
var className = className=this.checked?"on":"";
for(var i = 0;i<divs.length; i++){
divs[i].className = className;
}
}
}, false);
</script>
|