04/02/2013, 12:40:55
Le template que j'utilise est "Simplex" et le gabarit du menu est "simple_navigation.tpl"
Le css du menu ressemble à ça :
Le css du menu ressemble à ça :
Code :
/* ------ NAVIGATION ------ */
/* first level */
nav.main-navigation {
z-index: 990;
height: 155px;
line-height: 37px;
}
nav.main-navigation > ul {
float:right;
margin-right: 70px;
padding: 0
}
nav.main-navigation > ul > li {
background: #FF9038;
float: left;
padding-top: 55px;
margin:0 3px;
height: 155px;
width: 96px;
background: transparent url([[$path]]/menu.png) no-repeat 0 0;
text-align: center;
list-style: none;
position: relative;
}
nav.main-navigation > ul > li:first-child,
nav.main-navigation > ul > li.first {
margin-left: 0;
list-style: none;
}
nav.main-navigation > ul > li:first-child,
nav.main-navigation > ul > li.first a:hover{
margin-left: 0;
list-style: none;
}
nav.main-navigation > ul > li:last-child,
nav.main-navigation > ul > li.last {
margin-right: 0;
}
nav.main-navigation > ul > li > a,
nav.main-navigation > ul > li.sectionheader span {
font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
color: [[$white]];
text-decoration: none;
font-size: 13px;
font-weight: 550;
cursor: pointer;
text-transform: uppercase;
}
/* Second Level */
nav.main-navigation ul li ul {
top: -999em;
left: -999em;
position: absolute;
display: block;
height: 0px;
width: 200px;
padding: 10px;
background: [[$white]];
background: rgba(255,144,56,.7);
}
nav.main-navigation > ul > li:hover > ul {
height: auto;
z-index: 9999;
top: 150px;
right: 0;
left: auto;
display: block;
}
nav.main-navigation ul ul li {
position: relative;
line-height: 1;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px dotted [[$grey]];
}
/* third level */
nav.main-navigation > ul > li > ul > li:hover > ul {
height: auto;
top: 0;
right: auto;
left: -210px;
z-index: 999;
display: block
}
/* navigation text color */
nav.main-navigation ul li li a,
nav.main-navigation ul li li.sectionheader span {
padding: 6px 12px;
font-family: sans-serif;
text-transform: none;
font-weight: normal;
font-size: 12px;
text-decoration: none;
color: [[$dark_grey]];
display: block
}
nav.main-navigation a:hover,
nav.main-navigation a.current,
nav.main-navigation li.sectionheader span:hover,
nav.main-navigation li.sectionheader span.current,
nav.main-navigation li.sectionheader span.parent {
color: [[$black]]
}
nav.main-navigation ul ul li a:hover,
nav.main-navigation ul ul li a.current {
color: [[$white]]
}