ios7css/context_menu.html at master · yoka/ios7css · GitHub

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
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="stylesheet" href="dist/ios7css.css" type="text/css">
  <script src="js/track.js"></script>
</head>
<body>
  <h3>Context menu</h3>
  <ul class="list">
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">1 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">2 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">3 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">4 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">5 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">6 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">7 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">8 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">9 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">10 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">11 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">12 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">13 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">14 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">15 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">16 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">17 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">18 Click to toggle menu </li>
    <li onclick="document.querySelector('.menu').classList.toggle('hidden')">19 Click to toggle menu </li>
  </ul>
  <!-- you might need to add 'fix-position' class for ios to make menu position correct -->
  <div class="menu inner">
    <div class="button-group">
      <button class="full">Flag</button>
      <button class="full">Mark as Unread</button>
      <button class="full">Move to Junk</button>
    </div>
    <br />
    <button class="full primary">Cancel</button>
  </div>
</body>
</html>