Javascript Can'；t获取导航菜单幻灯片切换到工作状态_Javascript_Html_Css

Javascript Can'；t获取导航菜单幻灯片切换到工作状态

javascript html css

Javascript Can'；t获取导航菜单幻灯片切换到工作状态,javascript,html,css,Javascript,Html,Css,我对网页设计中的javascript相当陌生，即使在做了相当多的研究之后，我似乎也不知道如何正确地将导航菜单设置为“滑动切换”，并上下推它下面的内容。理想情况下，如果我能得到一些帮助，让菜单显示为它下面的容器一样宽，这样事情看起来就更糟了我在JSFIDLE中没有slideToggle代码，但我尝试了以下几点： $("#menu-button").click(function() { $("a").slideToggle(1000); }); 下面是我代码的当前设置：我为您更新了htm

我对网页设计中的javascript相当陌生，即使在做了相当多的研究之后，我似乎也不知道如何正确地将导航菜单设置为“滑动切换”，并上下推它下面的内容。理想情况下，如果我能得到一些帮助，让菜单显示为它下面的容器一样宽，这样事情看起来就更糟了

我在JSFIDLE中没有slideToggle代码，但我尝试了以下几点：

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

下面是我代码的当前设置：

我为您更新了html的结构。您需要将

#菜单按钮

置于外部，以确保它始终可见

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

使用

overflow-x:hidden

隐藏菜单，以确保我们不必滚动查看此菜单

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

我添加了动画以使这一切顺利进行

以下是

您应该将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>

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

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

在这里预览：

真不敢相信我没有想到要把按钮从导航中拿出来。你的代码几乎完全符合我的要求。有一些格式错误，但所有的事情我可以很容易地修复。谢谢真不敢相信我没想到把导航按钮拿出来。您的代码似乎没有推动内容，只是覆盖了它，但无论哪种方式，它看起来都不错。你让我重新考虑我想要菜单执行什么类型的操作，我可能最终会使用覆盖层。虽然没有达到我想要的效果，但还是要谢谢你！

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

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