-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnavi.css
255 lines (213 loc) · 10.6 KB
/
navi.css
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
/*In dieser Datei wird die Formatierung der Navigationsleiste vorgenommen*/
#na {
width:100%;
}
#nav{
float:left;
width:100%;
margin:0px;
white-space: nowrap;
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}
#nav >ul{
margin:0px;
float:left;
z-index:1001;
}
#navigation{
padding: 0px;
}
/*Alle Menüpunkte in der Navigationsleiste, also auch die Unterpunkte*/
#navigation li {
display:inline;
font-size:15px;
font-weight:bold;
float:left;
position:relative;
}
/*Alle Kategorien haben dieselbe Farbe wie die Navileiste*/
#navigation >li >a {
margin:0px;
padding:10px 15px;
color:black;
display:inline-block;
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}
/*Wenn über die Kategorien gehovert wird, fahren sich die Untermenüs aus*/
#navigation >li:hover > ul{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
z-index:100;
display:block;
/*top:38px;*/
}
/*Unterpunktnamen in beiden Ebenen*/
#navigation ul > li > a {
background:none;
float:left;
padding:7px 15px;
color:black;
display:inline-block;
float:left;
clear:both;
width:190px;
}
/*Untermenüs haben unten abgerundete Ecken*/
#navigation >li > ul {
list-style: none;
margin: 0;
padding: 0;
display:none;
position: absolute;
width:220px;
border-radius: 0px 0px 10px 10px;
-moz-box-shadow: 0px 10px 14px #000000;
-webkit-box-shadow: 0px 10px 14px #000000;
-ms-box-shadow: 0px 10px 14px #000000;
-o-box-shadow: 0px 10px 14px #000000;
box-shadow: 0px 10px 14px #000000;
background:#AFAFAF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#AFAFAF'); /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#AFAFAF')";
background-image: -moz-linear-gradient(top, #fefefe, #AFAFAF);
background-image: -ms-linear-gradient(top, #fefefe, #AFAFAF);
background-image: -o-linear-gradient(top, #fefefe, #AFAFAF);
background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#AFAFAF));
background-image: -webkit-linear-gradient(top, #fefefe, ##AFAFAF);
background-image: linear-gradient(top, #fefefe, #AFAFAF);
/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
}
/*Hintergrundfarbenänderung, wenn über Unterpunkte gehovert wird*/
#navigation >li > ul > li a:hover {
background:white;
float:left;
color:black;
border-radius: 10px 10px 10px 10px;
}
/*Wenn über Unterpunkt gehovert wird*/
#navigation li > ul >li:hover {
top:1px;
}
/*Wenn über Unterpunkte gehovert wird, fahren sich die doppelten Menüs aus */
#navigation > li > ul > li:hover > ul{
/*these 2 styles are very important,
being the ones which make the drop-down to appear on hover */
z-index:100;
display:block;
top:38px;
}
/*doppelt ausgefahrene Liste hat drei abgerundete Ecken und weißen hintergrund*/
#navigation ul >li> ul {
list-style: none;
margin: 0;
padding: 0;
display:none;
position: absolute;
width:220px;
border-radius: 0px 10px 10px 10px;
top: 0!important;
left: 220px; /* strong related to width:220px; from above */
-moz-box-shadow: 10px 10px 14px #000000;
-webkit-box-shadow: 10px 10px 14px #000000;
-ms-box-shadow: 10px 10px 14px #000000;
-o-box-shadow: 10px 10px 14px #000000;
box-shadow: 10px 10px 14px #000000;
background: #ffffff; /*white*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CFCFCF'); /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#CFCFCF')";
background-image: -moz-linear-gradient(top, #ffffff, #CFCFCF);
background-image: -ms-linear-gradient(top, #ffffff, #CFCFCF);
background-image: -o-linear-gradient(top, #ffffff, #CFCFCF);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#CFCFCF));
background-image: -webkit-linear-gradient(top, #ffffff, #CFCFCF);
background-image: linear-gradient(top, #ffffff, #CFCFCF);
/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
}
/*Wenn über Kategorie gehovert wird*/
#navigation >li >a:hover {
webkit-transition: background,box-shadow 0.5s ease;
-moz-transition: background,box-shadow 0.5s ease;
-ms-transition: background,box-shadow 0.5s ease;
-o-transition: background,box-shadow 0.5s ease;
transition: background,box-shadow 0.5s ease;
-moz-box-shadow: 0px -5px 20px #000000;
-webkit-box-shadow: 0px -50px 20px #000000;
box-shadow: 0px -5px 20px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#ff8c8c');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#ff8c8c')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
}
/*Hier werden die Farben festgelegt für die einzelenen Elemente der Navigationsleiste, wenn die Maus drüber hovert*/
#navigation >li:nth-child(1) >a:hover {
background: #FF8C8C; /*Old browsers*/
background-image: -moz-linear-gradient(top, #ffffff, #ff8c8c);
background-image: -ms-linear-gradient(top, #ffffff, #ff8c8c);
background-image: -o-linear-gradient(top, #ffffff, #ff8c8c);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#ff8c8c));
background-image: -webkit-linear-gradient(top, #ffffff, #ff8c8c);
background-image: linear-gradient(top, #ffffff, #ff8c8c);
}
#navigation >li:nth-child(2) >a:hover {
background: #D68453;
background-image: -moz-linear-gradient(top, #ffffff, #d68453);
background-image: -ms-linear-gradient(top, #ffffff, #d68453);
background-image: -o-linear-gradient(top, #ffffff, #d68453);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#d68453));
background-image: -webkit-linear-gradient(top, #ffffff, #d68453);
background-image: linear-gradient(top, #ffffff, #d68453);
}
#navigation >li:nth-child(3) >a:hover {
background: #D4D653;
background-image: -moz-linear-gradient(top, #ffffff, #d4d653);
background-image: -ms-linear-gradient(top, #ffffff, #d4d653);
background-image: -o-linear-gradient(top, #ffffff, #d4d653);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#d4d653));
background-image: -webkit-linear-gradient(top, #ffffff, #d4d653);
background-image: linear-gradient(top, #ffffff, #d4d653);
}
#navigation >li:nth-child(4) >a:hover {
background: #84D653;
background-image: -moz-linear-gradient(top, #ffffff, #84d653);
background-image: -ms-linear-gradient(top, #ffffff, #84d653);
background-image: -o-linear-gradient(top, #ffffff, #84d653);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#84d653));
background-image: -webkit-linear-gradient(top, #ffffff, #84d653);
background-image: linear-gradient(top, #ffffff, #84d653);
}
#navigation >li:nth-child(5) >a:hover {
background: #56D653;
background-image: -moz-linear-gradient(top, #ffffff, #56d653);
background-image: -ms-linear-gradient(top, #ffffff, #56d653);
background-image: -o-linear-gradient(top, #ffffff, #56d653);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#56d653));
background-image: -webkit-linear-gradient(top, #ffffff, #56d653);
background-image: linear-gradient(top, #ffffff, #56d653);
}
#navigation >li:nth-child(6) >a:hover {
background:#53d6d4 ;
background-image: -moz-linear-gradient(top, #ffffff, #53d6d4);
background-image: -ms-linear-gradient(top, #ffffff, #53d6d4);
background-image: -o-linear-gradient(top, #ffffff, #53d6d4);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#53d6d4));
background-image: -webkit-linear-gradient(top, #ffffff, #53d6d4);
background-image: linear-gradient(top, #ffffff, #53d6d4);
}