Ajax Loader
×
HTML 
<div class="newd"><dropdown>
1
<div class="newd"><dropdown>
2
  <input id="toggle2" type="checkbox">
3
  <label for="toggle2" style="padding:10px 0px 10px 0px;font-weight:bold;"class="animate">MENU</label>
4
  <ul class="animate">
5
    <li class="animate"><div class="idea"></div></li>
6
    <li class="animate"><div class="print"></div></li>
7
    <li class="animate"><div class="video"></div></li>
8
        <li class="animate"><div class="foto"></div></li>
9
  </ul>
10
</dropdown>
11
</div>
 
CSS 
body{
1
body{
2
  background:url(http://maracujaminds.de/images/mm.jpg);
3
}
4
.newd {
5
  margin:20px auto;
6
  width:800px;
7
  height:800px;}
8
*{
9
  padding: 0;
10
  margin: 0;
11
  font-family: 'Lato', sans-serif;
12
  box-sizing: border-box;
13
}
14
.idea {
15
  background:url(http://maracujaminds.de/images/yell_02.jpg);
16
  background-position:0px;
17
  width:55px;
18
  height:50px;
19
      -webkit-transition: all .4s ease;
20
  -moz-transition: all .4s ease;
21
  -o-transition: all .4s ease;
22
  -ms-transition: all .4s ease;
23
  transition: all .4s ease;
24
}
25
.idea:hover {
26
  background-position:-55px;
27
  width:55px;
28
  height:50px;
29
}
30
.print {
31
  background:url(http://maracujaminds.de/images/yell_03.jpg);
32
  background-position:0px;
33
  width:55px;
34
  height:50px;
35
      -webkit-transition: all .4s ease;
36
  -moz-transition: all .4s ease;
37
  -o-transition: all .4s ease;
38
  -ms-transition: all .4s ease;
39
  transition: all .4s ease;
40
}
41
.print:hover {
42
  background-position:-55px;
43
  width:55px;
44
  height:50px;
45
}
46
.video{
47
  background:url(http://maracujaminds.de/images/yell_04.jpg);
48
  background-position:0px;
49
  width:55px;
50
  height:50px;
51
      -webkit-transition: all .4s ease;
52
  -moz-transition: all .4s ease;
53
  -o-transition: all .4s ease;
54
  -ms-transition: all .4s ease;
55
  transition: all .4s ease;
56
}
57
.video:hover {
58
  background-position:-55px;
59
  width:55px;
60
  height:50px;
61
}
62
.foto {
63
  background:url(http://maracujaminds.de/images/yell_05.jpg);
64
  background-position:0px;
65
  width:55px;
66
  height:50px;
67
      -webkit-transition: all .4s ease;
68
  -moz-transition: all .4s ease;
69
  -o-transition: all .4s ease;
70
  -ms-transition: all .4s ease;
71
  transition: all .4s ease;
72
}
73
.foto:hover {
74
  background-position:-55px;
75
  width:55px;
76
  height:50px;
77
}
78
.float-right{
79
  float: right;
80
}
81
.fa{
82
 font-size: .8em;
83
  line-height: 0px !important;
84
}
85
dropdown{
86
   display: inline-block;
87
   margin: 0px;
88
  float:right;
89
}
90
dropdown label, dropdown ul li{
91
  display: block;
92
  background: #ffae00;
93
  padding: 0px;
94
  color:white;
95
  text-align:center;
96
}
97
dropdown label:hover, dropdown ul li:hover{
98
  background: #ffae00;
99
  color: white;
100
  cursor: pointer;
101
}
102
dropdown label{
103
  color: #fff;
104
  border-left: 4px solid #ffae00;
105
  border-radius: 0px;
106
  position: relative;
107
  z-index: 2;
108
}
109
dropdown input{
110
  display: none;
111
}
112
dropdown input ~ ul{
113
  position: relative;
114
  visibility: hidden;
115
  opacity: 0;
116
  top: -20px;
117
  z-index: 1;
118
}
119
dropdown input:checked + label{
120
  background: #ffae00;
121
  color: white;
122
}
123
 
124
dropdown input:checked ~ ul{
125
  visibility: visible;
126
  opacity: 1;
127
  top: 0;
128
}
129
$colors:
130
 
131
@for $i from 1 through length($colors) {
132
  dropdown ul li:nth-child(#{$i}) {
133
    border-left: 4px solid nth($colors, $i);
134
    .fa{
135
      color: nth($colors, $i);
136
    }
137
    &:hover {
138
        background: nth($colors, $i);
139
        color: white;
140
      .fa{
141
        color: white;
142
      }
143
    }
144
  }
145
}
146
 
147
.animate{
148
  -webkit-transition: all .3s;
149
  -moz-transition: all .3s;
150
  -ms-transition: all .3s;
151
  -ms-transition: all .3s;
152
  transition: all .3s;
153
  backface-visibility:hidden;
154
  -webkit-backface-visibility:hidden;
155
  -moz-backface-visibility:hidden;
156
  -ms-backface-visibility:hidden;
157
}
 

mmsoon

CSSDeck G+