default.html
1.72 KB
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
44
45
46
47
48
<style>
.quick{padding:0 .5em ;position:fixed;bottom:.3em; height:50px;}
.quick a{text-decoration:none;}
.quick.quick-default{font-size:3em;}
.quick.quick-default .dropdown-menu{bottom:2.5em;left:1.5em;top:initial;}
.quick.quick-default .dropdown-menu i{ display:inline-block; width:14px; height:14px;}
.quick.quick-default .dropdown-menu.fadeInUp{display:block;}
</style>
<div class="quick quick-default">
<a href="javascript:;" class="quick-handle" data-toggle="dropdown"><i class="fa fa-plus-circle"></i></a>
<ul class="dropdown-menu animated">
{loop $_W['quickmenu']['menus'] $nav}
<li>
<a href="{$nav['url']}">
{if !empty($nav['icon'])}
<i style="background:url({$nav['icon']}) no-repeat;background-size:cover; {$nav['css']['icon']['style']}"></i>
{else}
<i class="fa fa-fw {$nav['css']['icon']['icon']}" style="{$nav['css']['icon']['style']}"></i>
{/if}
{$nav['name']}
</a>
</li>
{/loop}
</ul>
</div>
<script>
require(['bootstrap'], function($){
$('.quick.quick-default').on('show.bs.dropdown', function(e){
$(this).find('.quick-handle i').addClass('fa-minus-circle').removeClass('fa-plus-circle');
$(this).find('ul').removeClass('fadeOutDown');
$(this).find('ul').addClass('fadeInUp');
});
$('.quick.quick-default').on('hide.bs.dropdown', function(e){
if(!e.target.animated) {
$(this).find('.quick-handle i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
$(e.target).find('ul').removeClass('fadeInUp');
$(e.target).find('ul').addClass('fadeOutDown');
e.preventDefault();
e.target.animated = true;
setTimeout(function(){
$(e.target).find('.quick-handle').dropdown('toggle');
e.target.animated = false;
}, 1000);
}
});
})
</script>