UNPKG

2.42 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Demo: Dropdowns</title>
6
7 <link rel="stylesheet" href="../build/marble.css">
8
9 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:700,400,300|Open+Sans:700,400,300">
10
11 <style>
12 body {
13 margin: 20px;
14 }
15 </style>
16</head>
17<body>
18 <div class="row">
19 <div class="col-md-4">
20 <h1>Dropdown Menu</h1>
21 <div class="dropdown open">
22 <button class="btn btn-default btn-sm dropdown-select dropdown-select-group-left" type="button">
23 GET
24 <span class="icon-12-arrow-down-short"></span>
25 </button>
26 <ul class="dropdown-menu">
27 <li><button class="btn-transparent">GET</button></li>
28 <li><button class="btn-transparent">HEAD</button></li>
29 <li><button class="btn-transparent">POST</button></li>
30 <li><button class="btn-transparent">PUT</button></li>
31 <li><button class="btn-transparent">PATCH</button></li>
32 <li><button class="btn-transparent">DELETE</button></li>
33 </ul>
34 </div>
35 </div>
36 <div class="col-md-4">
37 <h1>Dropdown Menu Icon</h1>
38 <div class="dropdown dropdown-icon open">
39 <button class="btn btn-default btn-sm dropdown-select dropdown-select-group-left" type="button">
40 Dropdown
41 <span class="icon-12-arrow-down-short"></span>
42 </button>
43 <ul class="dropdown-menu">
44 <li>
45 <button class="btn-transparent">
46 <span class="icon-12-mail"></span>Item
47 </button>
48 </li>
49 <li>
50 <button class="btn-transparent">
51 <span class="icon-12-menu"></span>Item
52 </button>
53 </li>
54 <li>
55 <button class="btn-transparent">
56 <span class="icon-12-network"></span>Item
57 </button>
58 </li>
59 <li>
60 <button class="btn-transparent">
61 <span class="icon-12-pen"></span>Item
62 </button>
63 </li>
64 <li>
65 <button class="btn-transparent">
66 <span class="icon-12-person"></span>Item
67 </button>
68 </li>
69 <li>
70 <button class="btn-transparent">
71 <span class="icon-12-heart"></span>Item
72 </button>
73 </li>
74 </ul>
75 </div>
76 </div>
77 </div>
78</body>
79</html>