Affichage de div et list , pb de plans (ie6/7)

Question

actionspat

15 Mar 2010 à 12:20

Bonjour,

J'ai modifié le script "mega drop down menu" pour en faire un vertical, cependant les LI restent au premier plan sur IE6 et 7 quand s'affichent les divs... Y a t il un moyen d'emuler ie pour me faire apparaitre les divs du menu au premier plan ?

J'ai rajouté une ligne dans le javascript pour resoudre le pb dans FF


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
  <link href="css/styles-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 8]>
  <link href="css/styles-lt-ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if IE 6]>
  <link href="css/styles-ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

<body>
<div id="compartiments">
  <div class="fltlft">
    
    <h5>RUB 1</h5>
       <ul id="topnav">
    	<li>
        	<a href="#">&gt; SSRUB</a>
             <div class="sub">
              <h1>TEST<div class="flag_pop"><img src="images/flags/FR.gif" alt="France" width="18" height="12" /></div></h1>
            	<ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div>
        </li>
        <li>
        	<a href="#">&gt; SSRUB</a>
            <div class="sub">
              <h1>TEST<div class="flag_pop"><img src="images/flags/FR.gif" alt="France" width="18" height="12" /></div></h1>
            	<ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>

                <ul>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div>
        </li>
    </ul>
 <h5>RUB 2</h5>
       <ul id="topnav">
    	<li>
        	<a href="#">&gt; SSRUB</a>
             <div class="sub">
              <h1>TEST<div class="flag_pop"><img src="images/flags/FR.gif" alt="France" width="18" height="12" /></div></h1>
            	<ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div>
        </li>
        <li>
        	<a href="#">&gt; SSRUB</a>
            <div class="sub">
              <h1>TEST<div class="flag_pop"><img src="images/flags/FR.gif" alt="France" width="18" height="12" /></div></h1>
            	<ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>

                <ul>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div>
        </li>
    </ul>

  </div>
  <div class="fltrt2">
    
    <h5>RUB 3</h5>
      <ul id="topnav">
    	<li><a href="#">&gt; SSRUB</a>
         <div class="sub">
              <h1>TEST<div class="flag_pop"><img src="images/flags/FR.gif" alt="France" width="18" height="12" /></div></h1>
            	<ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>

                <ul>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div></li>
        <li><a href="#">&gt; SSRUB</a>
         <div class="sub">
              <h1>TEST<div class="flag_pop"><img src="images/flags/FR.gif" alt="France" width="18" height="12" /></div></h1>
            	<ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>

                <ul>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div></li>
        <li><a href="#">&gt; SSRUB</a>
         <div class="sub">
              <h1>TEST<div class="flag_pop"><img src="images/flags/FR.gif" alt="France" width="18" height="12" /></div></h1>
            	<ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div> </li>
        </ul>   
    <h5>RUB 4</h5>
      <ul id="topnav">
    	<li><a href="#">&gt; SSRUB</a>
         <div class="sub">
              <h1>TEST<div class="flag_pop"><img src="images/flags/FR.gif" alt="France" width="18" height="12" /></div></h1>
            	<ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>

                <ul>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div></li>
        <li><a href="#">&gt; SSRUB</a>
         <div class="sub">
              <h1>TEST<div class="flag_pop"><img src="images/flags/FR.gif" alt="France" width="18" height="12" /></div></h1>
            	<ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>

                <ul>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div></li>
        <li><a href="#">&gt; SSRUB</a>
         <div class="sub">
              <h1>TEST<div class="flag_pop"><img src="images/flags/FR.gif" alt="France" width="18" height="12" /></div></h1>
            	<ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div> </li>
        </ul>   
  </div>
  <br class="clearfloat" />
</div>


<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.hoverIntent.minified.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	function megaHoverOver(){
    $(this).find(".sub").stop().fadeTo('fast', 1).show(); //Find sub and fade it in
    (function($) {
        //Function to calculate total width of all ul's
        jQuery.fn.calcSubWidth = function() {
            rowWidth = 0;
            //Calculate row
            $(this).find("ul").each(function() { //for each ul...
                rowWidth += $(this).width(); //Add each ul's width together
            });
        };
    })(jQuery); 

    if ( $(this).find(".row").length > 0 ) { //If row exists...

        var biggestRow = 0;	

        $(this).find(".row").each(function() {	//for each row...
            $(this).calcSubWidth(); //Call function to calculate width of all ul's
            //Find biggest row
            if(rowWidth > biggestRow) {
                biggestRow = rowWidth;
            }
        });

        $(this).find(".sub").css({'width' :biggestRow}); //Set width
        $(this).find(".row:last").css({'margin':'0'});  //Kill last row's margin

    } else { //If row does not exist...

        $(this).calcSubWidth();  //Call function to calculate width of all ul's
        $(this).find(".sub").css({'width' : rowWidth}); //Set Width

    }
}
//On Hover Out
function megaHoverOut(){
  $(this).find(".sub").stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
      $(this).hide();  //after fading, hide it
  });
}

//Set custom configurations
var config = {
     sensitivity: 5, // number = sensitivity threshold (must be 1 or higher)
     interval: 100, // number = milliseconds for onMouseOver polling interval
     over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
     timeout: 100, // number = milliseconds delay before onMouseOut
     out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};

$("ul#topnav li .sub").css({'opacity':'0'}); //Fade sub nav to 0 opacity on default
$("ul#topnav li .sub").css({'z-index':'30000'}); // j'ai rajouté cette ligne qui resous le pd de plans sur FF
$("ul#topnav li").hoverIntent(config); //Trigger Hover intent with custom configurations

});
</script>
</body></html>

ul#topnav {
	margin: 0; padding: 0;
	width: 100%;
	list-style: none;
	font-size: 1.1em;
}
ul#topnav li {
	width:100%;
	float: left;
	margin: 0; padding: 0;
	position: relative;
}
ul#topnav li a {
	float: left; 
	height: 14px;
}
ul#topnav li .sub {
	position: absolute;	
	top: 14px; left: 30px;
	background: #fff;
	padding: 0 0 10px 0;
	float: left;
	border:1px #36F solid;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	display: none;
}
ul#topnav li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}
ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 150px;
	float: left;
}
ul#topnav .sub ul li {
	width: 100%;
	color: #000;
}
ul#topnav .sub ul li h2 {
	padding: 0;  margin: 0;
	font-size: 1.3em;
	font-weight: normal;
}
ul#topnav .sub ul li h2 a {
	padding: 5px 0;
	background-image: none;
	color: #DDD;
}
ul#topnav .sub ul li a {
	float: none; 
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	padding: 2px 5px 2px 15px;
	display: block;
	text-decoration: none;
	color: #000;
}
ul#topnav .sub ul li a:hover {color: #ddd;}

merci de votre aide

actionspat

16 Mar 2010 à 16:05

je pense qu'il faudrait forcer le z-index pour ie.

quand j'enleve cette ligne dans la congif js, le meme probleme se repercute sur FF : $("ul#topnav li .sub").css({'z-index':'30000'});

j'ai essayé de rajouter un zoom:1 mais rien n'y fait...

Sujet clos

CSS et mise en forme, CSS3

Affichage de div et list , pb de plans (ie6/7)