Bonjour, pour faire simple j'ai crée une page avec un design rudimentaire pour vous montrer ce qui cloche : http://jean-zay.ovh.org/test/index.html.
J'ai deux boutons, je veux faire deux sliding différents et j'arrive pas a faire marcher les deux.
Sois les deux s'ouvre en même temps soit juste le premier.
Le code html :
Le css :
Ensuite je vien de me rendre compte que cela ne marche pas sous IE8 Oo,
Je réalise un sit pour un grossiste qui vend des produits beauté et il vux absolutment un menu comme sa, car dans le menu j'ai plus de 100 liens a mettre. 10 a 15 par boutons j'ai 9 boutons.
Autant dire que c'est chaud.
Ensuite petite autre question pourquoi ce rollover tout simple avec onmouseover et onmouseout ne fonctionne pas sous IE alors que sous opéra et mozilla sa marche:
Modifié par b4rto (10 Aug 2009 - 10:57)
J'ai deux boutons, je veux faire deux sliding différents et j'arrive pas a faire marcher les deux.
Sois les deux s'ouvre en même temps soit juste le premier.
Le code html :
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div id="menu1"><img src="image/bouton.jpg" width="184" height="32"class="menu_class" /></div>;
<div id="onglet">
<ul class="the_menu">
<li><a href="#">blabla</a></li>
<li><a href="#">blabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blabla</a></li>
<li><a href="#">blabla</a></li>
<li><a href="#">blabla</a></li>
<li><a href="#">blablabalbalala</a></li>
</ul>
</div>
<div id="menu2"><img src="image/bouton.jpg" width="184" height="32" class="menu1_class" /></div>;
<div id="onglet2">
<ul class="the_menu1">
<li><a href="#">DERMOLIFT</a></li>
<li><a href="#">SKIN LIFT</a></li>
<li><a href="#">FACIAL SYSTEM PLUS</a></li>
<li><a href="#">AFG 300</a></li>
<li><a href="#">BS 200</a></li>
<li><a href="#">AFS 100</a></li>
<li><a href="#">THERMOFACIAL</a></li>
</ul>
</div>
</body>
</html>
Le css :
#menu1{
position:absolute;
top:50px;
left:50px;
z-index:2;
height:30px;
width:236px;
}
#menu2{
position:absolute;
top:100px;
left:50px;
z-index:2;
height:30px;
width:236px;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
menu_class {
border: 1px solid #342b23;
left:400px;
}
.the_menu {
left:200px;
float: left;
width: 324px;
background-color: #1b1510;
border: 1px solid #342b23;
display: none;;
}
.the_menu li {
background-color: #302f2f;
}
.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
#onglet {
position: absolute;
height:500px;
width:300px;
left:235px;
top:35px;
z-index:3;
}
#onglet2 {
position: absolute;
height:500px;
width:300px;
left:235px;
top:100px;
z-index:3;
}
menu1_class {
border: 1px solid #342b23;
left:400px;
}
.the_menu1 {
left:200px;
float: left;
width: 324px;
background-color: #1b1510;
border: 1px solid #342b23;
display: none;;
}
.the_menu1 li {
background-color: #302f2f;
}
.the_menu1 li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
.the_menu1 li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
le javascript
$(document).ready(function () {
$('img.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
});
});
{
$('img.menu1_class').click(function () {
$('ul.the_menu1').slideToggle('medium');
});
Ensuite je vien de me rendre compte que cela ne marche pas sous IE8 Oo,
Je réalise un sit pour un grossiste qui vend des produits beauté et il vux absolutment un menu comme sa, car dans le menu j'ai plus de 100 liens a mettre. 10 a 15 par boutons j'ai 9 boutons.
Autant dire que c'est chaud.
Ensuite petite autre question pourquoi ce rollover tout simple avec onmouseover et onmouseout ne fonctionne pas sous IE alors que sous opéra et mozilla sa marche:
<div id="menu">
<table border="0" cellpadding="0" cellspacing="0" width="937">
<tr>
<td><img name="menu1" src="image/menu1.jpg" width="264" height="18" border="0" id="menu1" alt="" /></td>
<td><a href="index.html"><img name="home" src="image/menu2.jpg" width="116" height="18" border="0" id="home"alt="" onmouseover="this.src='image/menu2_roll.jpg'" onmouseout="this.src='image/menu2.jpg'"/></a></td>
<td><a href="produits.html"><img name="produits" src="image/menu3.jpg" width="153" height="18" border="0" id="produits" alt="" onmouseover="this.src='image/menu3_roll.jpg'" onmouseout="this.src='image/menu3.jpg'"/></a></td>
<td><a href="contact.php"><img name="contact" src="image/menu4.jpg" width="136" height="18" border="0" id="contact" alt="" onmouseover="this.src='image/menu4_roll.jpg'" onmouseout="this.src='image/menu4.jpg'"/></a></td>
<td><img name="menu5" src="image/menu5.jpg" width="268" height="18" border="0" id="menu5" alt="" /></td>
</tr>
</table>
</div>
Modifié par b4rto (10 Aug 2009 - 10:57)
on le savait deja en même temps /
, après pour la lenteur le background je vais le viré sa j'ai deja prévenu ma patrone que sa faisait trop lourd/ Après niveau design je sais pas trop par quoi el remplacer de plus léger.