响应式滑动菜单_如何创建响应式滑动菜单

最新推荐文章于 2022-05-15 15:04:16 发布

cumi6497

最新推荐文章于 2022-05-15 15:04:16 发布

阅读量1.2k

点赞数

文章标签： java python css 面试 web

原文链接：https://www.freecodecamp.org/news/how-to-create-a-responsive-sliding-menu-97b90852a455/

版权

响应式滑动菜单

by Prashant Yadav

通过Prashant Yadav

I run a blog named learnersbucket.com where I write about ES6, Data structures, and Algorithms to help others crack coding interviews. Follow me on Twitter for regular updates.

我经营着一个名为learningersbucket.com的博客，其中写了有关ES6 ，数据结构和算法的文章，以帮助他人破解编码面试。在Twitter上关注我以获取定期更新。

When I was designing my blog with a mobile-first approach, I decided to keep my sidebar navigation menu separate at the bottom right. There is no need for a sticky header and the user can read everything in full height.

在以移动优先方式设计博客时，我决定在右下角将侧边栏导航菜单分开。不需要粘性标头，用户可以读取所有高度的内容。

This is the simple version of how my mobile menu looks.

这是我的移动菜单外观的简单版本。

Here is how you can create your own responsive sidebar navigation menu.

您可以按照以下方法创建自己的响应式侧边栏导航菜单。

总览 (Overview)

Before we move on to designing the menu, let us imagine what components we need.

在继续设计菜单之前，让我们想象一下我们需要哪些组件。

A hamburger ? button which will show/hide the sliding menu.
一个汉堡？按钮，将S 如何/小时IDE滑动菜单。
Animation on the hamburger button to represent the current state of the menu.
汉堡包按钮上的动画代表菜单的当前状态。
A side navigation menu.
侧面导航菜单。

As the side navigation menu will toggle on the click of the hamburger menu, we can keep them together in a single container.

由于侧面导航菜单将在点击汉堡菜单上切换，因此我们可以将它们放在一个容器中。

依存关系 (Dependencies)

I like to use jQuery for DOM manipulation as it reduces the amount of code I need to write.

我喜欢将jQuery用于DOM操作，因为它减少了我需要编写的代码量。

汉堡按钮 (Hamburger button)

HTML结构 (HTML structure)

There is a simple trick to creating a hamburger menu.

创建汉堡菜单有一个简单的技巧。

We are going to use a <div> with a .hamburger class to create the hamburger button wrapper. Then we will place three <span>s to create the layers of the hamburger.

我们将使用ith a .ham burger类的<d iv>来创建汉堡按钮包装。然后，我们将放置three <span>来创建汉堡包的各层。

设计汉堡包按钮 (Designing the hamburger button)

Now that the HTML structure for our button is ready, we need to design it to make it look like a hamburger. While designing, we need to keep in mind that we have to provide the animation for open & close when the user clicks on it.

现在我们的按钮HTML结构已经准备就绪，我们需要对其进行设计以使其看起来像一个汉堡包。在设计时，我们需要记住，当用户单击动画时，必须提供打开和关闭动画。

As we are creating a fixed dimension hamburger button, we are going to provide fixed dimensions to the wrapper.

在创建固定尺寸的汉堡按钮时，我们将为包装纸提供固定尺寸。

We have created a fixed parent .hamburger{position:fixed} to place it wherever we want on the screen.
我们已经创建了一个固定的父.hamburger{position:fixed}可以将其放置在屏幕上的.hamburger{position:fixed} 。
Then we have designed all the <span>s as small rectangular boxes with position:absolute.
然后，我们将所有<sp an>设计为with position:ab solute的小矩形框。
As we need to show three different strips we have changed the top position of the 2nd span .hamburger > span:nth-child(2){ top: 16px; } & 3rd span .hamburger > span:nth-child(3){ top: 27px; }.
因为我们需要显示三个不同的条，所以我们更改了第二个跨度的顶部位置。 .hamburger > span:nth-child(2){ top: 16px ; }＆3rd sp an .hamburger > span:nth-child(3){ top: 2 7px; }。
We have also provided transition: all .25s ease-in-out; to all the spans so that the change of their properties should be smooth.
我们还提供了transition: all .25s ease-in-out; 到所有跨度，以便其属性的变化应平滑。

用jQuery打开和关闭汉堡包按钮 (Opening & Closing hamburger button with jQuery)

