jQuery 플라이 아웃 메뉴. 상위 요소를 깨는 것

Question

저는 Shopify 프로젝트를 진행하고 있습니다. 나는 디자이너가 아니다. 나는 가게를위한 플라이 아웃 메뉴를 만들 필요가있다. 문제는 두 가지입니다. 우선, 플라이 아웃은 뷰포트의 맨 아래까지 확장되어야합니다. 둘째로, Navigation Div에 모든 것을 함께 묶고 싶습니다만, 부모로부터 요소를 떼어 내고 나머지 내용을 "이동"시키지 않고 "계층화"하는 방법을 알아야합니다.

나는 CSS로 메뉴를 숨기고 롤오버에서 숨기기 위해 jQuery를 사용한다고 생각했다. 나는 그것이 효과가 있다고 생각하지 않는다. 플라이 아웃 위치를 정하는 방법을 모르기 때문에 모든 것을 둘러 볼 필요가 없습니다.

여기 사이트는 이제 : http://tinypic.com/r/35hnyox/6

가 여기에 현재 탐색 열에서의 내용은 다음과 같습니다 https://hodkiewicz-zieme-and-hirthe180.myshopify.com/

여기 것처럼 보여야합니다. 아마도 구조를 바꿀 것입니다.

<div id="navbar" class="green"> 
    <ul id="navigation"> 
    {% for link in linklists.main-menu.links %} 
     <li><a class="green" href="{{ link.url }}">{{ link.title }}</a></li> 
    {% endfor %} 
     <li><a class="green" href="#">{{ linklists.packard.title }}</a> 
      <ul class="sub-menu"> 
        <li><a class="green" href="#">-1930 Speedster</a></li> 
        <li><a class="green" href="#">-1929-31 Super 8</a></li> 
        <li><a class="green" href="#">-Late 1931-32 Super 8</a></li> 
        <li><a class="green" href="#">-1929-31 Standard 8</a></li> 
        <li><a class="green" href="#">-Late 1931-32 Standard 8</a></li> 
        <li><a class="green" href="#">-Rare Parts</a></li> 
        <li><a class="green" href="#">-745 Parts</a></li> 
      </ul> 
     </li> 
     <li><a class="green" href="#">{{ linklists.cadillac.title }}</a> 
      <ul class="sub-menu"> 
       <li><a class="green" href="#">-1932-33 V12 &amp; V16</a></li> 
       <li><a class="green" href="#">-1934-37 V12 &amp; V16</a></li> 
      </ul> 
     </li> 

     <li><a class="green" href="/cart">Cart</a></li> 
     <li><a class="green" href="/checkout">Check Out</a></li> 
    </ul><!--Navigation--><!--Navigation--> 

    <ul class="sub-navs"> 
     <ul class-"sub-nav"> 
      <li>Carburetor</li> 
      <li>Parts</li> 
      <li>Manifolds</li> 
      <li>Accessories</li> 
      <li>Sculpture</li> 
     </ul> 
    </ul> 

    <img id="#navbar-logo" src="{{'logo.png' | asset_url}}"> 
    <p id="nav-phone" class="black center bold">775.842.4282</p> 
    <p class="black center nav-small bold">packardcarbs@gmail.com</p> 
    <p class="black ce 

nter nav-small bold">Sparks, NV USA</p> 
</div><!--Navbar--> 

Answer 1

여기에 정확한 기능이 필요한 원하는 출력이 있습니다.

코드

참조 바이올린 : http://jsfiddle.net/NNfUb/2/

데모 :http://jsfiddle.net/NNfUb/2/embedded/result

CSS :

#content 
{ 
    position:relative; 
} 

#flyout_container 
{ 
    position:absolute; 
    width:175px; 
    top:0; 
    left:0; 
    background:#107042; 
    display:none; 
} 

.sub-nav 
{ 
    padding:0; 
    margin:0; 
    display:none; 
} 

.sub-nav li 
{ 
    padding:5px 5px 5px 10px; 
    display:block; 
    color:#fff; 
    font-size:14px; 
    font-weight:bold; 
} 

jQuery를 :

$(document).ready(function(){ 
     var container = $("<div id='flyout_container'>"); 
     container.appendTo($("#content")); 
     var contentHeight = $("#content").height(); 
     container.css({"height": (contentHeight + 10) + "px"}); 

     $("a#show_sub_nav_1").mouseover(function(){ 
      $("#sub_nav_1").appendTo(container).show(); 
      container.toggle(); 
      //container.show(); 
      var fromTop = parseInt($(this).offset().top); 
      $("#sub_nav_1").css({"margin-top": (fromTop - 205) + "px"}); 
     }); 

     $("#flyout_container").mouseleave(function(){ 
      $("#flyout_container").hide(); 
     }); 

    }); 

웹 페이지에서 소스 코드를 복사하여 위의 바이올린을 만들었습니다. 나는 콘텐츠 높이까지의 높이를 취하고 스크린 샷에서 제공하는 원하는 디자인에 따라 하위 링크를 보여주는 전체 높이 기능을 만들었습니다. 변경 또는 개선이 필요한 경우 CSS 또는 코드를 tweek해야합니다. 모든 뷰포트에서 작동합니다.

참고 : 어떤 문제가 있으면 알려주십시오.나는 다른 접근 방식을 사용했기 때문에 이것이 당신의 문제를 해결하기를 바랍니다.

Answer 2

요소의 위치를 ​​절대로 변경하면 문서의 흐름을 중단하지 않고도 정확하게 위치시킬 수 있습니다.

.flyout { 
    position: fixed; 
    left: 0px; (number of pixels from the left edge of the document) 
    top: 0px; (number of pixels from the top edge of the document) 
} 

Answer 3

position: absolute 가장 가까운 비 - 정전 상위 위치에 위치를 만든다. 따라서 내비게이션 ul을 position: relative으로 변경하고 플라이 아웃을 position: absolute으로 변경하면 플라이 아웃 메뉴 의 위치를 ​​기본 내비게이션에 비례하여 설정할 수 있습니다. 즉, 페이지의 크기를 조정하더라도 플라이 아웃은 여전히 ​​올바른 위치에 있습니다.

#navigation { 
    position: relative; 
} 

.flyout { 
    position: absolute; 
    top: 0; 
    left: 100%; 
} 

(당신은 대신 position: relative- #navbar 또는 #navigation > li을 설정할 수 있습니다.)

당신은 여전히 ​​위치와 다른 스타일 비트와 함께 바이올린이 필요하지만, 희망이 옳은 길에 당신을 설정하는 것입니다.