css 汉堡菜单

Rencently I've found this awesome by Vitaly Rubtsov, and I could not resist the urge to try to implement it :)

最近，我发现了维塔利· （Vitaly Rubtsov） 的这张 ，而我忍不住想要实现它的冲动:)

In this tutorial I'll explain the entire process of how to do it with CSS only, without using a single line of JavaScript. So, we will be seeing some CSS (and SCSS) tricks that will allow us to achieve an animation almost as smooth as the animated gif.

在本教程中，我将解释如何仅使用CSS而不用一行JavaScript的整个过程。 因此，我们将看到一些CSS（和SCSS）技巧，使我们能够实现几乎与动画gif一样平滑的动画。

Here's the CodePen of what we'll build:

这是我们将构建的CodePen：

( )

Let's start with the HTML structure we'll be using. See the comments for better understanding.

让我们从我们将要使用HTML结构开始。 请参阅注释以获得更好的理解。

( )

Now let's add some basic styles to start getting the look and feel we want. The code is pretty straightforward.

现在，让我们添加一些基本样式以开始获得我们想要的外观。 该代码非常简单。

/* Basic styles */* {
       box-sizing: border-box;}html, body {
       margin: 0;}body {
       font-family: sans-serif;  background-color: #F6C390;}a {
       text-decoration: none;}.container {
       position: relative;  margin: 35px auto 0;  width: 300px;  height: 534px;  background-color: #533557;  overflow: hidden;}

( )

Before start building the rest of the interface, let's add the toggle functionality to easily change from one state to another.

在开始构建其余界面之前，让我们添加切换功能以轻松地从一种状态更改为另一种状态。

The HTML we need is already in place. And the style to make it works could be something like this:

我们需要HTML已经存在。 使它起作用的样式可能是这样的：

// To hide the checkbox#toggle {
       display: none;}// Styles for the 'open' state, if the checkbox is checked#toggle:checked {
       // Any element you need to change the style if menu is open goes here, using the sibling selector (~) as follows  // Styles for the open navigation menu, for example  & ~ .nav {
       }}

( )

To build the closed state, we need to transform the menu items into lines to make up the hamburger menu icon. We can come up with several ways to accomplish this transformation. We have decided to do it this way:

要建立关闭状态，我们需要将菜单项转换成几行以组成汉堡菜单图标。 我们可以提出几种方法来完成此转换。 我们已决定采用这种方式：

And this is the code to get it working:

这是使其正常工作的代码：

$transition-duration: 0.5s;// Showing nav items as lines, making up the hamburger menu icon.nav-item {
       position: relative;  display: inline-block;  float: left;  clear: both;  color: transparent;  font-size: 14px;  letter-spacing: -6.2px;  height: 7px;  line-height: 7px;  text-transform: uppercase;  white-space: nowrap;  transform: scaleY(0.2);  transition: $transition-duration, opacity 1s;  // Adjusting width for the first line  &:nth-child(1) {
         letter-spacing: -8px;  }  // Adjusting width for the second line  &:nth-child(2) {
         letter-spacing: -7px;  }  // Adjusting from the fourth element onwards  &:nth-child(n + 4) {
         letter-spacing: -8px;    margin-top: -7px;    opacity: 0;  }  // Getting the lines for the hamburger menu icon  &:before {
         position: absolute;    content: '';    top: 50%;    left: 0;    width: 100%;    height: 2px;    background-color: #EC7263;    transform: translateY(-50%) scaleY(5);    transition: $transition-duration;  }}

Note that here we have posted only the main styles for the nav items, which is the most important part. You can find the .

请注意，此处我们仅发布了导航项的主要样式，这是最重要的部分。 您可以找到 。

( )

To build the open menu we need to restore the nav items from lines to normal text links, among other minor changes. Let's see how to do it:

要构建打开菜单，我们需要将导航项从行还原到普通文本链接，以及其他一些小的更改。 让我们看看如何做：

$transition-duration: 0.5s;#toggle:checked {
       // Open nav  & ~ .nav {
         // Restoring nav items from "lines" in the menu icon    .nav-item {
           color: #EC7263;      letter-spacing: 0;      height: 40px;      line-height: 40px;      margin-top: 0;      opacity: 1;      transform: scaleY(1);      transition: $transition-duration, opacity 0.1s;      // Hiding the lines      &:before {
             opacity: 0;      }    }  }}

( )

If we look closer at the gif, we can see that all the menu items do not move at the same time, but in a staggered way. We can do that in CSS too! Basically we need to select each element (using :nth-child) and set a progressively increased transition-delay. But that is certainly a repetitive work. And, what if we have more items? Don't worry, we can do it better with a bit of SCSS magic:

如果我们仔细查看gif，可以看到所有菜单项不是同时移动，而是以交错的方式移动。 我们也可以在CSS中做到这一点！ 基本上，我们需要选择每个元素（使用:nth-child ）并设置一个逐渐增加的transition-delay 。 但这当然是重复的工作。 而且，如果我们还有更多物品怎么办？ 不用担心，我们可以使用一些SCSS魔术来做得更好：

$items: 4;$transition-delay: 0.05s;.nav-item {
       // Setting delays for the nav items in close transition  @for $i from 1 through $items {
         &:nth-child(#{$i}) {
           $delay: ($i - 1) * $transition-delay;      transition-delay: $delay;      &:before {
             transition-delay: $delay;      }    }  }}

Here we are using a loop, a variable interpolation and some basic arithmetic operations. You can learn more about these and more awesome features in the .

在这里，我们使用循环，变量插值和一些基本的算术运算。 您可以在了解有关这些功能以及更出色的功能的更多信息。

Please note that with this code we'll get the desired staggered behavior for the close animation. We need to calculate the $delay slightly different for the open animation, to get a inversely staggered transition. Just like this:

请注意，使用此代码，我们将为关闭动画获得所需的交错行为。 我们需要为打开的动画计算$delay稍有不同，以得到反交错的过渡。 像这样：

$delay: ($items - $i) * $transition-delay;

( )

And we are done with our fancy menu! We have also included some dummy elements, like in the animated gif, and you can see the .

而且我们已经完成了精美的菜单！ 我们还包括了一些虚拟元素，例如在gif动画中，您可以在看到 。

So far, we have built a cool and functional menu just with CSS. However, if you are not in favor of using the CSS toggle system, it can be perfectly replaced by a few lines of JavaScript without too much effort.

到目前为止，我们仅使用CSS就构建了一个功能强大的菜单。 但是，如果您不赞成使用CSS切换系统，则可以用几行JavaScript完美地替换它，而无需花费太多精力。

You can find the full code on the , and also .

您可以在找到完整的代码，也 。

We hope this tutorial has been to your liking and you have found it useful!

我们希望本教程适合您的需求，并且对您有所帮助！

翻译自:

css 汉堡菜单