하위 메뉴는 기본 메뉴를 가리키면 표시되지만 하위 메뉴를 가리키면 계속 표시되어야합니다.

Question

CSS에서 아무런 문제가 없지만 프레임 워크 제한으로 인해 기본 메뉴의 HTML을 변경할 수 없습니다.

따라서 jared는 주 메뉴 항목에 종속 된 적절한 하위 메뉴를 표시하고 위치를 지정하는 jQuery를 제공합니다.

메인 메뉴 항목 밖으로 나가서 하위 메뉴로 이동하면 하위 메뉴가 사라집니다. 나는 사용자가 어디를 떠오르는 지에 관해서 발생할 다양한 시나리오를 어떻게 구별 할 것인지 확신 할 수 없다.

내가 가지고있는 숨겨진 스텁에서 하위 메뉴 HTML을 복제 한 다음 적절한 기본 메뉴 항목에 삽입하고 CSS로 hosw/hide를 구현하는 경우가있을 수 있습니다.

이 주 메뉴의 HTML입니다 :

<!-- Chemicals --> 
<div id="subNav-chemicals"> 
    <div> 
     <h4>Our most popular Chemical reports</h4> 
     <ul class="reportList"> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
     </ul> 
     <ul class="reportList"> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
     </ul> 
     <ul class="reportList"> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
      <li><a href="#">Chemical name</a></li> 
     </ul> 
    </div> 
    <div> 
     <h4>Popular destinations</h4> 
     <ul class="captionList"> 
      <li> 
       <img class="figure" alt= "" /> 
       <p class="caption"><a href="#">Free Whitepaper - "Budgeting for the new normal"</a></p> 
      </li>  
      <li> 
       <img class="figure" alt= "" /> 
       <p class="caption"><a href="#">ICB magazine</a></p> 
      </li> 
      <li> 
       <img class="figure" alt= "" /> 
       <p class="caption"><a href="#">Free trial</a></p> 
      </li>  
     </ul> 
    </div> 
</div> 
<!-- Chemicals: END --> 
<!-- Energy --> 
<div id="subNav-energy"> 
    <div> 
     <h4>Our most popular Energy reports</h4> 
     <ul class="reportList"> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
     </ul> 
     <ul class="reportList"> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
     </ul> 
     <ul class="reportList"> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
      <li><a href="#">Energy name</a></li> 
     </ul> 
    </div> 
    <div> 
     <h4>Popular destinations</h4> 
     <ul class="captionList"> 
      <li> 
       <img class="figure" alt= "" /> 
       <p class="caption"><a href="#">Free Whitepaper - "The light that shines twice as bright"</a></p> 
      </li>  
      <li> 
       <img class="figure" alt= "" /> 
       <p class="caption"><a href="#">Energy blog</a></p> 
      </li> 
      <li> 
       <img class="figure" alt= "" /> 
       <p class="caption"><a href="#">Free trial</a></p> 
      </li>  
     </ul> 
    </div> 
</div> 
<!-- Energy: END --> 
<!-- Fertilizer --> 
<div id="subNav-fertilizers"> 
    <div> 
     <h4>Our most popular Fertilizer reports</h4> 
     <ul class="reportList"> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
     </ul> 
     <ul class="reportList"> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
     </ul> 
     <ul class="reportList"> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
      <li><a href="#">Fertilizer name</a></li> 
     </ul> 
    </div> 
    <div> 
     <h4>Popular destinations</h4> 
     <ul class="captionList"> 
      <li> 
       <img class="figure" alt= "" /> 
       <p class="caption"><a href="#">Free Whitepaper - "Fertilization in today's market"</a></p> 
      </li>  
      <li> 
       <img class="figure" alt= "" /> 
       <p class="caption"><a href="#">Fertilizer blog</a></p> 
      </li> 
      <li> 
       <img class="figure" alt= "" /> 
       <p class="caption"><a href="#">Free trial</a></p> 
      </li>  
     </ul> 
    </div> 
</div> 
<!-- Fertilizer: END --> 

그리고 jQuery를 :

