Question

我对网页设计中的javascript相当新，即使在经过大量研究后如何正确地将我的导航菜单设置为 slidetoggle并将其下方的内容上下推送。理想情况下，如果我可以获得一些帮助让菜单看起来像它下面的容器一样宽那么事情看起来就会很棒。

我在jsfiddle中没有slideToggle代码，但这是我尝试过的事情之一：

$("#menu-button").click(function() {
    $("a").slideToggle(1000);
});

以下是我的代码的当前设置的小提琴：https://jsfiddle.net/3uag19p1/18/

Answer 1

我为你更新了html的结构。您需要将#menu-button放在外面，以确保它始终可见

<a id="menu-button" href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
        <nav class="site-navigation" id="myTopnav">
          <a href="#home">Home</a>
          <a href="#business">Business</a>
          <a href="#background">Background</a>
          <a href="#info">Info</a>
          <a href="#login">Login</a>

        </nav>

对于 slidetoggle的问题并上下推送其下方的内容，您只需使用position: absolute。不要为.site-navigation a添加位置。这将使立场出错。

.site-navigation {
    position: absolute;
   right: -100px;
   top: 100px;
   transition: all 0.3s;

    width: 100px;
}

.site-navigation.responsive {
  right: 51px;
}

使用overflow-x: hidden隐藏菜单以确保我们没有滚动来查看此菜单

#page {
    height: 100%;
    background-color: #1c222b;
  overflow-x: hidden;
}

我添加了动画以使其顺利进行

以下是fiddle

Answer 2

您应该将HTML的结构更改为：

<body id="page">
  <div id="wrapper">
    <header id="masthead">
      <div class="container header-container">
        <div class="site-branding">
          <h1 class="site-title">
            <a href="#home" rel="home">Logo</a>
          </h1>
        </div>

        <nav class="site-navigation" id="myTopnav">
          <a href="#home">Home</a>
          <a href="#business">Business</a>
          <a href="#background">Background</a>
          <a href="#info">Info</a>
          <a href="#login">Login</a>

        </nav>
                <a id="menu-button" href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
      </div>
    </header>

    <div id="content">
      <main class="container content-padding">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sem nibh, porttitor quis interdum sed, eleifend non eros. Quisque vitae augue mi. Etiam eget ligula volutpat purus dictum porttitor. Cras eleifend quam sit amet venenatis finibus. Aliquam sagittis lacus quis aliquet consequat. Pellentesque sed placerat sem, eu auctor enim. Curabitur ante lorem, ornare eget bibendum vitae, posuere at tortor. Etiam sit amet neque in nulla molestie rutrum sed ac urna. Vivamus enim tellus, interdum a eleifend at, laoreet in nisl. Etiam condimentum, arcu id lobortis tempus, justo turpis varius nisi, a mollis nulla risus et augue. Donec rutrum, erat in aliquet eleifend, leo risus imperdiet velit, ut feugiat lacus nulla iaculis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eu odio sem. Aliquam id ullamcorper dolor, quis dapibus lacus. Fusce eu lorem ac ipsum condimentum pellentesque a et velit.</p>
      </main>
    </div>
  </div>
</body>

然后设置菜单按钮的样式，使其显示在页面的右侧：

#menu-button {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

要使菜单显示为与容器一样宽，请将宽度设置为100％：

.site-navigation {
    float: right;
    width: 100%;
}

在此预览：JSFiddle

无法获取导航菜单slideToggle to Work

2 个答案: