javascript - 响应式导航未按预期出现

Question

我正在尝试创建一个响应式导航栏，但我遇到了使其按预期方式显示的问题。

这是一张窗口最大化时的图片:

这是窗口调整大小时的图像:

这是我希望页面外观和功能的图片:

问题:

• 如图所示，header 当前显示链接“stretches, mobility”等，而我希望它显示“加入/登录”等(图 3)。
• 单击菜单时，我希望导航动态显示其他链接。

这是我到目前为止尝试过的:https://jsfiddle.net/hudnybux/

Answer 1

好的，我想我得到的它看起来几乎和您的屏幕截图一模一样。我必须做的主要事情之一是将 nav-trigger 在 html 中向上移动。

<div id="header-main">
    <div id="nav-trigger"><span>Menu</span></div>
    <nav id="main-navigation" role="navigation">
        <ul>
            <li><a href="#">Stretches</a></li>
            <li><a href="#">Mobility</a></li>
            <li><a href="#">Posture</a></li>
        </ul>
    </nav>
    <!--<nav id="nav-mobile"></nav>-->
</div>

从技术上讲，您不再需要 nav-mobile nav。我还在“菜单”旁边修复了你的插入三 Angular 形。它需要 0 的高度和宽度。

width: 0;
height: 0;

编辑:

我重新审视了我的解决方案。作为建议，我建议使用 css transitions 而不是 jQuery slideDown 和 slideUp。您已经应用了一个类，这就是我们创建动态动画所需要的。 jQuery 的方法内联应用样式，坦率地说，这会降低您的灵 active 。

https://jsfiddle.net/qnco3x7e/8/