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

最新推荐文章于 2022-12-01 10:46:44 发布

cumian8165

最新推荐文章于 2022-12-01 10:46:44 发布

阅读量264

点赞数

文章标签： java css python html javascript ViewUI

原文链接：https://www.freecodecamp.org/news/how-to-build-a-responsive-navbar-with-a-toggle-menu-using-flexbox-3438e1d08783/

版权

vux flexbox使用

by Charlie Waite

查理·怀特(Charlie Waite)

During a recent project, my team had to remove all traces of Bootstrap. This meant the extremely useful responsive navbar was going to have to be created from scratch. I’m relatively new to CSS, and have always relied on Bootstrap navbars for their simplicity, so I volunteered to take on this task. Here’s what I learned and did throughout the process.

在最近的项目中，我的团队不得不删除所有Bootstrap痕迹。这意味着必须从头开始创建极其有用的响应式导航栏。我是CSS的新手，并且一直以来都依靠Bootstrap导航栏来简化操作，因此我自愿参加了此任务。这是我在整个过程中学到的知识和所做的事情。

In this article, I will assume you have basic knowledge of HTML, CSS and JavaScript — you know how to link a stylesheet to your HTML or apply the styles in a <style>tag — and you know how to import a JavaScript file into your page.

在本文中，我将假定您具有HTML，CSS和JavaScript的基本知识-您知道如何将样式表链接到HTML或在<sty le>标签中应用样式-并且知道如何将JavaScript文件导入到您的页面。

I’ve had defensive elitists criticise my way of doing things, especially with the toggle menu being position: absolute — if you have better ways of doing this then please respond below and we can make this better for the thousands of people reading it!

我曾经有防御性的精英批评我的做事方式，尤其是在切换菜单处于position: absolute -如果您有更好的做事方法，请在下面回应，我们可以为成千上万的阅读者提供更好的解决方案！

入门 (Getting started)

Firstly, I started with some basic HTML for the layout:

首先，我从布局的一些基本HTML开始：

<div class="Navbar">
  <div class="Navbar__Link Navbar__Link-brand">
    Website title
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
  <div class="Navbar__Link">
    Link
  </div>
</div>

You can use any naming convention for the classes.

您可以为类使用任何命名约定。

Now, this isn’t giving us much yet. This is just a plain list of items. But with just one line of CSS, we see the power of Flexbox.

现在，这还没有给我们带来太多好处。这只是一个简单的项目列表。但是只有一排CSS，我们看到了Flexbox的强大功能。

.Navbar {
  display: flex;
}

One line of code, and we already have our navigation items aligned horizontally across the top of the page.

一行代码，并且我们已经使导航项在页面顶部水平对齐。

Now let’s add two nav elements to our HTML so we can have some items on the left and right of the navbar:

现在，我们在HTML中添加两个nav元素，以便在导航栏的左侧和右侧添加一些项目：

<div class="Navbar">
  <nav class="Navbar__Items">
    <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

And some basic styling on our Navbar class which wraps all the other elements:

Navbar类的一些基本样式包含了所有其他元素：

.Navbar {
  background-color: #46ACC2;
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
}

Of course you can choose your own color scheme, font, and padding.

当然，您可以选择自己的配色方案，字体和填充。

Now our navbar will look like this:

现在，我们的导航栏将如下所示：

Whoops, now it looks a bit better, but we can’t have our navigation items displayed vertically. Before you read on, try having a guess as to what we’re going to do next…

糟糕，现在看起来要好一些，但是我们无法垂直显示导航项。在继续阅读之前，请尝试猜测我们下一步将要做什么……

Now our display:flex in the .Navbar class is no longer responsible for these items. It is now responsible for their <nav> containers. We want both to be aligned horizontally.

现在， .Navbar类中的display:flex不再负责这些项目。现在，它负责其<n av>容器。我们希望两者都水平对齐。

So we change the .Navbar__Items class too:

因此，我们也更改了.Navbar__Items类：

.Navbar__Items {
  display:flex;
}

Now lets add some padding to our links to make this just a bit prettier:

现在让我们在链接中添加一些填充以使其更漂亮：

.Navbar__Link {
  padding-right: 8px;
}

Now our nav bar looks like this:

现在，我们的导航栏如下所示：

We’re getting there. But we also want the second <nav> to be aligned to the right. As you may have noticed — I added an extra class to the second <nav> tag .Navbar__Items--right.

我们到了。但是我们也希望第二个<n av>右对齐。您可能已经注意到了-我在s econd < nav> tag .Navbar__ Items中添加了一个额外的类-对。

Let’s simply add a margin-left:auto to this class:

让我们简单地向该类添加margin-left:auto ：

.Navbar__Items--right {
  margin-left:auto;
}

As you can see, this is now much better. We already have a fully responsive navbar. But…

如您所见，现在好多了。我们已经有一个响应Swift的导航栏。但…

What if each navigation item had longer text? What if there were more items?

如果每个导航项都有更长的文本怎么办？如果还有更多物品怎么办？

As you can see, this is not what we want. We either want to make all the navigation items single line for consistency, or we’d like them tucked away in a menu which the user can toggle.

如您所见，这不是我们想要的。我们或者希望使所有导航项都成为一行以保持一致性，或者我们希望将它们隐藏在用户可以切换的菜单中。

We’ll go with the latter, as it’s much cleaner and we won’t have to worry about the user struggling to read the text on each navigation item.

