-
Notifications
You must be signed in to change notification settings - Fork 63
/
Copy pathindex.html
113 lines (112 loc) · 5.55 KB
/
index.html
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Demo Page</title>
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css"/>
<style>
#container{
max-width: 480px;
width: 100%;
margin: 20px auto;
}
#demo_box{
width: 480px;
}
.fa{
font-size: 40px;
line-height: 70px;
}
.fa-bars{
color: #3498db;
}
pre{
font-family: Consolas,Liberation Mono,Courier,monospace;
font-size: 13px;
}
@media screen and (orientation: portrait){
pre{
overflow-x: scroll;
}
}
</style>
</head>
<body>
<a href="https://github.com/gucheen/jQueryPopMenu"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<div id="container">
<h1>jQuery pop menu</h1>
<span>Click the buttons below to have a try.</span>
<h2>Demo 1: Default menu</h2>
<div id="demo_box">
<span class="pop_ctrl"><i class="fa fa-bars"></i></span>
<ul id="demo_ul">
<li class="demo_li"><a href="http://www.gucheen.pro"><div><i class="fa fa-home"></i></div><div>Home</div></a></li>
<li class="demo_li"><a href="http://blog.gucheen.pro"><div><i class="fa fa-cloud"></i></div><div>Cloud</div></a></li>
<li class="demo_li"><div><i class="fa fa-cog"></i></div><div>settings</div></li>
<li class="demo_li"><div><i class="fa fa-envelope"></i></div><div>E-mail</div></li>
<li class="demo_li"><div><i class="fa fa-clock-o"></i></div><div>Clock</div></li>
<li class="demo_li"><div><i class="fa fa-folder"></i></div><div>Files</div></li>
<li class="demo_li"><div><i class="fa fa-heart-o"></i></div><div>Favourites</div></li>
<li class="demo_li"><div><i class="fa fa-mobile"></i></div><div>Mobile</div></li>
<li class="demo_li"><div><i class="fa fa-power-off"></i></div><div>Exit</div></li>
</ul>
</div>
<h2>Demo 2: Menu with square corners and orange background</h2>
<div id="demo_box_2">
<span class="pop_ctrl"><i class="fa fa-bars"></i></span>
<ul id="demo_ul_2">
<li class="demo_li"><a href="#"><div><i class="fa fa-home"></i></div><div>Home</div></a></li>
<li class="demo_li"><div><i class="fa fa-cloud"></i></div><div>Cloud</div></li>
<li class="demo_li"><div><i class="fa fa-cog"></i></div><div>settings</div></li>
<li class="demo_li"><div><i class="fa fa-envelope"></i></div><div>E-mail</div></li>
<li class="demo_li"><div><i class="fa fa-clock-o"></i></div><div>Clock</div></li>
<li class="demo_li"><div><i class="fa fa-folder"></i></div><div>Files</div></li>
<li class="demo_li"><div><i class="fa fa-heart-o"></i></div><div>Favourites</div></li>
<li class="demo_li"><div><i class="fa fa-mobile"></i></div><div>Mobile</div></li>
<li class="demo_li"><div><i class="fa fa-power-off"></i></div><div>Exit</div></li>
</ul>
</div>
<h2>Demo 3: Menu with border and custom colors</h2>
<div id="demo_box_3">
<span class="pop_ctrl"><i class="fa fa-bars"></i></span>
<ul id="demo_ul_3">
<li class="demo_li"><div><i class="fa fa-home"></i></div><div>Home</div></li>
<li class="demo_li"><div><i class="fa fa-cloud"></i></div><div>Cloud</div></li>
<li class="demo_li"><div><i class="fa fa-cog"></i></div><div>settings</div></li>
<li class="demo_li"><div><i class="fa fa-envelope"></i></div><div>E-mail</div></li>
<li class="demo_li"><div><i class="fa fa-clock-o"></i></div><div>Clock</div></li>
<li class="demo_li"><div><i class="fa fa-power-off"></i></div><div>Exit</div></li>
</ul>
</div>
<h2>How to use:</h2>
<pre>$('#demo_box').popmenu({parameters});</pre>
<p>You can use parameters below.</p>
<pre>{
'controller': true, // use control button or not
'width': '300px', // width of menu
'background': '#34495e', // background color of menu
'focusColor': '#1abc9c', // hover color of menu's buttons
'borderRadius': '10px', // radian of angles, '0' for right angle
'top': '50', // pixels that move up
'left': '0', // pixels that move left
'iconSize': '100px', // size of menu's buttons
'color': '#fff' // color of menu's text
'border': '1px solid #000', // border style for the menu box
}</pre>
<p>Find more information on <a href="https://github.com/gucheen/jQueryPopMenu">github</a>.</p>
<footer>
Code By Guc.
</footer>
</div>
<script src="lib/jquery/jquery.min.js"></script>
<script src="src/jquery.popmenu.js"></script>
<script>
$(function(){
$('#demo_box').popmenu();
$('#demo_box_2').popmenu({'background':'#e67e22','focusColor':'#c0392b','borderRadius':'0'});
$('#demo_box_3').popmenu({'width': '200px', 'background':'#223','focusColor':'#ee5','borderRadius':'10px', 'top': '70', 'left': '-40', 'color':'#1265fe','border':'3px solid #0035fe'});
})
</script>
</body>
</html>