responsive-sidebar/example.html at master · pczern/responsive-sidebar · 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
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
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>responsive-sidebar by Philipp Czernitzki</title>
  <style type="text/css">
    html,
    body {
      height: 100%;
      width: 100%;
    }

    body {
      font-family: Arial, sans-serif;
      font-weight: 600;
      font-size: 16px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
    }

    * {
      padding: 0%;
      margin: 0%;
    }

    h1,
    h2,
    h3 {
      line-height: 2;
    }

    div#features {
      margin-top: 2em;
    }

    #sidebar {
      display: none;
      /* if here not display: none then it would appear everytime the sidebar is closed (Adds more customization) */
      font-size: 2em;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: #1f4037;
      color: #FFF;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #21ff96, #1f4037);
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #21ff96, #1f4037);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    }

    button {
      margin-top: 2em;
      font-weight: bold;
      padding: 10px 20px;
      background-color: #00a56b;
      color: #FFF;
      border-radius: 3px;
      border: none;
    }

    ul {
      color: #AAA;
      font-weight: 300;
      list-style: none;
      line-height: 1.5;
    }
  </style>
</head>

<body>
  <h1>responsive-sidebar</h1>
  <h2>JavaScript sidebar component using CSS3 for smooth animations</h2>
  <h3>Coded without any JavaScript librarys for best performance<br>Supports most browsers including IE8</h3>
  <div id="features">
    <h3>Features</h3>
    <ul>
      <li>Open Source</li>
      <li>CSS3 Animations</li>
      <li>Provides fallback to support old browsers including IE8</li>
      <li>Uses absolute positioning because of bug in fixed positioning in most mobile browsers</li>
    </ul>
    <div id="sidebar">
      <p>This is responsive-sidebar</p>
    </div>
    <button id="sidebar-toggle">Toggle Sidebar</button>
  </div>

  <!-- Include responsive-sidebar -->
  <script src="responsive-sidebar.min.js" type="text/javascript"></script>

  <script type="text/javascript">

    // ready function
    function ready(fn) {
      if (document.readyState != 'loading') {
        fn();
      } else if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', fn);
      } else {
        document.attachEvent('onreadystatechange', function () {
          if (document.readyState != 'loading')
            fn();
        });
      }
    }

    ready(fn);

    // called when DOMContentLoaded
    function fn() {

      // Creates a new sidebar
      // Parameters: new Sidebar(sidebarSelector, [toggleButton1Selector, toggleButton2Selector], options)
      // Remember the sidebar selector should be unique otherwise there would multiple sidebars assigned to one toggleButton but you can create multiple sidebars with creating more Sidebar objects
      var sidebar = new Sidebar('#sidebar', ['#sidebar-toggle'],
        {
          displayStyle: 'flex',
          time: 1000, // duration of the CSS animation in ms - default 1000
          width: '60%', // width of the sidebar in every CSS compatible notation - default 80%
          animationTimingFunction: 'cubic-bezier(.37,1,.71,.38)',  // specifies your sidebar CSS3 animation timing function - default ease-in
          overlayStyles: // Styles for the overlay (You can add every possible CSS style here)
          {
            backgroundColor: '#222',
            opacity: 0.9
          }
        }
      );

      // responsive-sidebar also allows methods for opening and closing
      // sidebar.open() // opens the Sidebar
      // sidebar.close() // closes the Sidebar
      // sidebar.dispose() // disposes listeners (not working in IE8)
    }
  </script>
</body>

</html>