Menu et compatibilité Javascript IE

Marsh Posté le 13-01-2015 à 17:10:01

Bonjour,

je poste ici car je ne sais pas bien d'où vient le problème ! :s

J'ai un menu que j'ai adapté de ce tuto : http://tympanus.net/codrops/2010/1 [...] ffect-menu

Ce menu fonctionne très bien...sauf sous IE (bien entendu) ! Bon, vous allez me dire "il faut arrêter d'utiliser IE Aussi !" je suis bien d'accord, mais j'ai tout de même des visiteurs qui persistent et qui ne peuvent donc pas accéder à tous les onglets du menu...dommage.

Voici mon code:

Code :

<div id="botmenu">
<div class="oe_wrapper">
<ul id="oe_menu" class="oe_menu">
<li><a href="">Home</li>
<li><a href="">Onglet 1</a>
<div class="menuc">
<ul>
<li class="oe_heading">Titre 1</li>
<li><a href="">Sous item 1.1</a></li>
<li><a href="">SOus item 1.2</a></li>
<li><a href="">Sous item 1.3</a></li>
</ul>
<ul>
<li class="oe_heading">Titre 2</li>
<li><a href="">Sous item 2.1</a></li>
<li><a href="">Sous item 2.2</a></li>
<li><a href="">Sous item 2.3</a></li>
</ul>
</div>
</li>
<li><a href="">Onglet 2</a>
<div class="qsdf">
<ul>
<li class="oe_heading">Titre 3</li>
<li><a href="">Sous item 3.1</a></li>
<li><a href="">Sous item 3.2</a></li>
<li><a href="">Sous item 3.3</a></li>
</ul>
<ul>
<li class="oe_heading">Titre 4</li>
<li><a href="">Sous item 4.1</a></li>
<li><a href="">Sous item 4.2</a></li>
<li><a href="">Sous item 4.3</a></li>
<li><a href="">Sous item 4.4</a></li>
</ul>
</div>
</li>
<li><a href="">Contacts</a></li>
</ul>
</div>
</div>

JAVASCRIPT (qui est inséré en bas de page où il y a le code HTML du menu)

Code :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');
$oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true,true).fadeTo(200, 0);
$oe_menu_items.children('div').hide();
})
});
</script>

Sous IE, voici la description de la visualisation: en gros on a les onglets "Home", "ONGLET 1", "ONGLET2" et "Contacts" qui sont les uns en dessous des autres au lieu d'être côte à côte et sans vraiment de mise en forme.

Lorsque la souris passe sur ces onglets par contre, les sous onglets s'affichent très bien ! Avec le petit effet qui va etc.

Où pourrait se situer le pb ?

Merci pour vos éventuels pistes....

Marsh Posté le 13-01-2015 à 17:10:01

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *