позиция: абсолютный контейнер скрытая позиция: относительный дочерний элемент - PullRequest
Новая
       23

позиция: абсолютный контейнер скрытая позиция: относительный дочерний элемент

0 голосов
/ 22 марта 2011

Я строю трехуровневую навигационную систему.Первые два уровня отображаются горизонтально один над другим (второй абсолютно расположен), а третий уровень падает вертикально вниз (позиция: относительная).Я использую jQuery и hoverintent для расчета маржинальности и исчезновения на разных уровнях.Все это прекрасно работает в Chrome и FF, но в IE третий уровень скрыт.Я увижу только полоску тестовой границы размером 4px, которую я на ней установил.

Основная вложенная навигационная структура выглядит следующим образом: 

<div id="topnav"> <!--main nav container-->
    <ul>
    <li> <!--root level nav items-->            
        <div>  <!--position absolute 2nd level-->   
        <ul>
        <li> <!--second level nav items -->
            <div> <!--third level wrapper-->
                <div> <!--third level content-->
                <ul> <!--columns & list groups-->
                <li>

Вот CSS-код, который я правильно настроил и работаетв FF & Chrome.Два верхних уровня отлично работают в IE, но третий скрыт 

#topnav {
  margin: 0; padding: 0;
  width: 940px;
  list-style: none;
  font-size: 1.1em;
  /*position:relative; /*vital*/
  /*z-index:1000;*/
  z-index:1002;
   overflow:visible !important;   

}

#topnav ul{
  padding:0 0 0 0 !important;
  margin:0;
}

#topnav ul li {
  float: left;
  width:auto; 
  margin: 0; padding: 0;
  list-style-type:none;
  line-height:3.2em;
  font-weight:700;
  letter-spacing:.03em;
  background:url(/images/960/110304-sprite.png) 100% -865px; 
  /*height:37px;*/

}

#topnav ul li:hover,
#topnav ul li a:hover{
background:transparent url(/images/960/20110321-navhover.png) 0 0 repeat-x;
  color:#000;

}
/*second level*/
#topnav ul li div{
  width:940px; 
  background:transparent url(/images/960/20110321-navhover.png) 0 -75px repeat-x;
  text-transform:none;
  margin:-6px 0 0 0;
  position: absolute; 
  top: 43px; left:0;
  z-index:1003;
  height:auto; 
}
#topnav ul li div ul{
  /*position:relative !important;*/
  /*
  margin:0 auto; */
}


#topnav ul li div ul li{
  border-left:1px solid #ccc;
}

#topnav ul li div ul li:hover,
#topnav ul li div ul li a:hover{
  background:#eee url(/images/960/110304-sprite.png) 0 -160px no-repeat;
  color:#0067b4;
}


#topnav ul li div *{
  background:none;
}

#topnav ul li a {
  float: left;
 /* text-indent: -9999px; /*--Push text off of page--*/
  /*height: 37px;*/
  padding:0 5px 0 5px;
}


/*** HIDE CHILDREN FOR NOW ***/
#topnav ul li div,
#topnav ul li div ul li div div{
  display:none; 
}

/*Third Level*/
#topnav ul li div ul li div{
 background:none;
 width:auto;
}

#topnav ul li div ul li div div{
  height:auto !important; 
  /*_height:400px;*/
  position:relative; 
  top:43px; 
  border:4px solid blue;
  width:100px;
  padding:0 3px 0 3px;
  margin-top:-43px;
  background:#eee;
  border-right:1px solid #ccc;
  border-left:1px solid #ccc;
  border-bottom:1px solid #ccc;
  z-index:1004; 
}

#topnav ul li div ul li div div div{
    border:none; 
    clear:both; 
    margin-bottom:-3px;
    background:none; 
}

#topnav ul li div ul li div div ul{
  float:left;
  height:auto;
  margin:0 5px 5px 5px;
  padding:none !important;
 /*border:1px solid green*/
 border-right:1px dotted #ccc;

}

#topnav ul li div ul li div div ul li{
  float:none !important;
  display:block; 
  height:auto;
  font-size:1em; 
  line-height:1.1em; 
  font-weight:normal;
  text-align: left; 
  margin:4px 4px 5px 4px; 
  padding:none !important;
  border:none;
  /*border-bottom:1px dotted #ccc;*/
}

#topnav ul li div ul li div div ul li:hover{
 background:none;
 }

#topnav ul li div ul li div div ul li a{
  float:none;
  color:#0067b4;
  padding:0;
}
#topnav ul li div ul li div div ul li a:hover{
  color:#4399c7;
  background: none;
}

.megaHeader{
font-weight: bold !important;
font-size:1.1em !important;  
margin-bottom:4px;
}

