-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
113 lines (95 loc) · 3.96 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="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Effect Off-Canvas Menu</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="css/off-canvas.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="effect-2">
<div class="jsn-content">
<div class="jsn-content-inner">
<div class="s1">
<div class="container"><h1>Effect For Offcanvas</h1></div>
</div>
<div class="s2">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Choose Option Effect</label>
<div class="col-sm-4">
<select id="effect" class="form-control">
<option value="effect-1">1. Side in on Top</option>
<option value="effect-2">2. Reveal</option>
<option value="effect-3">3. Push</option>
<option value="effect-4">4. Slide along</option>
<option value="effect-5">5. Reverse slide out</option>
<option value="effect-6">6. Rotate pusher</option>
<option value="effect-7">7. 3D rotate in</option>
<option value="effect-8">8. 3D rotate out</option>
<option value="effect-9">9. Scale down pusher</option>
<option value="effect-10">10. Scale Up</option>
<option value="effect-11">11. Scale & rotate pusher</option>
<option value="effect-12">12. Open door</option>
<option value="effect-13">13. Fall down</option>
<option value="effect-14">14. Delayed 3D Rotate</option>
</select>
</div>
<div class="col-sm-3">
<button type="button" class="btn-effect btn btn-success">Effect Offcanvas</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div><!-- /jsn-content -->
<div id="offcanvas" class="jsn-off-canvas">
<div class="position">
<button type="button" class="btn btn-danger close-menu pull-right">x</button>
<div class="clearfix"></div>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div><!-- /off-canvas -->
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script type="text/javascript">
$(document).ready(function() {
var effect = $("#effect").val();
function setClass (effect) {
$('body').removeClass().addClass(effect);
$('#offcanvas').removeClass().addClass('jsn-off-canvas ' + effect);
}
setClass(effect);
$('#effect').change(function(){
effect = $(this).val();
setClass(effect);
});
$('.btn-effect').click(function(){
$('body').toggleClass('jsn-menu-open');
});
$('.close-menu').click(function(){
$('body').removeClass('jsn-menu-open');
});
});
</script>
</body>
</html>