Bonjour a tous,
Je dois créer un menu à deux niveaux tout en CSS et qu'il soit compatible avec IE6/IE7 et FF2/FF3!
Le problème se pose pour IE6 qui ne connait pas la pseudo-classe :hover autre que sur l'élément a. Pour contrer ce problème, je passe par un fichier .htc.
Cette étape fonctionne a moitié : lorsque je survole un item du premier, ca affiche bien le sous menu correspondant, mais suivant la position du curseur il ne prend pas la même classe. Il fait une différence entre les éléments 'ul' du sous menu, 'li' du sous menu et 'a' du sous menu!
Voila mon code :
Source HTML
Code :
- <link type="text/css" href="Menu.css" rel="Stylesheet" />
- <!--[if lte IE 6]>
- <link href="MenuIE6.css" rel="stylesheet" type="text/css" />
- <![endif]-->
- <div>
- <ul id="menu">
- <li name="0">
- <a href="/MenuHorizontal/Default.aspx"><span>Home</span></a>
- </li>
- <li name="1">
- <a href="/MenuHorizontal/WebForm10.aspx"><span>Page 1</span></a>
- <ul style="left: 0px;">
- <li name="2">
- <a href="/MenuHorizontal/WebForm11.aspx">Page 1.1</a>
- </li>
- <li name="3" class="last">
- <a href="/MenuHorizontal/WebForm12.aspx">Page 1.2</a>
- </li>
- </ul>
- </li>
- <li name="4">
- <a href="/MenuHorizontal/WebForm20.aspx"><span>Page 2</span></a>
- <ul style="left: 0px;">
- <li name="5">
- <a href="/MenuHorizontal/WebForm21.aspx">Page 2.1</a>
- </li>
- <li name="6">
- <a href="/MenuHorizontal/WebForm22.aspx">Page 2.2</a>
- </li>
- <li name="7">
- <a href="/MenuHorizontal/WebForm23.aspx">Page 2.3</a>
- </li>
- <li name="8">
- <a href="/MenuHorizontal/WebForm24.aspx">Page 2.4</a>
- </li>
- <li name="9">
- <a href="/MenuHorizontal/WebForm25.aspx">Page 2.5</a>
- </li>
- <li name="10">
- <a href="/MenuHorizontal/WebForm26.aspx">Page 2.6</a>
- </li>
- <li name="11" class="last">
- <a href="/MenuHorizontal/WebForm27.aspx">Page 2.7</a>
- </li>
- </ul>
- </li>
- </ul>
- </div>
|
CSS : Menu
Code :
- #menu{ width:635px; height:53px; margin:20px 0px 0px 0px; padding:0px; list-style:none; background:url('images/menu-background.gif') no-repeat 50% bottom; overflow:hidden}
- #menu li{ float:left; margin:0px; padding:3px 0px 4px 0px}
- #menu li a{ color:#56A1CE; font-weight:bold; text-decoration:none; margin:0px; display:block}
- #menu>li a:hover{ background:url('images/menu-hov.gif') no-repeat left top; overflow:hidden; color:#8C8C8C}
- #menu li a span{ margin:0px; padding:3px 15px 4px 10px; display:block;}
- #menu>li a:hover span{ background:url('images/menu-arrow.gif') no-repeat right top; overflow:hidden}
- #menu li li a{ display:block; padding:2px 0px 2px 0px; color:#56A1CE; margin-top:2px; text-decoration:none}
- #menu li li a:hover{ color:#8C8C8C; text-decoration:none; background:none}
- #menu li li{ float:left; border:0; padding:0px 7px 0px 7px; border-right:1px solid #8C8C8C;position: relative; top: 5px;}
- #menu li li.last {border:0px;}
- li ul{visibility:hidden; position:absolute;font-size:90%; list-style:none;}
- html>body li:hover ul { visibility:visible; width: 650px;}
|
CSS : MenuIE6.css
Code :
- #menu li, #menu li a, #menu li a span { behavior: url('IE6Hover.htc'); }
- .displayItems {visibility: visible;top: 0px;}
- #menu li a.displayItems { background: url('images/menu-hov.gif') no-repeat left top;overflow: hidden;color: #8C8C8C;}
- #menu li a.displayItems span {background: url('images/menu-arrow.gif') no-repeat right top;overflow: hidden;}
- #menu li li a.displayItems { color: #8C8C8C; text-decoration: none; background: none; }
|
Et le fichier .htc
Code :
- <public:attach event="onmouseover" onevent="montrer()" />
- <public:attach event="onmouseout" onevent="cacher()" />
- <script language="JScript">
- var _liste = this.getElementsByTagName('*');
- var _listeLI = this.getElementsByTagName('li');
- var _listeA = this.getElementsByTagName('a');
- var _listeSPAN = this.getElementsByTagName('span');
- function montrer() {
- var i;
- for (i = 0; i < _listeLI.length; i++) {
- _listeLI[i].className = 'displayItems';
- }
- window.status += i;
- for (i = 0; i < _listeA.length; i++)
- { _listeA[0].className = 'displayItems'; }
- window.status += i;
- for (i = 0; i < _listeSPAN.length; i++)
- { _listeSPAN[0].className = 'displayItems'; }
- window.status += i+";";
- }
- function cacher() {
- for (i = 0; i < _liste.length; i++) {
- _liste[i].className = '';
- }
- }
- </script>
|
Désolé pour la longueur^^
Est-ce que quelqu'un peut m'aider... 
Sinon, une deuxième petite chose, si je centre mon le div contenant le menu, les sous menus prennent une position absolute au lieu de relative (sur tout les navig)??
Merci d'avance Enjoy @+
Julien
