python制作一个菜单_用CSS打造一个图形化的汉堡菜单

Python部落(python.freelycode.com)组织翻译，禁止转载，欢迎转发。

最近，我发现Vitaly Rubstov写的运球投篮特效十分了不起，我简直遏制不住想要亲自用代码实现这个功能的冲动。

在这堂辅导课中，我将会解释只用CSS而不使用任何一行JavaScript来实现它的全过程。所以，在这里，我们将看到一些可以让我们实现一个几乎和gif动画一样生动的动态图片的CSS技巧。

下面是我们将要实现的代码：

标记:

让我们从我们将要使用的HTML结构开始。看下面这些模块可以更好的理解。

最初的样式:

现在，让我们加一点基础的样式来开始实现我们想要的内容，下面这个代码就看起来非常直接。

开关函数:

在我们开始打造剩下来的界面时，让我们加上开关函数来简单的使它从一个区域跳转到另外一个区域。

我们需要的Html已经在页面上了，让它工作的样式可能就类似下面这个了。

构造相近的菜单:

为了打造相近的菜单，我们需要把众多菜单条目变成竖排导航来组成汉堡菜单。我们可以想出几个方法来实现这种转换，最终我们决定采用下面这种方法来实现它。

这是使它工作的代码:

我们已经为导航栏写完了主要的样式，它是最重要的一部分，你可以在github上找到完整的代码。

制作开发的菜单

为了做一个开放的菜单，在一些次要的更改中，我们还需要把那些导航类目从单纯的一排文字变成链接，让我们看看如何可以实现它。

在细节中的魔力:

如果我们靠近看gif图片，我们可以看到所有的菜单项不会同时移动，但会以一个更令人诧异的方式移动。我们当然也可以用CSS来完成它。最基本的，我们需要先选择每一个元素（using:nth-child),再做一个逐渐递增的时延。

但那当然是一个具有代表性的工作。但是，如果我们有更多的类目呢？不要担心，我们可以用一点SCSS把它做的更好。

在这里，我们将使用一个循环，一个可变的插入值和一些基础的算法知识。你可以在SASS事件区域学习到更多关于这些的知识和更多了不起的专题。

请记住这个代码，在接下来的动画中，我们将会发现更令人诧异的东西。我们需要为开场动画计算一下时延，从而得到一个相反的过渡，就像下面这个:

结论：

我们已经做完我们别致的菜单了。我们也添加了一些就像在生动的gif图片中虚拟的元素，同时在这里你可以发现最后的demo文件。

到现在为止，我们已经做了一个只用CSS就可以实现了酷炫功能多样的菜单了。然而，如果你不喜欢使用CSS开关系统的话，我们可以非常完美的用几行JavaScript代码替代，完全不怎么费力。

你们可以在github仓库找到完整的代码，并且可以直接套用。

我们希望这堂辅导课你们会喜欢，并且会觉得有点用。

英文原文：https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css

译者：他知道风从哪个方向来