Jquery 函数增加 body 导航显示边距

Question

我正在使用这块 JQ 来动画显示悬停在菜单图标上的侧面 nav-bar。现在我有 nav-bar .8 不透明度和 z-indexed 出现在 body.

我想要做的是让主要的 body 为左边距的增加设置动画，以便为 nav-bar 腾出空间，因为它显示出来，而不是出现在顶部.当然，我希望脚本反转 mouseLeave 上的动画。希望这是有道理的。有人知道我可以在代码中添加什么以获得所需的结果吗？

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

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

Answer 1

您可以使用 animate() 方法为 #about div 添加左边距。这是一个 JSFiddle 展示了它是如何工作的：

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

一些注意事项：

您可以将两个事件附加到传递给 $ 方法的单个匿名函数中，而不是有两个单独的 $(function() {...})
hover 可能不是打开菜单的最佳选择，因为它通常用于绑定 mouseenter 和 mouseleave 事件。我建议只使用 mouseenter 作为您的用例。

我已经在上面的 JSFiddle link 中进行了这两个更新。

当内容向下滑动时，菜单显示在内容之上确实看起来有点奇怪。您可以利用 slideUp、slideDown 和 animate 方法提供的回调参数来避免这种情况。这是一个例子：http://jsfiddle.net/70p1dLy6/1/

Answer 2

您甚至可以只用 CSS 完成所有这些。不过，让我们使用 js 路由：首先将 non-nav 正文内容包装在绝对定位的包装器中。

DEMO

<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;
}

js

$(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',
        });
    })
});

Jquery 函数增加 body 导航显示边距

A Jquery function to increase body margin on Nav reveal

html

jquery

DEMO