vux flexbox使用_如何使用Flexbox构建响应式导航栏

vux flexbox使用

是时候在flexbox中进行实际练习了！ 在本教程中，我们将使用flexbox创建针对移动设备，平板电脑和台式机屏幕的移动优先，可响应，可切换的导航栏，并具有不同的布局。

注意 ：本教程已更新，包括响应式子菜单和纯JavaScript而不是jQuery。

Flexbox非常适合响应式导航

Flexbox是一个通用的布局模块，通过它我们可以创建需要灵活性的一维布局，例如响应菜单。 使用flexbox的ordering，alignment和sizing属性，我们可以构建导航栏，以使其布局适应视口大小，同时保持HTML轮廓线的逻辑性和可访问性。

在本教程中，我们将研究如何使用flexbox创建响应式导航栏。 我们的flexbox导航将具有三种不同的布局，具体取决于视口的大小：

1. 在默认情况下仅徽标和切换按钮可见的移动布局中，用户可以使用切换按钮来打开和关闭菜单，
2. 平板电脑的布局，在该布局中，我们将在徽标之间显示两个号召性用语按钮，并在默认状态下进行切换，其余菜单仍保持可切换状态，
3. 一种桌面布局 ，其中所有菜单项（切换按钮除外）都将在屏幕上可见。

我们将使用媒体查询来检测用户浏览器的视口大小。 我们的响应式导航栏将是移动优先的，因此我们将首先创建移动布局。 然后，我们将使用min-width媒体查询添加特定于平板电脑和台式机CSS。

导航栏还将具有一个基于JavaScript的下拉子菜单，当用户单击父菜单项时，该子菜单将打开和关闭。

菜单在移动设备上的外观如下：

这是平板电脑版本：

而且，这是它在桌面上的外观：

您还可以在CodePen上测试，派生和玩交互式演示：

刚接触Flexbox？

1.创建HTML

HTML是一个简单的<ul>列表，如下所示。 .menu类将是flex容器，列表项将是flex项。 它们的顺序将适应用户设备的视口大小。 例如，“ 登录”和“ 注册”按钮将首先出现在移动设备上，但将显示在桌面上菜单的末尾。 我们将通过使用flexbox的ordering属性来实现这种效果。

<nav>
    <ul class="menu">
        <li class="logo"><a href="#">Creative Mind Agency</a></li>
        <li class="item"><a href="#">Home</a></li>
        <li class="item"><a href="#">About</a></li>
        <li class="item has-submenu">
            <a tabindex="0">Services</a>
            <ul class="submenu">
                <li class="subitem"><a href="#">Design</a></li>
                <li class="subitem"><a href="#">Development</a></li>
                <li class="subitem"><a href="#">SEO</a></li>
                <li class="subitem"><a href="#">Copywriting</a></li>
            </ul>
        </li>
        <li class="item has-submenu">
            <a tabindex="0">Plans</a>
            <ul class="submenu">
                <li class="subitem"><a href="#">Freelancer</a></li>
                <li class="subitem"><a href="#">Startup</a></li>
                <li class="subitem"><a href="#">Enterprise</a></li>
            </ul>
        </li>
        <li class="item"><a href="#">Blog</a></li>
        <li class="item"><a href="#">Contact</a>
        </li>
        <li class="item button"><a href="#">Log In</a></li>
        <li class="item button secondary"><a href="#">Sign Up</a></li>
        <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
    </ul>
</nav>

您可能已经注意到带有子菜单（“服务”和“计划”）的菜单项具有<a>标记，而没有href属性。 我们这样做是因为这些“空”父菜单项不会导致任何其他页面，它们只是打开