css 汉堡菜单_使用CSS构建变形汉堡包菜单

css 汉堡菜单

Rencently I've found this awesome dribbble shot 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：

标记 ( Markup )

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

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

<div class="container">
    <!-- This checkbox will give us the toggle behavior, it will be hidden, but functional -->
    <input id="toggle" type="checkbox">

    <!-- IMPORTANT: Any element that we want to modify when the checkbox state changes go here, being "sibling" of the checkbox element -->

    <!-- This label is tied to the checkbox, and it will contain the toggle "buttons" -->
    <label class="toggle-container" for="toggle">
        <!-- If menu is open, it will be the "X" icon, otherwise just a clickable area behind the hamburger menu icon -->
        <span class="button button-toggle"></span>
    </label>

    <!-- The nav menu -->
    <nav class="nav">
        <a class="nav-item" href="">Dashboard</a>
        <a class="nav-item" href=""