par
Khorne_fr1 » 31 mars 2006, 15:32
Bonjour,
j'ai récupé un code pour réaliser un menu déroulant en CSS et javascript.
J'ai rajouté une partie pour permettre des sous-sous-menu.
Le problème c'est qu'à partir du deuxième sous-niveau, le calque contenant le deuxième sous-niveau est demesuré sous Internet Explorer et sous Firefox ca s'affiche normalement.
Je me permet de vous coller mon code si dessus
Code : Tout sélectionner
<div id='menu'>
<ul title='site_menu' class='menu_level_0' id="layer_root">
<li id="layer_1" class='menu_level_0'><a href="" onmouseover="CL();OL('ulayer_1','image1');" onmouseout="STCL('ulayer_1');" onfocus="OL('ulayer_1','image1');"><img id="image1" class="imageMenu" src="post.gif" alt="" border="0"></a>
<ul id='ulayer_1' onmouseover="KOL();" onmouseout="STCL('ulayer_1');" class='menu_level_1'>
<li id='layer_1_1' class='li_off' onmouseover="ClassLIon('layer_1_1');" onmouseout="ClassLIoff('layer_1_1');">
<a href="">Sites internet</a>
</li>
<li id='layer_1_2' class='li_off' onmouseover="ClassLIon('layer_1_2');" onmouseout="ClassLIoff('layer_1_2');">
<a href="">Menu2 </a>
</li>
</ul>
</li>
<li id="layer_2" class='menu_level_0'><a href="" onmouseover="CL();OL('ulayer_2','image2');" onmouseout="STCL('ulayer_2');" onfocus="OL('ulayer_2','image2');"><img id="image2" class="imageMenu" src="post.gif" alt="" border="0"></a>
<!-- SOUS MENU 1-->
<ul id='ulayer_2' onmouseover="KOL();" onmouseout="STCL('ulayer_2');" class='menu_level_1'>
<li id='layer_2_1' class='li_off' onmouseover="ClassLIon('layer_2_1');" onmouseout="ClassLIoff('layer_2_1');">
<a href="">Sites internet</a>
</li>
<li id='layer_2_2' class='li_off' onmouseover="ClassLIon('layer_2_2');" onmouseout="ClassLIoff('layer_2_2');"><a href="" onmouseover="OSL('ulayer_2_2','layer_2_2');" onmouseout="STCSL('ulayer_2_2');" onfocus="OSL('ulayer_2_2','layer_2_2');">Menu2</a>
<!-- SOUS MENU 2-->
<ul id='ulayer_2_2' onmouseover="KOSL('ulayer_2_2');" onmouseout="STCSL('ulayer_2_2');" class='menu_level_1'>
<li id='layer_2_2_1' class='li_off' onmouseover="ClassLIon('layer_2_2_1');" onmouseout="ClassLIoff('layer_2_2_1');">
<a href="">Sites internet</a>
</li>
<li id='layer_2_2_2' class='li_off' onmouseover="ClassLIon('layer_2_2_2');" onmouseout="ClassLIoff('layer_2_2_2');"><a href="" onmouseover="OSL('ulayer_2_2_2','layer_2_2_2');" onmouseout="STCSL('ulayer_2_2_2');" onfocus="OSL('ulayer_2_2_2','layer_2_2_2');">Menu2</a>
<!-- SOUS MENU 3-->
<ul id='ulayer_2_2_2' onmouseover="KOSL('ulayer_2_2_2');" onmouseout="STCSL('ulayer_2_2_2');" class='menu_level_1'>
<li id='layer_2_2_2_1' class='li_off' onmouseover="ClassLIon('layer_2_2_2_1');" onmouseout="ClassLIoff('layer_2_2_2_1');">
<a href="">Sites internet</a>
</li>
<li id='layer_2_2_2_2' class='li_off' onmouseover="ClassLIon('layer_2_2_2_2');" onmouseout="ClassLIoff('layer_2_2_2_2');">
<a href="">Menu2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Et la partie CSS qui correspond aux sous-menu
Code : Tout sélectionner
#submenu1 { text-align: left; border-top: 1px solid #A31D61; border-left: 1px solid #A31D61; border-right: 1px solid #A31D61; }
#submenu1 li a { text-decoration: none; color: #ffffff; }
#submenu1 li a:hover { text-decoration: none; color: #ffffff; }
#submenu2 { text-align: left; border-top: 1px solid #A31D61; border-left: 1px solid #A31D61; border-right: 1px solid #A31D61; }
#submenu2 li a { text-decoration: none; color: #ffffff; }
#submenu2 li a:hover { text-decoration: none; color: #ffffff; }
.li_off { background-color: #E62988; border-bottom: 1px solid #A31D61; list-style-type: none;}
.li_on { background-color: #F07FB8; border-bottom: 1px solid #A31D61; list-style-type: none;}
.imageMenu { float: left; }
.menu_level_0 { list-style-type: none; margin-left: 0px; padding-left: 0px; margin: 0px; padding: 0px; display: inline; }
.menu_level_1 { position: absolute;
visibility: hidden;
list-style-type: none;
vertical-align: top;
margin: 0px;
padding: 0px;
cursor: pointer;
z-index: 3;
display: block;
}
.menu_level_1 a {
font-family: arial, helvetica, geneva, Swiss, SunSans-Regular;
text-decoration: none;
font-size: 11px;
z-index: 1;
white-space: nowrap;
margin-left: 4px;
margin-right: 4px;
}
#menu {
Z-INDEX: 1; WIDTH: 200px; POSITION: relative; HEIGHT: 18px
}
Vous pouvez le voir en action ici:
http://www.clan-rca.info/menu_dhtml.html
En espérant que quelqu'un puisse m'aider
Bonjour,
j'ai récupé un code pour réaliser un menu déroulant en CSS et javascript.
J'ai rajouté une partie pour permettre des sous-sous-menu.
Le problème c'est qu'à partir du deuxième sous-niveau, le calque contenant le deuxième sous-niveau est demesuré sous Internet Explorer et sous Firefox ca s'affiche normalement.
Je me permet de vous coller mon code si dessus
[code]
<div id='menu'>
<ul title='site_menu' class='menu_level_0' id="layer_root">
<li id="layer_1" class='menu_level_0'><a href="" onmouseover="CL();OL('ulayer_1','image1');" onmouseout="STCL('ulayer_1');" onfocus="OL('ulayer_1','image1');"><img id="image1" class="imageMenu" src="post.gif" alt="" border="0"></a>
<ul id='ulayer_1' onmouseover="KOL();" onmouseout="STCL('ulayer_1');" class='menu_level_1'>
<li id='layer_1_1' class='li_off' onmouseover="ClassLIon('layer_1_1');" onmouseout="ClassLIoff('layer_1_1');">
<a href="">Sites internet</a>
</li>
<li id='layer_1_2' class='li_off' onmouseover="ClassLIon('layer_1_2');" onmouseout="ClassLIoff('layer_1_2');">
<a href="">Menu2 </a>
</li>
</ul>
</li>
<li id="layer_2" class='menu_level_0'><a href="" onmouseover="CL();OL('ulayer_2','image2');" onmouseout="STCL('ulayer_2');" onfocus="OL('ulayer_2','image2');"><img id="image2" class="imageMenu" src="post.gif" alt="" border="0"></a>
<!-- SOUS MENU 1-->
<ul id='ulayer_2' onmouseover="KOL();" onmouseout="STCL('ulayer_2');" class='menu_level_1'>
<li id='layer_2_1' class='li_off' onmouseover="ClassLIon('layer_2_1');" onmouseout="ClassLIoff('layer_2_1');">
<a href="">Sites internet</a>
</li>
<li id='layer_2_2' class='li_off' onmouseover="ClassLIon('layer_2_2');" onmouseout="ClassLIoff('layer_2_2');"><a href="" onmouseover="OSL('ulayer_2_2','layer_2_2');" onmouseout="STCSL('ulayer_2_2');" onfocus="OSL('ulayer_2_2','layer_2_2');">Menu2</a>
<!-- SOUS MENU 2-->
<ul id='ulayer_2_2' onmouseover="KOSL('ulayer_2_2');" onmouseout="STCSL('ulayer_2_2');" class='menu_level_1'>
<li id='layer_2_2_1' class='li_off' onmouseover="ClassLIon('layer_2_2_1');" onmouseout="ClassLIoff('layer_2_2_1');">
<a href="">Sites internet</a>
</li>
<li id='layer_2_2_2' class='li_off' onmouseover="ClassLIon('layer_2_2_2');" onmouseout="ClassLIoff('layer_2_2_2');"><a href="" onmouseover="OSL('ulayer_2_2_2','layer_2_2_2');" onmouseout="STCSL('ulayer_2_2_2');" onfocus="OSL('ulayer_2_2_2','layer_2_2_2');">Menu2</a>
<!-- SOUS MENU 3-->
<ul id='ulayer_2_2_2' onmouseover="KOSL('ulayer_2_2_2');" onmouseout="STCSL('ulayer_2_2_2');" class='menu_level_1'>
<li id='layer_2_2_2_1' class='li_off' onmouseover="ClassLIon('layer_2_2_2_1');" onmouseout="ClassLIoff('layer_2_2_2_1');">
<a href="">Sites internet</a>
</li>
<li id='layer_2_2_2_2' class='li_off' onmouseover="ClassLIon('layer_2_2_2_2');" onmouseout="ClassLIoff('layer_2_2_2_2');">
<a href="">Menu2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
[/code]
Et la partie CSS qui correspond aux sous-menu
[code]
#submenu1 { text-align: left; border-top: 1px solid #A31D61; border-left: 1px solid #A31D61; border-right: 1px solid #A31D61; }
#submenu1 li a { text-decoration: none; color: #ffffff; }
#submenu1 li a:hover { text-decoration: none; color: #ffffff; }
#submenu2 { text-align: left; border-top: 1px solid #A31D61; border-left: 1px solid #A31D61; border-right: 1px solid #A31D61; }
#submenu2 li a { text-decoration: none; color: #ffffff; }
#submenu2 li a:hover { text-decoration: none; color: #ffffff; }
.li_off { background-color: #E62988; border-bottom: 1px solid #A31D61; list-style-type: none;}
.li_on { background-color: #F07FB8; border-bottom: 1px solid #A31D61; list-style-type: none;}
.imageMenu { float: left; }
.menu_level_0 { list-style-type: none; margin-left: 0px; padding-left: 0px; margin: 0px; padding: 0px; display: inline; }
.menu_level_1 { position: absolute;
visibility: hidden;
list-style-type: none;
vertical-align: top;
margin: 0px;
padding: 0px;
cursor: pointer;
z-index: 3;
display: block;
}
.menu_level_1 a {
font-family: arial, helvetica, geneva, Swiss, SunSans-Regular;
text-decoration: none;
font-size: 11px;
z-index: 1;
white-space: nowrap;
margin-left: 4px;
margin-right: 4px;
}
#menu {
Z-INDEX: 1; WIDTH: 200px; POSITION: relative; HEIGHT: 18px
}
[/code]
Vous pouvez le voir en action ici: [url]http://www.clan-rca.info/menu_dhtml.html[/url]
En espérant que quelqu'un puisse m'aider