javascript - 响应式导航未按预期显示

Question

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

这是窗口最大化时的外观图像:

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

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

问题:

• 如图所示，当我希望它显示“加入/登录”等时，标题当前显示链接“拉伸(stretch)、移动”等(图 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 转换 而不是 jQuery slideDown 和 slideUp。您已经应用了一个类，这就是我们创建动态动画所需的全部内容。 jQuery 的方法内联应用样式，坦率地说，灵活性较差。

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