Titre du sujet : Re: [TEST] multiMenu 1.8 beta, quand multiMenu devient dynamique
par blueteen sur 17/01/2006 12:29:21
voici le code utilisé par le menu que je teste.
pour les moments, la feuille de style est intégrée, mais par la suite, je la placerai dans un fichier à part.
j'ai commenté au maximum la feuille de style, tu y trouveras les parties concernant les couleurs de liens/celulles/bordure, etc...
<style type="text/css">
ul#primary-nav,
ul#primary-nav ul {
margin: 0;
padding: 0;
width: 150px; /* largeur des menus */
border-bottom: 1px solid #ccc;
background: #fff; /* IE6 Bug - couleur de fond des cellules doit être définie */
font-size: 100%;
}
ul#primary-nav li {
position: relative;
list-style: none;
}
ul#primary-nav li a {
display: block;
text-decoration: none;
color: #777; /* couleur de la police dans les cellules */
padding: 3px; /* espace à l'intérieur de la cellule */
border: 1px solid #ccc; /* couleur des bordures des cellules */
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac */
* html ul#primary-nav li { float: left; height: 1px; }
* html ul#primary-nav li a { height: 1px; }
/* End */
ul#primary-nav ul {
position: absolute;
display: none;
left: 148px; /* définir 2px de moins que la largeur définie */
top: 0; /* alignement du premier sous-menu avec le lien principal */
}
ul#primary-nav li ul li a { padding: 2px 5px; } /* styles des sous-menus */
/* 5px = espace gauche/droite, texte à l'intérieur de la cellule */
/* 2px = espace haut/bas, texte à l'intérieur de la cellule */
ul#primary-nav li:hover ul ul, /* gère 2ème niveau */
ul#primary-nav li:hover ul ul ul, /* gère 3ème niveau */
ul#primary-nav li:hover ul ul ul ul, /* gère 4ème niveau */
ul#primary-nav li:hover ul ul ul ul ul, /* gère 5ème niveau */
ul#primary-nav li.over ul ul, /* gère 2ème niveau */
ul#primary-nav li.over ul ul ul, /* gère 3ème niveau */
ul#primary-nav li.over ul ul ul ul, /* gère 4ème niveau */
ul#primary-nav li.over ul ul ul ul ul { display: none; } /* gère 5ème niveau */
ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul, /* gère 2ème niveau */
ul#primary-nav li li li:hover ul, /* gère 3ème niveau */
ul#primary-nav li li li li:hover ul, /* gère 4ème niveau */
ul#primary-nav li li li li li:hover ul, /* gère 5ème niveau */
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul, /* gère 2ème niveau */
ul#primary-nav li li li.over ul, /* gère 3ème niveau */
ul#primary-nav li li li li.over ul, /* gère 4ème niveau */
ul#primary-nav li li li li li.over ul { display: block; } /* gère 5ème niveau */
ul#primary-nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }
ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #f9f9f9; } /* couleur du fond de la cellule lorsque de l'on passe dessus avec la souris*/
ul#primary-nav li a:hover { color: #E2144A; } /* couleur des liens lorsque l'on passe dessus avec la souris */
</style>
<script type="text/javascript">
function IEHoverPseudo() {
var navItems = document.getElementById("primary-nav").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "menuparent") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "menuparent"; }
}
}
}
window.onload = IEHoverPseudo;
</script>
|
