Ajax Loader
HTML 
link(rel='stylesheet', href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css")
1
link(rel='stylesheet', href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css")
2
script(src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js")
3
 
4
#sidemenu-bg.sidemenu-bg.hide
5
#wrap
6
  #content
7
    - var p = 0;
8
    while p < 15
9
      - p++
10
      p Praesent viverra magna enim, vitae placerat sapien pulvinar a. Maecenas ut lobortis nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eu arcu vel odio vulputate facilisis gravida eu dolor. Pellentesque rhoncus lobortis nibh, vel vulputate augue posuere vel. Quisque sit amet rutrum augue, quis auctor sem. Nam mauris erat, dapibus a neque nec, placerat varius quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris euismod efficitur libero, sit amet euismod elit lacinia in. Donec metus dui, rutrum et ipsum finibus, feugiat rhoncus dui. Sed rhoncus mi ut dolor eleifend, sed mattis tortor porttitor. Maecenas mollis eros vitae bibendum vulputate. Proin placerat a lorem id pharetra. In imperdiet enim metus, aliquam gravida ipsum mattis in. Etiam ac tempus urna. Quisque consequat mauris ut arcu feugiat, ut lobortis ligula imperdiet.
11
  ul#sidemenu.sidemenu
12
    li.logo: a(href="#home"): i.habra H
13
    li.has-submenu
14
      a(href="#user")
15
        i.fa.fa-user
16
      ul.sidemenu-sub
17
        li.text
18
          h4 User
19
          p
20
            | You do not have the karma to vote.
21
            a(href="#karmadrocherstvo") How to raise karma?
22
        li: a(href="#my-feed") My feed
23
        li: a(href="#my-profile") My profile
24
        li: a(href="#my-posts") My posts
25
        li: a(href="#my-comments") My comments
26
        li: a(href="#my-dialogues") My dialogues
27
        li: a(href="#my-favourites") My favourites
28
29
    li.tracker.has-submenu
30
      a(href="#tracker")
31
        .marker 79
32
        i.fa.fa-bell
33
      ul.sidemenu-sub
34
        li.text
35
          h4 Tracker
36
        li: a(href="#track-posts")
37
          .marker.pull-right 79
38
          |Posts
39
        li: a(href="#subscribers") Subscribers
40
        li: a(href="#mentions") Mentions
41
        li: a(href="#applications") Applications
42
    li.has-submenu
43
      a(href="#sections")
44
        i.fa.fa-bars
45
      ul.sidemenu-sub
46
        li.text
47
          h4 Sections
48
        li: a(href="#search") Search
49
        li: a(href="#posts") Posts
50
        li: a(href="#hubs") Habs
51
        li: a(href="#companies") Companies
52
        li: a(href="#users") Users
53
        li: a(href="#q_a")
54
          i.fa.fa-rocket.pull-right
55
          |Q&A
56
        li: a(href="#sandbox") Sandbox
57
    li: a(href="#write"): i.fa.fa-pencil
58
    li.full-height
59
      a.hide#move-up(href="#move-up"): i.fa.fa-arrow-circle-up
60
      a.hide#move-down(href="#move-down"): i.fa.fa-arrow-circle-down
61
    li.has-submenu
62
      a(href="#settings"): i.fa.fa-cog
63
      ul.sidemenu-sub
64
        li.text
65
          h4 Settings
66
        li: a(href="#account") Account
67
        li.pull-down: a(href="#exit") Exit
68
 
 
CSS 
//////////////////
1
//////////////////
2
// Vars
3
//////////////////
4
 
5
$dark-color = #333
6
$brand-color = #a0c2ce
7
$link-color = #6da3bd
8
$marker-color = #fb8a87
9
 
10
$font-size = 12px
11
 
12
$cell-size = 71px
13
$marker-size = max(16px, ceil($cell-size * .22))
14
$sidemenu-width = $cell-size * 3.5
15
$sidemenu-bg = #f2f2f2
16
$sidemenu-z = 100
17
$icon-base = 14px
18
 
19
//////////////////
20
// Mixins
21
//////////////////
22
 
23
makelongshadow($color, $size = 48)
24
  r = (0px 0px $color)
25
  for i in (1..$size)
26
    shadow = , i * 1px i * 1px $color
27
    push(r, shadow)
28
  return r
29
 
30
longshadow(color, size)
31
  text-shadow makelongshadow(color, size)
32
 
33
//////////////////
34
// Styles
35
//////////////////
36
*
37
*:before
38
*:after
39
  box-sizing border-box
40
 
41
html
42
  font 300 $font-size Arial, "PT Sans", sans-serif
43
  color $dark-color
44
 
45
html
46
body
47
  padding 0
48
  margin 0
49
 
50
html
51
body
52
.sidemenu
53
  height 100%
54
 
55
a
56
  color $link-color
57
  text-decoration none
58
  &:hover
59
    color darken($link-color, 20)
60
    text-decoration underline
61
 
62
ul
63
  margin 0
64
  padding 0
65
 
66
h4
67
p
68
  margin 0 0 6px
69
h4
70
  font-size $font-size * 1.6
71
  font-weight 500
72
 
73
#wrap
74
  max-width 640px
75
  margin 0 auto
76
 
77
#content
78
  margin-left $cell-size
79
  padding $cell-size * .25
80
 
81
.pull-right
82
  float right
83
 
84
.hide
85
  display none !important
86
 
87
.sidemenu-bg
88
  position fixed
89
  top 0
90
  right 0
91
  bottom 0
92
  left 0
93
  background-color rgba(black, .37)
94
  z-index $sidemenu-z - 1
95
 
96
.sidemenu
97
  position fixed
98
  top 0
99
  display table
100
  background-color $sidemenu-bg
101
  z-index $sidemenu-z
102
  & > li
103
    display table-row
104
    &:hover
105
    &.active
106
      background-color darken($sidemenu-bg, 4)
107
    & > a
108
      box-shadow inset 0 -1px 0  darken($sidemenu-bg, 6)
109
    &:first-child
110
    &:last-child
111
      & > a
112
        box-shadow none
113
    &.active
114
      & .sidemenu-sub
115
        display table-cell
116
      & > a
117
        box-shadow inset 3px 0 0  darken($sidemenu-bg, 22)
118
        color darken($sidemenu-bg, 60)
119
 
120
    &.full-height
121
      height 100%
122
      & > a
123
        vertical-align middle
124
    & > a
125
      display table-cell
126
      height $cell-size
127
      width $cell-size
128
      color darken($sidemenu-bg, 15)
129
      text-align center
130
      text-decoration none
131
      &:hover
132
        color darken($sidemenu-bg, 50)
133
      & > .fa
134
        font-size $icon-base * ceil($cell-size/3/$icon-base)
135
        line-height $cell-size
136
  
137
    &.logo
138
      background-color $brand-color
139
      text-align center
140
      overflow hidden
141
      & > a
142
        color lighten($brand-color, 80)
143
        overflow hidden
144
      & .habra
145
        font 700 $cell-size * .68 Tahoma
146
        line-height $cell-size
147
        longshadow(mix($brand-color, black, 81), remove-unit($cell-size/2.5))
148
    &.tracker
149
      & > a
150
        position relative
151
        & > .marker
152
          $pos = $marker-size * .45
153
          position absolute
154
          top $pos
155
          right $pos
156
      & .marker
157
        $fs = $marker-size * .6875
158
        font-size $fs
159
        font-weight 600
160
        color white
161
        background-color $marker-color
162
        display inline-block
163
        border-radius $marker-size
164
        line-height $marker-size
165
        min-width $marker-size
166
        text-align center
167
    
168
    & .sidemenu-sub
169
      display none
170
      list-style none
171
      background-color darken($sidemenu-bg, 2)
172
      width $sidemenu-width
173
      position absolute
174
      top 0    
175
      left $cell-size
176
      bottom 0
177
      border-left 1px solid darken($sidemenu-bg, 5)
178
      z-index $sidemenu-z + 1
179
      & > li
180
        &.text
181
        & > a
182
          padding ($cell-size * 0.15) ($cell-size * 0.25)
183
        &.text
184
          & > h4
185
            margin-top 8px
186
          & > p
187
            color darken($sidemenu-bg, 40)
188
        &.pull-down
189
          & > a
190
            position absolute
191
            bottom 0
192
            left 0
193
            right 0
194
            padding-top 0
195
            padding-bottom 0
196
            line-height $cell-size
197
        & > a
198
          display block
199
          font-size $font-size * 1.2
200
          font-weight 700
201
          color darken($sidemenu-bg, 45)
202
          &:hover
203
            color darken($sidemenu-bg, 69)
204
            text-decoration none
205
            background-color darken($sidemenu-bg, 9)
206
          & > .fa
207
            margin-top ($font-size / 6)
 
JavaScript 
$ ->
1
$ ->
2
  $doc = $ document
3
  $content = $ '#content'
4
  $slidemenu_bg = $ '#sidemenu-bg'
5
  $sidemenu = $ '#sidemenu'
6
  $has_submenu = $sidemenu.find '> li.has-submenu'
7
  $no_submenu = $sidemenu.find '> li:not(.has-submenu)'
8
9
  removeActive = null
10
11
  $content.load "http://cors.io/loripsum.net/api/100"
12
 
13
  move =
14
    up: $ '#move-up'
15
    down: $ '#move-down'
16
    last: $doc.scrollTop()
17
  
18
  move.up.click ->
19
    move.last = $doc.scrollTop()
20
    $doc.scrollTop 0
21
    $doc.scroll()
22
    move.down.removeClass 'hide'
23
  
24
  move.down.click ->
25
    $doc.scrollTop move.last
26
    $doc.scroll()
27
    move.up.removeClass 'hide'
28
    move.down.addClass 'hide'
29
30
  $doc.scroll ->
31
    if $doc.scrollTop() > 0
32
      move.up.removeClass 'hide'
33
      move.down.addClass 'hide'
34
    else
35
      move.up.addClass 'hide'
36
37
  $has_submenu.hover ->
38
    $t = $ this
39
    $has_submenu.removeClass 'active'
40
    $t.addClass 'active'
41
    $slidemenu_bg.removeClass 'hide'
42
    clearInterval removeActive
43
  , ->
44
    $t = $ this
45
    removeActive = setTimeout (->
46
       $t.removeClass 'active'
47
       $slidemenu_bg.addClass 'hide'
48
      ), 1000
49
    
50
  hide = ->
51
    $slidemenu_bg.addClass 'hide'
52
    $has_submenu.removeClass 'active'
53
  
54
  $slidemenu_bg.click hide
55
  $no_submenu.hover hide
 

Habrahabr side panel menu

CSSDeck G+