<ul class="nav-list"> 
    <li class="nav-first nav-linkitem 356"> 
    <a title="" href="/"><span class="nav-tlt">Home</span></a> 
    </li> 
    <li class="nav-linkitem 357"> 
    <a title="" href="/Channels/Chemicals"><span class="nav-tlt">Chemicals</span></a> 
    </li> 
    <li class="nav-linkitem 358"> 
    <a title="" href="/Channels/Energy"><span class="nav-tlt">Energy</span></a> 
    </li> 
    <li class="nav-linkitem 359"> 
    <a title="" href="/Channels/Fertilizers"><span class="nav-tlt">Fertilizers</span></a> 
    </li> 
    <li class="nav-linkitem 383"> 
    <a title="QA test" href="/QA"><span class="nav-tlt">QA</span></a> 
    </li> 
    <li class="nav-last nav-linkitem 384"> 
    <a title="QA2 test" href="/QA2"><span class="nav-tlt">QA2</span></a> 
    </li> 
</ul> 

이 서브 메뉴 HTML입니다

$(function(){ 

    var subNav = $('.rtx-SubNav'), 
    mainNav = $('.nav-SiteNav'), 
    mainNavHeight = mainNav.outerHeight(), 
    mainNavOffset = mainNav.offset(), 
    coordinates = [], 
    splitCoordinates = [], 
    subNavID = [] 
    linkWidth = []; 

    // get widths of previous links 
    $('.nav-SiteNav a').each(function(index){ 

     var $this = $(this), 
     $thisWidth = $this.parent().outerWidth(), 
     offset = $this.offset(), 
     offsetTop = Math.round(offset.top + mainNavHeight) + 'px', 
     offsetLeft = Math.round(offset.left) + 'px'; 

     coordinates.push(offsetTop + '-' + offsetLeft); 

     linkWidth.push($thisWidth); 

     linkWidth.reverse(); 

    }); 

    // get IDs of 
    $('.rtx-SubNav div[id^="subNav-"]').each(function(index){ 

     $(this).hide(); 

     var divID = $(this).attr('id'); 
     subNavID.push(divID); 
     subNavString = subNavID.toString(), 
     len = subNavID.length; 

     while(len--){ 
      subNavString = subNavString.replace('subNav-', ''); 
     } 

    }); 

    subNavID = subNavString.split(','); 

    // check the text against IDs 
    // show matched, hide others 
    // position by hovered link 
    // remain visible when hovering sub nav 
    $('.nav-SiteNav a').hover( 
     function() { 

      var $this = $(this), 
      linkTxt = $this.text().toLowerCase(), 
      hoverOffset = $this.offset(), 
      linkIndex = $('.nav-SiteNav a').index($this), 
      splitCoordinates = coordinates[linkIndex].split('-'), 
      len = subNavID.length, 
      total = 0, 
      sliced = linkWidth.slice(0, linkIndex), 
      slicedLen = sliced.length; 

      while(slicedLen--){ 
       var numericVal = parseInt(sliced[slicedLen]); 
       total += numericVal;     
      } 

      while(len--){ 
       if (linkTxt === subNavID[len]){ 
        $('.rtx-SubNav #subNav-' + linkTxt).show(); 
       } 
      } 

      subNav.css({ 
       'top': '257px', 
       'left': total + 'px' 
      }); 

     }, 
     function() { 

      subNav.removeAttr('style'); 

      $('.rtx-SubNav div[id^="subNav-"]').hide(); 

     } 
    );  

}); 

Answer 1

이보십시오, 나는하지 않았다 테스트 해봐도 정상적으로 작동 할 것이라고 확신합니다.

var parent_a, parent_a_id, li_pos; 
$('.subnav li').hover(function(){ 
    parent_a = $('a',this).attr('href').toLowerCase(); 
    parent_a_id = parent_a.split('/').pop().toString(); 
    li_pos = $(this).offset(); 
    $('#subNav-' + parent_a_id).css({'left' : li_pos.left, 'top' : li_post.top}).stop(true, true).show(); 
}, function(e){ 
    $('#subNav-' + parent_a_id).hide(); 

}); $ ('div [id^= "subNav -"]'). 숨기기();