Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
2953 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu et compatibilité Javascript IE

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu et compatibilité Javascript IE

n°2248278
zazounn
Posté le 13-01-2015 à 17:10:01  profilanswer
 

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 :
  1. <div id="botmenu">
  2.    <div class="oe_wrapper">
  3.        <ul id="oe_menu" class="oe_menu">
  4.            <li><a href="">Home</li>
  5.            <li><a href="">Onglet 1</a>
  6.                <div class="menuc">
  7.                    <ul>
  8.                        <li class="oe_heading">Titre 1</li>
  9.                        <li><a href="">Sous item 1.1</a></li>
  10.                        <li><a href="">SOus item 1.2</a></li>
  11.                        <li><a href="">Sous item 1.3</a></li>
  12.                    </ul>
  13.                    <ul>
  14.                        <li class="oe_heading">Titre 2</li>
  15.                        <li><a href="">Sous item 2.1</a></li>
  16.                        <li><a href="">Sous item 2.2</a></li>
  17.                        <li><a href="">Sous item 2.3</a></li>
  18.                    </ul>
  19.                </div>
  20.            </li>
  21.            <li><a href="">Onglet 2</a>
  22.                <div class="qsdf">
  23.                    <ul>
  24.                        <li class="oe_heading">Titre 3</li>
  25.                        <li><a href="">Sous item 3.1</a></li>
  26.                        <li><a href="">Sous item 3.2</a></li>
  27.                        <li><a href="">Sous item 3.3</a></li>
  28.                    </ul>
  29.                    <ul>
  30.                        <li class="oe_heading">Titre 4</li>
  31.                        <li><a href="">Sous item 4.1</a></li>
  32.                        <li><a href="">Sous item 4.2</a></li>
  33.                        <li><a href="">Sous item 4.3</a></li>
  34.                        <li><a href="">Sous item 4.4</a></li>
  35.                    </ul>
  36.                </div>
  37.            </li>
  38.            <li><a href="">Contacts</a></li>
  39.        </ul>
  40.    </div>
  41. </div>


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

Code :
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  2. <script type="text/javascript">
  3.    $(function() {
  4.        var $oe_menu        = $('#oe_menu');
  5.        var $oe_menu_items  = $oe_menu.children('li');
  6.        var $oe_overlay     = $('#oe_overlay');
  7.  
  8.        $oe_menu_items.bind('mouseenter',function(){
  9.            var $this = $(this);
  10.            $this.addClass('slided selected');
  11.            $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
  12.                $oe_menu_items.not('.slided').children('div').hide();
  13.                $this.removeClass('slided');
  14.            });
  15.        }).bind('mouseleave',function(){
  16.            var $this = $(this);
  17.            $this.removeClass('selected').children('div').css('z-index','1');
  18.        });
  19.  
  20.        $oe_menu.bind('mouseenter',function(){
  21.            var $this = $(this);
  22.            $oe_overlay.stop(true,true).fadeTo(200, 0.6);
  23.            $this.addClass('hovered');
  24.        }).bind('mouseleave',function(){
  25.            var $this = $(this);
  26.            $this.removeClass('hovered');
  27.            $oe_overlay.stop(true,true).fadeTo(200, 0);
  28.            $oe_menu_items.children('div').hide();
  29.        })
  30.    });
  31. </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....

mood
Publicité
Posté le 13-01-2015 à 17:10:01  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu et compatibilité Javascript IE

 

Sujets relatifs
Récupération de données passées via Javascriptcomment deboguer une partie de javascript?
Différence de codage entre IE et Firefox ?Afficher/Masquer éléments DIV en javascript
Aide corriger javascript[Javascript - D3] Ajouter une variable de colorisation de flux
positionner un menu dynamiqueCacher/Afficher en Javascript
[RÉSOLU] Problème fenêtre modale et notificationsMenu déroulant Wordpress
Plus de sujets relatifs à : Menu et compatibilité Javascript IE


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR