source: iupac/menu.css @ 794

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