响应式导航未按预期显示

Question

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

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

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

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

问题：

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

以下是我到目前为止所尝试的内容：https://jsfiddle.net/hudnybux/

Answer 1

好的，我觉得我看起来几乎就像截图一样。我必须做的主要事情之一是在html中移动你的nav-trigger。

<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导航。我还修复了“菜单”旁边的插入三角形。它需要0的高度和宽度。

width: 0;
height: 0;

修改

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

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

Answer 2

您需要添加另一个msgsnd

media query

Answer 3

写别人＆＃39;他们的代码不符合Stack Overflow的精神，但是，由于我更喜欢​​通过展示而不是告诉教学，我继续为你完成任务。观察我如何改变你的实现并尽可能多地学习！

战略

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

JSFiddle

＆＃13;

＆＃13;

$(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);
        }
    });
});

＆＃13;

.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;
    }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

HTML

• 我删除了您的容器<div> s（#header和#header-main），因为就布局而言，它们没有用处。
• 标题区域现在只有三个部分。他们是：
  • #top-nav - 加入/登录，帮助，购物
  • #main-nav-mobile-trigger - MENU按钮
  • #main-nav - 伸展，流动，姿势

JavaScript

• 单击MENU按钮（#main-nav-mobile-trigger span）时：
  • 切换其.open课程。
  • 如果它有.open类，
    • 添加#main-nav＆＃39; .open课程。
  • 否则，
    • 删除#main-nav＆＃39; .open课程。

CSS

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

我希望这会对你有所帮助。祝您未来在前端开发中获得成功！

Answer 4

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