위치 : 절대 컨테이너 숨기기 위치 : 상대방 자식

Question

3 계층 탐색 시스템을 구축 중입니다. 첫 번째 두 레벨은 서로 위에 수평으로 하나씩 표시되며 (두 번째는 절대적으로 위치 함), 세 번째 레벨은 세로로 아래로 떨어집니다 (위치 : 상대적). 저는 jQuery와 hoverintent를 사용하여 다양한 레벨에서 마진과 페이딩을 계산합니다. 이 모든 크롬과 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> 

여기 FF & 크롬에서 제대로 작동 내가 설정을 가지고있는 CSS입니다. 상위 2 수준은 IE에서 잘 작동하지만, 나는 이것이 위치/Z- 인덱스 문제라고 생각하지만 세 번째는, 여기

#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가의 숨겨진됩니다.

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(); 

미리 도움을 청하십시오. 감사합니다.

Answer 1

IE는 호버 기능의 루트 수준에서 페이드 jQuery 효과가 마음에 들지 않았습니다. 나는 다음과 같이 업데이트하고 이것은 thrid level 메뉴가 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(); 
}