source: tapas/web/resources/js/apycom.com-4-blue-violet/menu.css @ 767

Last change on this file since 767 was 492, checked in by rboipsl, 12 years ago

ajout onglets v2.1
File size: 6.6 KB
Line 
1/**
2 *********************************************
3 * Prototype of styles for horizontal CSS-menu
4 * @data 30.06.2009
5 *********************************************
6 * (X)HTML-scheme:
7 *  <div id="menu">
8 *      <ul class="menu">
9 *          <li><a href="#" class="parent"><span>level 1</span></a>
10 *              <div><ul>
11 *                  <li><a href="#" class="parent"><span>level 2</span></a>
12 *                      <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>
13 *                  </li>
14 *              </ul></div>
15 *          </li>
16 *          <li class="last"><a href="#"><span>level 1</span></a></li>
17 *      </ul>
18 *  </div>
19 *********************************************
20 */
21
22/* menu::base */
23div#menu {
24    height: 46px;
25    padding-left: 10px;
26    background: url(images/left.png) no-repeat;
27    _background-image: url(images/left.gif);
28    width:auto;
29}
30
31div#menu ul {
32    margin: 0;
33    padding: 0;
34    list-style: none;
35    float: left;
36}
37div#menu ul.menu {
38    padding-right: 10px;
39    background: url(images/right.png) no-repeat right 0;
40    _background-image: url(images/right.gif);
41}
42
43div#menu li {
44    position: relative;
45    margin: 0;
46    padding: 0 0 0 0;
47    display: block;
48    float: left;
49    z-index: 9;
50    width: auto;
51}
52div#menu ul ul li {
53    z-index: 9;
54}
55div#menu li div {
56    list-style: none;
57    float: left;
58    position: absolute;
59    z-index: 11;
60    top: 36px;
61    left: 0;
62    visibility: hidden;
63    width: 187px;
64    padding: 0 0 11px 7px;
65    background: url(images/submenu-bottom.png) no-repeat 7px bottom;
66    _background-image: url(images/submenu-bottom.gif);
67    margin: 0px 0 0 -4px;
68}
69div#menu li:hover>div {
70    visibility: visible;
71}
72
73div#menu a {
74    position: relative;
75    z-index: 10;
76    height: 41px;
77    display: block;
78    float: left;
79    line-height: 41px;
80    text-decoration: none;
81    margin-top: 1px;
82    white-space: nowrap;
83    width: auto;
84    padding-right: 5px;
85    text-align: center;
86}
87div#menu span {
88    display: block;
89    cursor: pointer;
90    background-repeat: no-repeat;
91    background-position: 95% 0;
92    text-align: center;
93}
94
95/* menu::level1 */
96div#menu a {
97    padding: 0 30px 0 0;
98    line-height: 40px;
99    height: 46px;
100    margin-right: 5px;
101    _margin-right: 1px;
102    background: none;
103}
104div#menu span {
105    margin-top: 2px;
106    padding-left: 30px;
107    color: #fff;
108    font: bold 11px Trebuchet MS,Arial,san-serif;
109    background: none;
110    line-height: 40px;
111}
112div#menu a:hover,
113div#menu a.over {
114    background:  url(images/selected-right-sub.png)  no-repeat right -1px;
115    _background-image: url(images/selected-right-sub.gif);
116}
117div#menu a:hover span,
118div#menu a.over span {
119    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
120    _background-image: url(images/selected-left-sub.gif);
121}
122div#menu li.current a,
123div#menu ul.menu>li:hover>a {
124    background: url(images/selected-right-sub.png) no-repeat right -1px;
125    _background-image: url(images/selected-right-sub.gif);
126}
127div#menu li.current a span,
128div#menu ul.menu>li:hover>a span {
129    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
130    _background-image: url(images/selected-left-sub.gif);
131}
132div#menu ul.menu>li:hover>a span {
133    color: #2b0557;
134}
135div#menu li {  }
136div#menu li.last { background: none; }
137
138div#menu li.current a,
139div#menu li.current a span,
140div#menu.js-active a:hover,
141div#menu.js-active a:hover span,
142div#menu.js-active a,
143div#menu.js-active span {
144    background:none;
145}
146div#menu.js-active ul.menu>li:hover>a,
147div#menu.js-active ul.menu>li:hover>a span {
148    background:none;
149}
150div#menu li.current a.over {
151    background: url(images/selected-right-sub.png)  no-repeat right -1px;
152    _background-image: url(images/selected-right-sub.gif);
153}
154div#menu li.current a.over span {
155    background: url(images/selected-left-sub.png) no-repeat 0 -3px;
156    _background-image: url(images/selected-left-sub.gif);
157}
158div#menu a.over span {
159    color: #2b0557;
160}
161
162/* menu::level2 */
163div#menu ul ul li {
164    background: none;
165    padding: 0;
166}
167div#menu ul ul {
168    padding-top: 10px;
169}
170div#menu ul ul a {
171    padding: 0;
172    height: auto;
173    float: none;
174    display: block;
175    line-height: 26px;
176    font-size: 11px;
177    color: #ffffff;
178    z-index: -1;
179    padding-left: 5px;
180    white-space: normal;
181    width: 160px;
182    margin: 0 5px;
183    text-transform: none;
184}
185   
186div#menu ul ul a span {
187    padding: 0 15px;
188    line-height: 26px;
189    font-size: 11px;
190}
191div#menu li.current ul a,
192div#menu li.current ul a span {
193    background:none;
194}
195div#menu ul ul a:hover {
196    background: url(images/submenu-selected-bottom.png) no-repeat 5px bottom;
197}
198div#menu ul ul a:hover span {
199    background: url(images/submenu-selected-top.png) no-repeat 0 0;
200}
201div#menu ul ul a.parent {
202    background: url(images/submenu-pointer-bottom.gif) no-repeat 5px bottom;
203}
204div#menu ul ul a.parent span {
205    background: url(images/submenu-pointer-top.png) no-repeat 0 0;
206}
207div#menu ul ul a.parent:hover {
208    background: url(images/submenu-pointer-selected-bottom.png) no-repeat 5px bottom;
209}
210div#menu ul ul a.parent:hover span {
211    background: url(images/submenu-selected-top.png) no-repeat 0 0;
212}
213div#menu ul ul span {
214    margin-top: 0;
215    text-align: left;
216}
217div#menu ul ul li.last { background: none; }
218div#menu ul ul li {
219    width: 100%;
220}
221
222/* menu::level3 */
223div#menu ul ul div {
224    width: 180px;
225    padding: 15px 0px 8px 0px;
226    margin: -44px 0 0 169px !important;
227    background: url(images/subsubmenu-top.png) no-repeat 0px 0;
228    _background-image: url(images/subsubmenu-top.gif);
229}
230*+html div#menu ul ul div { height:10px }
231*+html div#menu.ie7 ul ul div { height:auto }
232div#menu ul ul ul {
233    padding: 0 4px 5px 1px;
234    background: url(images/submenu-bottom.png) no-repeat 0px bottom;
235    _background-image: url(images/submenu-bottom.gif);
236}
237div#menu ul ul div li {
238    position:relative;
239    top:-5px;
240}
241
242/* lava lamp */
243div#menu li.back {
244    background: url(images/lavalamp-left.png) no-repeat 0 0;
245    _background-image: url(images/lavalamp-left.gif);
246    width: 10px;
247    height: 46px;
248    z-index: 8;
249    position: absolute;
250    padding: 0;
251    margin: 0;
252}
253
254div#menu li.back .left {
255    padding:0;
256    width:auto;
257    background: url(images/lavalamp-right.png) no-repeat right 0;
258    _background-image: url(images/lavalamp-right.gif);
259    height: 46px;
260    margin: 0 5px 0 10px;
261    _margin-right: 2px;
262    float: none;
263    position: relative;
264    top: 0;
265    left: 0;
266    visibility: visible;
267}
Note: See TracBrowser for help on using the repository browser.