source: spip-zone/_squelettes_/escal/trunk/styles/menu.css @ 112840

Last change on this file since 112840 was 112840, checked in by root, 2 months ago

EscalV4 : proposition d'un 2e menu horizontal style "méga menu" full CSS

File size: 6.5 KB
Line 
1/* ==================    Menu horizontal  H2 ==================*/
2
3/* Reset */
4.nav,
5.nav a,
6.nav ul,
7.nav li,
8.nav div,
9.nav form,
10.nav input {
11        margin: 0;
12        padding: 0;
13        border: none;
14        outline: none;
15}
16.nav a {
17        text-decoration: none;
18}
19.nav li {
20        list-style: none;
21}
22/* Menu Container */
23.nav {
24        display: inline-block;
25        position: relative;
26        cursor: default;
27        z-index: 500;
28        margin-bottom: -3px;
29}
30
31/* Menu List */
32.nav > li {
33        display: block;
34        float: left;
35}
36/* Menu Links */
37.nav > li > a{
38        position: relative;
39        display: block;
40        z-index: 510;
41        height: 54px;
42        padding: 0 20px;
43        line-height: 54px;
44
45        font-weight: bold;
46        font-size: 13px;
47        color: #fcfcfc;
48        text-shadow: 0 0 1px rgba(0,0,0,.35);
49
50        background: transparent;
51
52    -webkit-transition: all .3s ease;
53    -moz-transition: all .3s ease;
54    -o-transition: all .3s ease;
55    -ms-transition: all .3s ease;
56        transition: all .3s ease;
57}
58.nav > li:hover > a {
59        border-radius: 5px 5px 0 0;
60}
61
62.nav > li:first-child > a {
63    border-radius: 3px 0 0 3px;
64    border-left: none;
65}
66
67
68/* Menu Dropdown */
69 .nav > li:hover > a, .nav > li > div{
70        background-color: white;
71 }
72 .nav .nav-column li a:hover {
73        color: #666666;
74 }
75 .nav > li:hover > a {
76        color: #372f2b;
77 }
78 .nav > li.on > a {
79        background: #fff;
80        color: #372f2b;
81        border-radius: 5px 5px 0 0;
82 }
83.nav > li > div {
84    position: absolute;
85    display: block;
86    width: 100%;
87    top: 52px;
88    left: 0;
89
90    opacity: 0;
91    visibility: hidden;
92    overflow: hidden;
93
94    border-radius: 0 0 5px 5px;
95    border-width: 2px;
96    border-style: solid;
97
98    -webkit-transition: all .3s ease .15s;
99    -moz-transition: all .3s ease .15s;
100    -o-transition: all .3s ease .15s;
101    -ms-transition: all .3s ease .15s;
102    transition: all .3s ease .15s;
103}
104.nav > li:hover > div {
105    opacity: 1;
106    visibility: visible;
107    overflow: visible;
108}
109/* Menu Content Styles */
110.nav .nav-column li {
111    float: left;
112    width: 20%;
113    padding: 1%;
114    text-align: left;
115}
116.nav .nav-column ul ul li{
117    float: none;
118    width: 100%;
119    margin: 0 0 0 10px;
120    text-align: left;
121}
122.nav .nav-column h3 {
123    margin: 20px 0 10px 0;
124    line-height: 18px;
125
126    font-weight: bold;
127    font-size: 15px;
128    color: #372f2b;
129    text-transform: uppercase;
130    text-align: center;
131}
132.nav .nav-column ul ul h3 {
133    margin: 0 0 0 10px;
134    line-height: 26px;
135    font-size: 13px;
136    text-align: left;
137}
138.nav .nav-column li a {
139    display: block;
140    line-height: 26px;
141    font-weight: bold;
142    font-size: 13px;
143    color: #888888;
144}
145
146.nav .nav-column ul ul .rubrique a {
147    font-size: 13px;
148    font-style: normal;
149    text-transform: uppercase;
150    color: #372f2b;
151}
152.nav .nav-column ul ul ul .rubrique a {
153    font-size: 11px;
154    font-style: normal;
155    text-transform: uppercase;
156    color: #372f2b;
157}
158.nav .nav-column .article a {
159    font-style: italic !important;
160    font-size: 11px !important;
161    text-transform: none !important;
162    color: #888888 !important;
163}
164
165
166/* ==================    Menu horizontal  ==================*/
167
168
169@media screen and (min-width: 641px) {
170        .menumobile {
171                display:none;
172        }
173}
174@media screen and (max-width: 640px) {
175        .menumobile {
176                display:block;
177        }
178}
179
180
181#menu {
182        clear: both;
183}
184ul#menu li:hover>ul {
185        display: block;
186}
187/* menu racine */
188ul#menu {
189        margin: 0px;
190        padding: 10px 0 0 0;
191        list-style: none;
192        font-size: 1.2rem;
193        font-weight: bold;
194        text-align: center;
195}
196ul#menu li {
197        display: inline-block;
198        position: relative;
199        padding: 0 0 5px 0;
200}
201/* cadre autour d'une entree de menu */
202ul#menu li a {
203        display: block;
204        padding: 4px 10px;
205        margin:  0 1px;
206        border-width: 1px;
207        border-style: solid;
208        text-decoration: none;
209}
210ul#menu img.spip_logos{
211  margin: 0 5px 0 0;
212  vertical-align: -5px;
213}
214ul#menu img.menutransparent{
215  margin: 0;
216}
217
218/* Les sous menu */
219ul#menu ul {
220        font-size: 1rem;
221        font-weight: normal;
222        text-align: left;
223        list-style: none;
224        margin-top: 4px;
225        padding: 0px;
226        width: 150px;
227        z-index: 100;
228        vertical-align: middle;
229        border-width: 1px;
230        border-style: solid;
231        position: absolute;
232        left: 0;
233        display: none;
234}
235ul#menu ul ul {
236        top: 1px;
237        left: 149px;
238        margin: 0px;
239}
240ul#menu ul li {
241        display: block;
242        padding: 8px 0px;
243}
244ul#menu ul li a {
245        display: block;
246        padding-top: 0;
247        padding-right: 0;
248        padding-bottom: 0;
249        padding-left: 5px;
250        border: none;
251}
252/* pour les fleches */
253ul#menu ul img {
254        position: relative;
255        float: right;
256}
257ul#menu img {
258        margin-left: 5px;
259}
260#menu ul li.article {
261  padding-left: 20px;
262}
263#entete .menu.floatable {
264        position: fixed;
265        top: 0;
266        z-index: 1000;
267}
268
269/* hack pour Safari */
270@media screen {
271ul#menu ul img {
272        -webkit-min-device-pixel-ratio: 0;
273  margin-top: 5px;
274        margin-right: 5px;
275        margin-bottom: 0;
276        margin-left: 0;
277}
278}
279
280
281/* ==================    Menu vertical  ==================*/
282#menuV ul {
283        list-style: none;
284        margin-top: 5px;
285        padding: 0px;
286}
287#menuV ul#accueilmenu {
288  margin-bottom: -5px;
289}
290#menuV ul li {
291        padding-bottom: 2px;
292        padding-left: 20px;
293        vertical-align: bottom;
294        min-height: 16px;
295}
296#menuV ul ul {
297        margin-left: -15px;
298        padding-left: 5px;
299}
300
301#menuV li.on>a {
302        font-weight: bold;
303}
304/* ==================    Menu vertical 2  ==================*/
305#menuV2 {
306        padding: 0;
307        font-size: 1.2rem;
308        text-align: left;
309        margin-top: 25px;
310
311}
312
313#menuV2 ul.menulist, #menuV2 ul.menulist ul {
314        list-style: none;
315        z-index: 500;
316        margin: 0;
317        padding: 0;
318        line-height: 1.2em;
319        width: 100%;
320}
321#menuV2 ul.menulist ul {
322        position: absolute;
323        top: -1px;
324        left: 99%;
325        border-radius: 0px;
326}
327#menuV2 ul.menulist li {
328        position: relative;
329        margin: 0;
330        padding: 0;
331        border-top-width: 1px;
332        border-right-width: 0;
333        border-bottom-width: 1px;
334        border-left-width: 1px;
335        border-style: solid;
336}
337#menuV2 ul.menulist li ul {
338        display: none;
339}
340#menuV2 ul.menulist li:hover>ul {
341        display: block;
342}
343#menuV2 ul.menulist a{
344        text-decoration: none;
345        display: block;
346        padding: 5px;
347}
348#menuV2 ul.menulist a:hover {
349        text-decoration: none;
350}
351#menuV2 ul.menulist li.smenu, #menuV2 ul.menulist li.smenu>a {
352        background-position: 170px;
353        background-repeat: no-repeat;
354}
355#menuV2 ul.menulist li.smenu:hover, #menuV2 ul.menulist li.smenu>a:hover {
356        background-position: 167px;
357        background-repeat: no-repeat;
358}
359#menuV2 ul.menulist a.menu_articles {
360}
361#menuV2 ul.menulist a.menu_articles:hover {
362}
363#menuV2 ul.menulist img, #menuV2 ul.menulist ul img {
364        position: relative;
365        float: right;
366        margin: 5px 5px 0px 0px;
367        margin-top: 5px;
368        margin-right: 5px;
369}
370
371#menuV2 ul li.article a {
372  background: url(../images/transparent.png);
373  border-radius: 0 !important;
374}
Note: See TracBrowser for help on using the repository browser.