我们将使用后者，因为它更清洁，而且我们不必担心用户在阅读每个导航项上的文本时会很费力。

`flex-direction` (`flex-direction`)

With an item whose display is flex, there is also a rule for the direction we want the items to flex. This defaults to row, which aligns all the items neatly across the x-axis.

对于显示为可弯曲的项目，对于我们希望这些项目可弯曲的方向也有一个规则。默认为row，它将所有项目在x轴上整齐地对齐。

In our case, we’d like a small vertical menu at the top of our page. Let’s try changing the flex-direction on both .Navbar and .Navbar__Items to column — this aligns all menu items across the y-axis — when the screen width is 768px or lower.

就我们而言，我们希望页面顶部有一个小的垂直菜单。让我们尝试将.Navbar和.Navbar__Items的flex-direction .Navbar__Items为column(当屏幕宽度为768px或更.Navbar ，这.Navbar所有菜单项沿y轴对齐)。

And let’s remove that margin-left from the second <nav>:

让我们从第二个<n av>中删除margin-left距：

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items--right {
    margin-left: 0;
  }
}

But now, the navigation items are always visible, which takes up a significant amount of screen real estate.

但是现在，导航项始终可见，这会占用大量屏幕空间。

In our media query, lets add a second rule for .Navbar__Items so they are not visible:

在我们的媒体查询中，让我们为.Navbar__Items添加第二条规则，使它们不可见：

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
  .Navbar__Items {
    display:none;
  }
  .Navbar__Items--right {
    margin-left:0;
  }
}

切换按钮 (The toggle button)

For the toggle button, I am going to use an icon provided by Font Awesome. If you decide to follow suit, just follow the instructions on their site to get the icons integrated into your project. You can use any icon set you want, or you can use plain text if you desire.

对于切换按钮，我将使用Font Awesome提供的图标。如果您决定效仿，则只需按照其网站上的说明进行操作即可将图标集成到您的项目中。您可以使用所需的任何图标集，也可以根据需要使用纯文本。

Now let’s add this icon to our HTML:

现在，将这个图标添加到HTML中：

<div class="Navbar">
   <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
  <nav class="Navbar__Items">
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

I have bolded the new addition. You will notice that this toggle does not go within any of the nav tags but sits outside with the website title. Makes sense.

我已经加粗了新的内容。您会注意到，此切换不在任何nav标签内，而是位于网站标题的外面。说得通。

Of course, it’s not where we want it to be. And even worse, it’s visible on desktop resolutions.

当然，这不是我们想要的。更糟糕的是，它在桌面分辨率下可见。

Let’s fix this. Let’s do what we did with the .Navbar__Items on mobile to the menu icon on desktop:

让我们解决这个问题。让我们对移动.Navbar__Items上的.Navbar__Items到桌面上的菜单图标执行以下操作：

.Navbar__Link-toggle {
  display: none;
}

Now let’s add some rules to the same class within our media query:

现在，让我们向媒体查询中的同一类添加一些规则：

.Navbar__Link-toggle {
  align-self: flex-end;
  display: initial;
  position: absolute;
  cursor: pointer;
}

Now, we are pretty much done here. We have our desired look. But we need to add toggle functionality to the menu icon.

现在，我们在这里完成了很多工作。我们有我们想要的外观。但是我们需要在菜单图标上添加切换功能。

In your JavaScript, add:

在您JavaScript中，添加：

function classToggle() {
  const navs = document.querySelectorAll('.Navbar__Items')
  
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}

document.querySelector('.Navbar__Link-toggle')
  .addEventListener('click', classToggle);

Now lastly, add the Navbar__ToggleShow with the rule display:flexto your media query.

现在，最后，将带有规则display:flex的Navbar__ToggleShow添加到您的媒体查询中。

Now we have a fully responsive navbar with toggle menu. With Flexbox it really is that simple!

现在，我们有了一个带有切换菜单的完全响应式导航栏。使用Flexbox真的就是这么简单！

最终代码 (The final code)

HTML： (HTML:)

<div class="Navbar">
   <div class="Navbar__Link Navbar__Link-brand">
      Website title
    </div>
    <div class="Navbar__Link Navbar__Link-toggle">
      <i class="fas fa-bars"></i>
    </div>
  <nav class="Navbar__Items">
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Longer Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
  <nav class="Navbar__Items Navbar__Items--right">
    <div class="Navbar__Link">
      Link
    </div>
    <div class="Navbar__Link">
      Link
    </div>
  </nav>
</div>

CSS： (CSS:)

.Navbar {
  background-color: #46ACC2;
  display: flex;
  padding: 16px;
  font-family: sans-serif;
  color: white;
}

.Navbar__Link {
  padding-right: 8px;
}

.Navbar__Items {
  display: flex;
}

.Navbar__Items--right {
  margin-left:auto;
}

.Navbar__Link-toggle {
  display: none;
}

@media only screen and (max-width: 768px) {
  .Navbar__Items,
  .Navbar {
    flex-direction: column;
  }
    
.Navbar__Items {
    display:none;
  }
    
.Navbar__Items--right {
    margin-left:0;
  }
    
.Navbar__ToggleShow {
    display: flex;
  }
    
.Navbar__Link-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
   } 
}

JS： (JS:)

function classToggle() {
  const navs = document.querySelectorAll('.Navbar__Items')
  
  navs.forEach(nav => nav.classList.toggle('Navbar__ToggleShow'));
}

document.querySelector('.Navbar__Link-toggle')
  .addEventListener('click', classToggle);