-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (113 loc) · 4 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./dist/css/justabs.min.css">
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
}
ul {
display: flex;
flex-direction: row;
list-style: none;
padding: 0;
margin: 0;
width: 500px;
}
li {
flex: 1;
transition: 200ms ease;
text-align: justify;
}
.justabs {
margin-bottom: 16px;
}
.justabs li {
padding: 10px;
background-color: #ccc;
cursor: pointer;
text-align: center;
}
.justabs li.active {
color: white;
background-color: #F15D4A;
}
.justabs li:hover {
color: black;
background-color: #EEE;
}
.justabs-panels > * {
padding: 16px;
box-shadow: 0px 2px 6px rgba(0,0,0,.04),
0px 4px 12px rgba(0,0,0,.04),
0px 6px 18px rgba(0,0,0,.04),
0px 8px 24px rgba(0,0,0,.04);
}
</style>
</head>
<body>
<!-- Tabs -->
<ul data-tab="panelTabs" class="justabs">
<li data-target="panel1" class="active">Pane 1</li>
<li data-target="panel2">Pane 2</li>
<li data-target="panel3">Pane 3</li>
<li data-target="panel4">Pane 4</li>
<li data-target="panel5">Pane 5</li>
</ul>
<!-- Panels -->
<ul data-panel="panelTabs" class="justabs-panels">
<li data-name="panel1" class="active">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor nulla condimentum feugiat pharetra. Vestibulum ultrices vulputate imperdiet. Sed nunc dolor, finibus non rutrum accumsan, fringilla in sem. Fusce ullamcorper lobortis lacus, bibendum porttitor enim aliquet nec. Suspendisse vitae turpis nisi. Nam quis sem libero.
</li>
<li data-name="panel2">
Vivamus ultricies purus nibh, nec bibendum magna vulputate a. Fusce commodo nec urna at congue. Duis semper dui vestibulum porttitor scelerisque. Phasellus rutrum enim non ante semper finibus.
</li>
<li data-name="panel3">
Duis justo est, pharetra et venenatis id, tincidunt ac magna. Praesent venenatis eleifend nibh, et dignissim elit sagittis a. Morbi in justo ut erat tincidunt venenatis.
</li>
<li data-name="panel4">
Ut eu mi et velit congue rhoncus. Nam nec porttitor est, sed tempor quam. Maecenas sit amet urna lectus. Ut tincidunt suscipit vehicula. Sed non metus et elit aliquet facilisis.
</li>
<li data-name="panel5">
Vivamus elementum, quam ac sagittis aliquam, arcu lectus consequat libero, nec aliquam neque libero sed est.
</li>
</ul>
<!-- Tabs -->
<ul data-tab="panelTabs1" class="justabs">
<li data-target="panel1" class="active">Pane 1</li>
<li data-target="panel2">Pane 2</li>
</ul>
<!-- Panels -->
<ul data-panel="panelTabs1" class="justabs-panels">
<li data-name="panel1" class="active">
<div data-tab="panelTabs2" class="justabs">
<div data-target="panel1" class="active">Pane 1</div>
<div data-target="panel2">Pane 2</div>
</div>
<div data-panel="panelTabs2" class="justabs-panels">
<div data-name="panel1" class="active">Pane 1</div>
<div data-name="panel2">Pane 2</div>
</div>
</li>
<li data-name="panel2">
Vivamus ultricies purus nibh, nec bibendum magna vulputate a. Fusce commodo nec urna at congue. Duis semper dui vestibulum porttitor scelerisque. Phasellus rutrum enim non ante semper finibus.
</li>
</ul>
<script src="./dist/js/index.js"></script>
<script>
justabs({tabGroup: 'panelTabs', togglable: true})
justabs({tabGroup: 'panelTabs1', togglable: false})
justabs({tabGroup: 'panelTabs2', togglable: false})
</script>
</body>
</html>