响应式导航未按预期显示

Question

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

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

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

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

问题：

• 如图所示，header 当前显示链接“伸展、移动”等，而我希望它显示“加入/登录”等（图 3）。
• 点击menu时，我希望导航动态显示其他链接。

这是我迄今为止尝试过的：https://jsfiddle.net/hudnybux/

Answer 1

为他人编写代码并不符合 Stack Overflow 的精神，但是，由于我更喜欢​​通过展示而不是讲述来进行教学，因此我继续为您完成了任务。观察我如何改变您的实现并尽可能多地学习！

战略

• 对大屏幕和小屏幕宽度的主菜单（伸展、移动、姿势）使用相同的 HTML 标记，而不是使用 JavaScript 在两个位置复制它。
• 对两个菜单使用相同的 CSS 作为起点；在小屏幕尺寸的媒体查询中，将主菜单更改为水平的
• 默认显示所有内容；仅在您不想显示某些内容的屏幕尺寸上使用 display: none。

JSFiddle

$(document).ready(function() {
    $("#main-nav-mobile-trigger span").click(function() {
        $(this).toggleClass("open");
        if ($(this).hasClass("open")) {
            $("#main-nav").addClass("open").slideDown(250);
        } else {
            $("#main-nav").removeClass("open").slideUp(250);
        }
    });
});

.pageOverlay {
    width: 900px;
    margin: 0 auto;
}


/******************/

nav {
    background-color: #fefefe;
    /*NAV COLOUR*/
    padding: 10px 0;
    border-bottom: 1px solid #e3e3e3;
	text-align: center;
}

nav ul li a {
    color: #a4a4a5;
    text-decoration: none;
}

nav ul li a:hover {
    color: black;
}

nav ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

nav li {
    display: inline-block;
    padding: 0 2px;
}

nav li:last-child {
    border-right: none;
}

nav a {
    display: block;
    color: white;
    padding: 10px 20px;
}


/****************************************************************/


/* Menu CSS which pops up when window is resized */

#main-nav-mobile-trigger {
    text-align: center;
}

#main-nav-mobile-trigger span {
    display: inline-block;
    padding: 10px 30px;
    cursor: pointer;
    text-transform: uppercase;
}

#main-nav-mobile-trigger span:after {
    display: inline-block;
    margin-left: 10px;
    width: 20px;
    height: 10px;
    content: "";
    border-left: solid 10px transparent;
    border-top: solid 10px #e3e3e3;
    border-right: solid 10px transparent;
}

#main-nav-mobile-trigger span:hover {
    background-color: #e3e3e3;
}

#main-nav-mobile-trigger span.open:after {
    border-left: solid 10px transparent;
    border-top: none;
    border-bottom: solid 10px #fff;
    border-right: solid 10px transparent;
}

@media all and (min-width: 901px) {
    #top-nav {
        text-align: right;
    }
    #main-nav {
        text-align: left;
    }
    #main-nav-mobile-trigger {
        display: none;
    }
}

@media all and (max-width: 900px) {
    #main-nav:not(.open) {
    	display: none;
    }
    #main-nav ul {
        display: block;
	}
    #main-nav li {
        display: block;
        border-bottom: solid 1px #e3e3e3;
    }
    #main-nav li:last-child {
        border-bottom: none;
    }
    #main-nav a {
        padding: 10px 30px;
    }
    #main-nav a:hover {
        background-color: #e3e3e3;
        color: #fff;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pageOverlay">
    <nav id="top-nav" role="navigation">
        <ul>
            <li><a href="#">Join / Log In</a></li>
            <li><a href="#">Help</a></li>
            <li><a href="#">Shop</a></li>
        </ul>
    </nav>
    <div id="main-nav-mobile-trigger"><span>Menu</span></div>
    <nav id="main-nav" role="navigation">
        <ul>
            <li><a href="#">Stretches</a></li>
            <li><a href="#">Mobility</a></li>
            <li><a href="#">Posture</a></li>
        </ul>
    </nav>
</div>
<!-- pageOverlay closed-->

HTML

• 我删除了您的容器 <div>s（#header 和 #header-main），因为它们在布局方面毫无用处。
• 现在标题区域只有三个部分。它们的顺序是：
  • #top-nav - 加入/登录、帮助、购物
  • #main-nav-mobile-trigger - 菜单按钮
  • #main-nav - 伸展、移动、姿势

JavaScript

• 单击菜单按钮 (#main-nav-mobile-trigger span) 时：
  • 切换其.open 类。
  • 如果它有.open 类，
    • 添加#main-nav的.open类。
  • 否则，
    • 删除 #main-nav 的 .open 类。

CSS

• 每个水平菜单都有重复的样式规则（以前的#nav-main 和#main-navigation，很容易混淆）。现在，它们在更通用的选择器nav 下组合成一组规则。此外，它们的text-align 默认设置为center（在小屏幕宽度上所需的对齐方式）。
• 对于大屏幕宽度 (@media all and (min-width: 901px))：
  • #top-nav 右对齐，#main-nav 左对齐。
  • 隐藏“菜单”按钮。
• 对于小屏幕宽度 (@media all and (max-width: 900px))：
  • 如果 #main-nav 没有 .open 类，请将其隐藏。
  • 水平显示#main-nav中的菜单项。

---

我希望这对你有帮助。祝您在前端开发的未来冒险中好运！

Answer 2

好的，我想我让它看起来几乎和你的截图一模一样。我必须做的主要事情之一是将您的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。我还修复了“菜单”旁边的插入符号三角形。它需要0 的高度和宽度。

width: 0;
height: 0;

编辑：

我重新审视了我的解决方案。作为一个建议，我推荐 css transitions 而不是 jQuery slideDown 和 slideUp。您已经在应用一个类，这就是我们创建动态动画所需的全部内容。 jQuery 的方法应用内联样式，坦率地说，您的灵活性较低。

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

Answer 3

您可以使用 flexbox css 属性。它非常强大。 http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Answer 4

您需要添加另一个media query

@media all and (max-width: 460px) {
  nav#main-navigation li {
    display:block;
    border-bottom: 1px solid #fafafa;
  }
}