├── .gitignore
├── README.md
├── css
├── sidebar-style-bonus.css
├── sidebar-style-bonus.sass
├── sidebar-style.css
└── sidebar-style.sass
├── sidebar-markup-bonus.html
└── sidebar-markup.html
/.gitignore:
--------------------------------------------------------------------------------
1 | ### OSX ###
2 | .DS_Store
3 | .AppleDouble
4 | .LSOverride
5 |
6 | # Icon must ends with two \r.
7 | Icon
8 |
9 |
10 | # Thumbnails
11 | ._*
12 |
13 | # Files that might appear on external disk
14 | .Spotlight-V100
15 | .Trashes
16 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | HTML-and-CSS-slide-out-navigation
2 | =================================
3 |
4 | This repository supports the video found at http://youtu.be/d4P8s-mkMvs
5 |
--------------------------------------------------------------------------------
/css/sidebar-style-bonus.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | margin: 0;
3 | padding: 0; }
4 |
5 | .unit {
6 | height: 100px;
7 | width: 30%;
8 | margin: 1.5%;
9 | background: #cccccc;
10 | float: left; }
11 |
12 | .page-content {
13 | position: relative;
14 | z-index: 1;
15 | -webkit-transition: all 0.15s ease-out 0;
16 | -moz-transition: all 0.15s ease-out 0;
17 | transition: all 0.15s ease-out 0;
18 | -webkit-transform: scale(1);
19 | -moz-transform: scale(1);
20 | -ms-transform: scale(1);
21 | -o-transform: scale(1);
22 | transform: scale(1);
23 | -webkit-transform-origin: right center;
24 | -moz-transform-origin: right center;
25 | -ms-transform-origin: right center;
26 | -o-transform-origin: right center;
27 | transform-origin: right center;
28 | height: 100%;
29 | overflow: scroll;
30 | background: #eeeeee; }
31 |
32 | .toggle {
33 | text-decoration: none;
34 | font-size: 30px;
35 | color: black;
36 | -webkit-transition: all 0.15s ease-out 0;
37 | -moz-transition: all 0.15s ease-out 0;
38 | transition: all 0.15s ease-out 0;
39 | position: fixed;
40 | top: 20px;
41 | left: 20px;
42 | z-index: 2;
43 | cursor: pointer; }
44 |
45 | .sidebar {
46 | position: fixed;
47 | top: 0px;
48 | bottom: 0px;
49 | left: 0px;
50 | width: 120px;
51 | padding: 30px;
52 | background: #333333;
53 | z-index: 0; }
54 | .sidebar ul {
55 | list-style: none;
56 | margin: 0;
57 | padding: 0; }
58 | .sidebar li {
59 | color: rgba(255, 255, 255, 0.8);
60 | font-family: "Ubuntu", sans-serif;
61 | font-size: 16px;
62 | margin: 0;
63 | margin-bottom: 16px;
64 | -webkit-font-smoothing: antialiased;
65 | cursor: pointer; }
66 | .sidebar li:hover {
67 | color: white; }
68 |
69 | #sidebartoggler {
70 | display: none; }
71 | #sidebartoggler:checked + .page-wrap .toggle {
72 | left: 200px; }
73 | #sidebartoggler:checked + .page-wrap .page-content {
74 | -webkit-transform: scale(0.7);
75 | -moz-transform: scale(0.7);
76 | -ms-transform: scale(0.7);
77 | -o-transform: scale(0.7);
78 | transform: scale(0.7);
79 | box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); }
80 |
--------------------------------------------------------------------------------
/css/sidebar-style-bonus.sass:
--------------------------------------------------------------------------------
1 | @import 'bourbon'
2 |
3 | html, body
4 | margin: 0
5 | padding: 0
6 |
7 | .unit
8 | height: 100px
9 | width: 30%
10 | margin: 1.5%
11 | background: #ccc
12 | float: left
13 |
14 | .page-content
15 | position: relative
16 | z-index: 1
17 | +transition()
18 | +transform(scale(1))
19 | +transform-origin(right center)
20 | height: 100%
21 | overflow: scroll
22 | background: #eee
23 |
24 | .toggle
25 | text-decoration: none
26 | font-size: 30px
27 | color: black
28 | +transition()
29 | +position(fixed, 20px 0 0 20px)
30 | z-index: 2
31 | cursor: pointer
32 |
33 |
34 | .sidebar
35 | +position(fixed, 0px 0 0px 0px)
36 | width: 120px
37 | padding: 30px
38 | background: #333
39 | z-index: 0
40 |
41 | ul
42 | list-style: none
43 | margin: 0
44 | padding: 0
45 |
46 | li
47 | color: rgba(255,255,255,0.8)
48 | font-family: "Ubuntu", sans-serif
49 | font-size: 16px
50 | margin: 0
51 | margin-bottom: 16px
52 | -webkit-font-smoothing: antialiased
53 | cursor: pointer
54 |
55 | &:hover
56 | color: rgba(255,255,255,1)
57 |
58 | #sidebartoggler
59 | display: none
60 |
61 | &:checked + .page-wrap
62 |
63 | .toggle
64 | left: 200px
65 |
66 | .page-content
67 | +transform(scale(0.7))
68 | box-shadow: 0px 4px 20px rgba(0,0,0,0.2)
--------------------------------------------------------------------------------
/css/sidebar-style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | margin: 0;
3 | padding: 0; }
4 |
5 | .unit {
6 | height: 100px;
7 | width: 30%;
8 | margin: 1.5%;
9 | background: #cccccc;
10 | float: left; }
11 |
12 | .page-content {
13 | position: relative;
14 | z-index: 0;
15 | -webkit-transition: all 0.15s ease-out 0;
16 | -moz-transition: all 0.15s ease-out 0;
17 | transition: all 0.15s ease-out 0;
18 | background: #eeeeee; }
19 |
20 | .toggle {
21 | text-decoration: none;
22 | font-size: 30px;
23 | color: black;
24 | -webkit-transition: all 0.15s ease-out 0;
25 | -moz-transition: all 0.15s ease-out 0;
26 | transition: all 0.15s ease-out 0;
27 | position: fixed;
28 | top: 20px;
29 | left: 20px;
30 | z-index: 1;
31 | cursor: pointer; }
32 |
33 | .sidebar {
34 | position: fixed;
35 | top: 0px;
36 | bottom: 0px;
37 | left: -190px;
38 | -webkit-transition: all 0.15s ease-out 0;
39 | -moz-transition: all 0.15s ease-out 0;
40 | transition: all 0.15s ease-out 0;
41 | width: 120px;
42 | padding: 30px;
43 | background: #333333;
44 | z-index: 0; }
45 | .sidebar ul {
46 | list-style: none;
47 | margin: 0;
48 | padding: 0; }
49 | .sidebar li {
50 | color: rgba(255, 255, 255, 0.8);
51 | font-family: "Ubuntu", sans-serif;
52 | font-size: 16px;
53 | margin: 0;
54 | margin-bottom: 16px;
55 | -webkit-font-smoothing: antialiased;
56 | cursor: pointer; }
57 | .sidebar li:hover {
58 | color: white; }
59 |
60 | #sidebartoggler {
61 | display: none; }
62 | #sidebartoggler:checked + .page-wrap .sidebar {
63 | left: 0px; }
64 | #sidebartoggler:checked + .page-wrap .toggle {
65 | left: 200px; }
66 | #sidebartoggler:checked + .page-wrap .page-content {
67 | padding-left: 180px; }
68 |
--------------------------------------------------------------------------------
/css/sidebar-style.sass:
--------------------------------------------------------------------------------
1 | @import 'bourbon'
2 |
3 | html, body
4 | margin: 0
5 | padding: 0
6 |
7 | .unit
8 | height: 100px
9 | width: 30%
10 | margin: 1.5%
11 | background: #ccc
12 | float: left
13 |
14 | .page-content
15 | position: relative
16 | z-index: 0
17 | +transition()
18 | background: #eee
19 |
20 | .toggle
21 | text-decoration: none
22 | font-size: 30px
23 | color: black
24 | +transition()
25 | +position(fixed, 20px 0 0 20px)
26 | z-index: 1
27 | cursor: pointer
28 |
29 |
30 | .sidebar
31 | +position(fixed, 0px 0 0px -190px)
32 | +transition()
33 | width: 120px
34 | padding: 30px
35 | background: #333
36 | z-index: 0
37 |
38 | ul
39 | list-style: none
40 | margin: 0
41 | padding: 0
42 |
43 | li
44 | color: rgba(255,255,255,0.8)
45 | font-family: "Ubuntu", sans-serif
46 | font-size: 16px
47 | margin: 0
48 | margin-bottom: 16px
49 | -webkit-font-smoothing: antialiased
50 | cursor: pointer
51 |
52 | &:hover
53 | color: rgba(255,255,255,1)
54 |
55 | #sidebartoggler
56 | display: none
57 |
58 | &:checked + .page-wrap
59 |
60 | .sidebar
61 | left: 0px
62 |
63 | .toggle
64 | left: 200px
65 |
66 | .page-content
67 | padding-left: 180px
--------------------------------------------------------------------------------
/sidebar-markup-bonus.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Let's make a sidebar!!
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 |
83 |
84 |
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 |
83 |
84 |