저는이 JQ를 사용하여 메뉴 아이콘 위에 마우스를 올려 놓았을 때 사이드 탐색 바를 나타냅니다. 지금은 nav-bar .8 불투명도가 있고 z-indexed가 몸 위에 표시됩니다.내비게이션의 바디 마진을 높이기위한 Jquery 함수

내가하려는 것은 상단에 나타나는 것이 아니라 표시되는대로 nav-bar의 공간을 만들기 위해 왼쪽 여백을 늘리는 본체를 얻는 것입니다. 물론 mouseLeave에서 애니메이션을 뒤집어 쓰길 원합니다. 희망은 그 말이 맞습니다. 누구나 원하는 결과를 얻기 위해 코드에 무엇을 추가 할 수 있는지 생각해보십시오.

http://jsfiddle.net/ChilledMonkeyBrain/06ysqr1r/

<script> 
    $(function() { 
     $('#burger').hover(function() { $('nav').slideDown(1000); }); 
}); 
    $(function() { 
     $('nav').mouseleave(function() { 
$('nav').slideUp(1000); }); 
}); 
</script>

출처

2015-01-07 chilledMonkeyBrain

당신은 JS 바이올린이 점을 넣을 수 있습니다? – Todd

http://jsfiddle.net/ChilledMonkeyBrain/06ysqr1r/ – chilledMonkeyBrain

당신은 #about DIV에 왼쪽 여백을 추가 animate() 방법을 사용할 수 있습니다.

http://jsfiddle.net/jkLL6yab/1/

몇 가지 참고 사항 :

당신은 $ 메서드에 전달 단일 익명 함수의 내부에 두 이벤트를 첨부 할 수 있습니다를 대신에 두 개의 인스턴스를 필요없이, 다음이 작동 방법 JSFiddle 보여주는입니다 $(function() {...})
hover은 보통 mouseenter 및 mouseleave 이벤트를 모두 바인딩하기 위해 메뉴를 여는 데 가장 좋지 않을 수 있습니다. 귀하의 사용 케이스에 mouseenter을 사용하는 것이 좋습니다.

위의 JSFiddle 링크에서 두 가지 업데이트를 만들었습니다.

슬라이드가 내려갈 때 콘텐츠 위에 표시되는 메뉴가 약간 이상해 보입니다. 이 문제를 방지하려면 slideUp, slideDown 및 animate 메서드에서 제공하는 콜백 인수를 활용할 수 있습니다. 예를 들면 다음과 같습니다. http://jsfiddle.net/70p1dLy6/1/

출처

2015-01-07 02:48:27 NolanDC

CSS로만이 모든 작업을 수행 할 수도 있습니다. Js 라우트로 가보 죠. 먼저 비 - nav 바디 내용을 절대적으로 배치 된 래퍼로 포장하십시오.

DEMO

enter image description here

<body> 
    <nav> 
     <ul> 
      <li><a id="ab" href="#about">About</a> 
      </li> 
      <li><a id="po" href="#portfolio">Portfolio</a> 
      </li> 
      <li><a id="co" href="#contact">Contact</a> 
      </li> 
      <li><a id="bl" href="#blog">Blog</a> 
      </li> 
     </ul> 
    </nav> 
    <div class="wrapper"> <!-- here --> 
     <div id="burger"> 
      <img src="https://www.iconfinder.com/icons/134216/hamburger_lines_menu_icon" alt="Munu"> 
     </div>

CSS

div.wrapper { 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    margin: auto; 
    transition: left 200ms ease; 
} 
body { 
    position: relative; // relative class 
    font: normal 1.1em/1.5 sans-serif; 
    color: #fff; 
    font-family:'Raleway', sans-serif; 
    background-color: black; 
}

$(function() { 
    var navWidth = $('nav').outerWidth(true); 
    $('#burger, nav').hover(function() { 
     $('nav').stop().slideDown(200); 
     $('div.wrapper').css({ 
      'left': navWidth + 'px', 
     }); 
    }, function() { 
     $('nav').stop().slideUp(200); 
     $('div.wrapper').css({ 
      'left': '0px', 
     }); 
    }) 
});

출처

2015-01-07 03:12:19 Todd

정말 감사합니다. 대단히 감사합니다. – chilledMonkeyBrain

내비게이션의 바디 마진을 높이기위한 Jquery 함수

답변

DEMO

관련 문제