一个Jquery函数，用于增加导航显示上的正文边距_Jquery_Html

一个Jquery函数，用于增加导航显示上的正文边距

jquery html

一个Jquery函数，用于增加导航显示上的正文边距,jquery,html,Jquery,Html,我用这个JQ来制作悬停在菜单图标上的侧导航栏的显示动画。现在我有导航条。8不透明度和z索引显示在身体上我想做的是让主体动画增加左边距，以便为导航栏显示时腾出空间，而不是它显示在顶部。当然，我希望脚本在mouseLeave上反转动画。希望这是有道理的。有人知道我可以向代码中添加什么来获得期望的结果吗 $（函数（）{ $（'burger'）.hover（function（）{$（'nav'）.slideDown（1000）；}）； }); $（函数（）{ $（'nav'）.mouselea

我用这个JQ来制作悬停在菜单图标上的侧导航栏的显示动画。现在我有导航条。8不透明度和z索引显示在身体上

我想做的是让主体动画增加左边距，以便为导航栏显示时腾出空间，而不是它显示在顶部。当然，我希望脚本在mouseLeave上反转动画。希望这是有道理的。有人知道我可以向代码中添加什么来获得期望的结果吗


$（函数（）{
$（'burger'）.hover（function（）{$（'nav'）.slideDown（1000）；}）；
});
$（函数（）{
$（'nav'）.mouseleave（函数（）{
$（'nav'）.slideUp（1000）；}）；
});

您可以使用该方法在

#about

div中添加一个左边距。下面是一个JSFiddle，展示了它的工作原理：

请注意：

您可以在传递给

方法的单个匿名函数中附加这两个事件，而不是有两个单独的

$（function（）{…}）

hover

可能不是打开菜单的最佳选项，因为它通常用于绑定

mouseenter

和

mouseleave

事件。我建议对您的用例使用

mouseenter

我在上面的JSFIDLE链接中做了这两个更新

当内容向下滑动时，菜单显示在内容上方，这看起来确实有点奇怪。您可以利用

slideUp

、

slideDown

和

animate

方法提供的回调参数来避免这种情况。这里有一个例子：

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

你能把这个放进小提琴里吗？

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

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

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