Whenever the hamburger button is clicked it will toggle an open class to it. We can now use this class to add the opening & closing effect.

只要点击“汉堡包”按钮，它就会切换一个open类。现在，我们可以使用此类来添加打开和关闭效果。

.hamburger.open > span:nth-child(2){ transform: translateX(-100%); opacity: 0;} will slide the middle strip of the hamburger to the left and make it transparent.

.hamburger.open > span:nth-child(2){ transform: translateX(-100%); opacity: .hamburger.open > span:nth-child(2){ transform: translateX(-100%); opacity: 0;}会将汉堡包的中间条向左滑动并使其透明。

.hamburger.open > span:nth-child(1){ transform: rotateZ(45deg); top:16px; } & .hamburger.open > span:nth-child(2){ transform: rotateZ(-45deg); top:16px; } will bring the first and last span to the same top position and rotate them to make an X.

.hamburger.open > span:nth-child(1){ transform: rotateZ(45deg); top:16px .hamburger.open > span:nth-child(1){ transform: rotateZ(45deg); top:16px ; } & .hamburger.open > span:nth-child(2){ transform: rotateZ(-45deg); top:1 & .hamburger.open > span:nth-child(2){ transform: rotateZ(-45deg); top:1 6px; }将第一个和最后一个跨度移到相同的顶部位置，然后旋转它们以形成X。

Kudos ? we have our hamburger ? button ready, so let us create the side navigation now.

荣誉？我们有我们的汉堡包吗？按钮已准备就绪，现在让我们创建侧面导航。

HTML结构 (HTML structure)

We will create a simple navigation menu.

我们将创建一个简单的导航菜单。

We used a nav element for creating the navigation menu and placed the links in ul.

我们使用nav元素创建导航菜单，并将链接放在ul 。

I have created a full-screen side menu, you can change the dimensions according to your need. We are using &gt; selector to avoid overwriting the style of other elements.

我已经创建了一个全屏的侧面菜单，您可以根据需要更改尺寸。我们使用& GT; 选择器以避免覆盖其他元素的样式。

Now we have our navigation menu and hamburger button ready, so we can wrap them inside a wrapper to make them functional.

现在，我们已经准备好导航菜单和汉堡包按钮，因此可以将它们包装在包装纸中以使其正常工作。

HTML结构 (HTML structure)

We have placed the hamburger button and navigation menu inside the .mobile-menu wrapper.

我们将汉堡包按钮和导航菜单放在.mobile-menu包装器内。

We have updated the design a little by providing some property of the .hamburger to .mobile-menu making it fixed and made .hamburger relative to keep the <span> design the same.

我们已经通过提供的某些属性更新设计有点.hamburger到.mobile-menu使其固定并提出.hamburger相对保持<sp的>设计相同。

As there can be multiple navs, we have updated all the selectors .mobile-menu > nav as well to make sure we are pointing to the required elements only.

由于可以有多个nav ，因此我们也更新了所有选择器.mobile-menu > nav以确保我们仅指向必需的元素。

We now add our .open class to the .mobile-menu so that we can handle both the hamburger button and the sliding menu with a single change.

现在，我们将.open类添加到.mobile-menu以便我们只需一次更改即可处理汉堡包按钮和滑动菜单。

Our CSS for the animation is also updated accordingly.

我们的动画CSS也将相应更新。

Well done ??? we covered everything.

做得好？？？我们涵盖了一切。

Check out the working demo here

在这里查看工作演示

结论 (Conclusion)

This post was about a simple sliding menu. I tried to break it into different components so that you can use them independently.

这篇文章是关于一个简单的滑动菜单的。我试图将其分解为不同的组件，以便您可以独立使用它们。

Thank you for having patience while reading this. If you learned something new today then give some ?. Also, share it with your friends so that they can learn something new too.

感谢您耐心阅读。如果您今天学到新知识，那就给些？。另外，与您的朋友分享，以便他们也可以学习新知识。

That’s it, follow me on Twitter for knowledge sharing. I write about ES6, Nodejs, Data structures & Algorithms and full stack web development with JavaScript.

就是这样，在Twitter上关注我以进行知识共享。我写了关于ES6 ，Nodejs，数据结构和算法以及使用JavaScript进行全栈Web开发的文章。

Originally published at learnersbucket.com on April 14, 2019.

最初于2019年4月14日发布在learningersbucket.com上。