Вот JS, хотя я думаю, что это проблема позиционирования / z-index. 

    var mainNavigation = function(){  
    function megaHoverOver() {

        var subDiv = jQuery(this).find("div:last");
        var subDivCol = subDiv.find("ul");
        var ddParent = subDiv.parent().parent(); //2nd level parent LI
        //jQuery(this).parent().css({'height':'600px'}); 

        if (subDiv.length > 0) { //If row exists...
           //alert(jQuery(this).find("div:last").eq(0).attr("id"));
            var ddWidth = 0;
            var ulWidth = 0;
            var numUl = subDivCol.length;


                switch (numUl) {
                case 1:
                    ddWidth = "250"; //250
                    ulWidth = "245";
                    break;
                case 2:
                    ddWidth = "500";
                    ulWidth = "230";
                    break;
                case 3:
                    ddWidth = "932"; // 940 div adjusted for padding.
                    ulWidth = "290";
                    break;
                case 4:
                    ddWidth = "932";
                    ulWidth = "233";
                    break;
                case 5:
                    ddWidth = "932";
                    ulWidth = "186";
                    break;
                case 6:
                    ddWidth = "932";
                    ulWidth = "140";
                    break;
                case 7:
                    ddWidth = "932";
                    ulWidth = "120";
                    break;
                default:
                    ddWidth = "250";
                    ulWidth = "245";
                }


            subDiv.css({
                'width': ddWidth + "px",
                'margin-left': calcPos(ddParent, ddWidth, 2) + "px"
            }); 
            //jQuery(this).find(".row:last").css({'margin':'0'});  //Kill last row's margin
            //Set UL widths
            subDivCol.css({
                'width': ulWidth 
            });
            jQuery(this).find("div ul:last").css({
                'border-right': 'none' 
            });

          subDiv.append('<div></div>'); 
          jQuery(this).find("div").children().andSelf().fadeTo('fast', 1).show(); //Find sub and fade it in

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

        }

    }
    //On Hover Out

    function megaHoverOut() {

        jQuery(this).find("div div").parent().andSelf().stop().css({'display':'block'}).fadeTo('fast', 0, function () { //Fade to 0 opactiy
            jQuery(this).hide(); //after fading, hide it
        });
    }

    function rootOver() {
        //Set positioning of 2nd level items
        var levelTwo = jQuery(this).find("div:first").css({'display':'block'});
        var levelTwoUl = levelTwo.find("ul:first");
        var totalWidth = 0;


        levelTwoUl.children('li').each(function () {


            totalWidth += Math.floor(jQuery(this).outerWidth());   
        });
        var mPos = calcPos(jQuery(this), totalWidth, 1);
        //console.log('total LI width: ' + totalWidth);
        levelTwoUl.css({'margin-left' : mPos + "px"});
        levelTwo.stop().fadeTo('fast', 1).show(); //Fade in 2nd level //tweak for performance

    }

    function rootOut() {
        jQuery(this).find("div:first").stop().fadeTo('fast', 0, function () { //Fade to 0 opactiy
            jQuery(this).hide(); //after fading, hide it 

        });
    }

    function calcPos(parent, width, level) {
        var pos = Math.ceil(parent.css({'display':'block'}).position().left);
            var remaining = 940 - width;

            if(width >= 932){ // 3 or more columns left align 0
                return 0;
            }else if(width < (940 - pos)){
                return pos; 
            }else{

                if(pos > width && level != 2){
                    return 940 - pos;
                }else{
                    return 932 - width;
                }   

            }

    }
   return{
    init : function(){

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

        //Set triggers for 1st & 2nd levels
        jQuery("div#topnav ul li").hoverIntent(configRoot);
        jQuery("div#topnav ul li div ul li").hoverIntent(config);
        }
    }
}();

mainNavigation.init();

Спасибозаранее за любую помощь.Я ценю это.

1 Ответ

0 голосов
/ 24 марта 2011

IE не понравился эффект затухания jQuery на корневом уровне для функций наведения мыши. Я обновил следующим образом, и это исправило проблему, когда в IE не появлялось меню с тремя уровнями. 

function rootOver() {
    //Set positioning of 2nd level items
    var levelTwo = jQuery(this).find("div:first").css({'display':'block'});
    var levelTwoUl = levelTwo.find("ul:first");
    var totalWidth = 0;


    levelTwoUl.children('li').each(function () {


        totalWidth += Math.floor(jQuery(this).outerWidth());   
    });
    var mPos = calcPos(jQuery(this), totalWidth, 1);

    levelTwoUl.css({'margin-left' : mPos + "px"});
    levelTwo.stop().show(); //Show 2nd level

}

function rootOut() {
    jQuery(this).find("div:first").stop().hide();
}
...