css菜单缓慢滑动

by Supriya Shashivasan

由Supriya Shashivasan

如何使用HTML，CSS和JavaScript构建滑动菜单栏 (How to build a sliding menu bar using HTML, CSS and JavaScript)

A menu is what you look for when you land at a website. It has options and gives you access to everything the website has to offer you. You would definitely say it is an important part of a website, right?

菜单是您进入网站时想要的。 它具有选项，使您可以访问网站所提供的所有内容。 您肯定会说它是网站的重要组成部分，对吧？

My friend Girish patil and I started a biweekly newsletter for fronted developers this month. The first newsletter features sliding menu bars, and so here I am writing about how we built it.

我和朋友吉里什·帕蒂尔 ( Girish patil)本月开始了双月刊 ，专为前沿开发人员撰写 。 第一个时事通讯以滑动菜单栏为特色，因此在这里我要写关于我们如何构建它的信息。

Before we begin, get a container in place for your whole webpage and design the width and height according to your requirements. Now, inside the container, you have to place a sliding menu. In this article, we’ll explain how to create a left sliding menu.

在我们开始之前，请为整个网页准备好一个容器，并根据您的要求设计宽度和高度。 现在，您必须在容器内放置一个滑动菜单。 在本文中，我们将说明如何创建向左滑动菜单。

让我们开始吧 (Let’s get started)

The HTML code for the slider is given below. It is a basic bare version.

滑块HTML代码如下。 它是基本的裸版本。

<div class="slider-container">

<a href="#" class="slider-trigger">   Click here   </a>

<div class="slider-parent">    <h1>Slider</h1>    <a href="https:/twitter.com/giyaletter">Twitter&lt;/a> <br>    &lt;a href="https:/twitter.com/s_omeal">@Supriya</a> <br>    <a href="https:/twitter.com/g__patil">@Girish</a> <br>   </div>

</div>

An anchor tag is used to open the menu when clicked on. This is what triggers the menu to open, so you can see why it’s called slider-trigger. The menu component is what lies in the slider-parent class.

单击时，使用锚标记打开菜单。 这就是触发菜单打开的原因，因此您可以了解为什么将其称为“ slider-trigger” 。 菜单组件是滑块父类中的内容。

Now design the menu bar in CSS. Pay attention to the design details.

现在，在CSS中设计菜单栏。 注意设计细节。

.slider-container {  position: relative; }  .slider-container .slider-parent {    height: 70vh;    max-width: 250px;    width: 100%;    background: #6C7A89;    position: absolute;    left: -250px;    top: 50px;    visibility: hidden;    opacity: 0;    pointer-events: none;    transition: .2s all linear; }   .slider-container .slider-parent.active {      visibility: visible;      pointer-events: inherit;      transition: .2s all ease-in-out;      opacity: 1;      left: 0; }

Let’s now break down the above snippet and discuss how it works.

现在让我们分解上面的代码片段，并讨论其工作原理。

Maxwidth defines the maximum width up to which the div can occupy. In a smaller window, it can occupy less that 250px. The div occupies 250px when the window is stretched all the way out on the screen.

Maxwidth定义div可以占用的最大宽度。 在较小的窗口中，它可以占用的像素数少于250px。 当窗口一直延伸到屏幕上时，div占据250px。

At times, the user might look at the website on a much smaller screen, so we want our div to resize accordingly.

有时，用户可能会在小得多的屏幕上浏览网站，因此我们希望div相应地调整大小。

Moving on, let’s look at why left : -250px? This is done to get that smooth sliding action for the menu. Notice that the value for left is negative, which tells us that the menu starts 250px to the left of the starting position (which is 0). So it is presently not in the visible area.

继续前进，让我们看看为什么要离开-250px？ 这样做是为了使菜单获得平滑的滑动动作。 请注意，left的值为负，这告诉我们菜单从起始位置(即0)的左侧开始250px。 因此，它目前不在可见区域。

We don’t want the sliding menu to be seen at all, which is why we add opacity and make its visibility hidden. Everybody likes animation, and it gives an interesting visual feel. This animation can be done using the transition component.

我们根本不希望看到滑动菜单，这就是为什么我们添加不透明度并将其可见性隐藏的原因 。 每个人都喜欢动画，它给人一种有趣的视觉感受。 可以使用过渡组件完成此动画。

呀！ 基本的滑块已完成！ (YAYYY! The basic slider is done!)

Now that the basic slider is done, let’s understand what happens when the slider bar is active — that is, when the anchor tag that opens the menu bar is clicked.

现在已经完成了基本的滑块，让我们了解一下当滑块处于活动状态时，即单击打开菜单栏的锚标记时会发生什么。

Focus on the active class in the CSS code given above. Notice that the values for opacity and visibility are changed. This change is made to make the slider (which was previously hidden) visible on the screen.

专注于上面给出CSS代码中的活动类。 请注意， 不透明度和 可见性已更改。 进行此更改是为了使滑块(以前隐藏)在屏幕上可见。

Also, you might wonder: why is it now left : 0? Previously, the slider was out of the screen. Now that we want the menu to start at the left side of the screen, we change the value of left to 0.

另外，您可能想知道：为什么现在左为0？ 以前，滑块不在屏幕上。 现在我们希望菜单从屏幕的左侧开始，我们将left的值更改为0。

OH! The animation! Add the transition component again so that when the slider is active, it eases in from the left smoothly.

哦！ 动画！ 再次添加过渡组件，以便在激活滑块时从左侧平滑地移入。

It’s done! You have designed the components, so what is the next step? JavaScript! It’ll put all this into action.

完成！ 您已经设计了组件，那么下一步是什么？ JavaScript！ 它将所有这些付诸实践。

添加一些JavaScript (Adding some JavaScript)

var sliderTrigger = document.getElementsByClassName("slider-trigger")[0];var slider = document.getElementsByClassName('slider-parent')[0];

sliderTrigger.addEventListener( "click" , function(el){

if(slider.classList.contains("active")){  slider.classList.remove("active"); }else{  slider.classList.add("active"); }

});

Let’s look into how JavaScript wraps everything and gets the slider working. We want the slider to open when the anchor tag slider-trigger is clicked. So we get that element into a variable sliderTrigger. Later on we get the whole slider element into the variable slider. Now, we add an event listener that implements a function when the sliderTrigger element is clicked.

让我们研究一下JavaScript如何包装所有内容并使滑块正常工作。 我们希望单击锚标签滑块触发时打开滑块 。 因此，我们将该元素放入可变的slideTrigger中。 稍后，我们将整个Slider元素放入变量lider中 。 现在，我们添加一个事件侦听器，该事件侦听器在sliderTrigger时实现一个功能 单击元素。

sliderTrigger.addEventListener( "click" , function(el) {} );

The function that is written controls the mechanics of opening and closing the sliding menu bar. Remember that we had an active and a normal slider-parent class.

编写的函数控制打开和关闭滑动菜单栏的机制。 请记住，我们有一个活动的和一个正常的父滑块 类。

The hack we implement here is to add the active class when the sliderTrigger element is clicked, and remove the active class when the same element is clicked again. To do that we use the code given below, to check if the variable contains the class active.

我们在这里实现的技巧是在单击slideTrigger元素时添加活动类，并在再次单击同一元素时删除活动类。 为此，我们使用下面给出的代码来检查变量是否包含活动类。

slider.classList.contains("active")

If the value is true, we remove the class active from the list. What happens then? The sliding menu bar closes. If the value is false, we add the class active to the classlist. Now what happens? Yes, the sliding menu bar is displayed. It is that simple.

如果该值为true，则从列表中删除活动的类。 那会发生什么呢？ 滑动菜单栏关闭。 如果值为false，则将活动类添加到类列表中。 现在会发生什么？ 是的，将显示滑动菜单栏。 就这么简单。

slider.classList.add("active")

slider.classList.remove("active")

Voilà完成了！！ 看看谁在鼓掌;) (Voilà it’s done!! Look who is clapping ;))

The working of the same code is shown below in the CodePen.

下面的CodePen中显示了相同代码的工作方式。

While this is a basic example, I’m sending out examples of more complex and different types of sliding menu bars in my newsletter.

尽管这是一个基本示例，但我在时事通讯中发送了更复杂和不同类型的滑动菜单栏的示例。

Github repo of Giyaletter

Giyaletter的Github回购

Twitter handle: Supriya S and Girish Patil

Twitter句柄： Supriya S和Girish Patil

Thank you. Happy coding :)

谢谢。 快乐的编码:)

Check out products by us:

通过我们查看产品：

paybackhub.com and certhive.com

paybackhub.com和certhive.com

翻译自: https://www.freecodecamp.org/news/how-to-build-a-sliding-menu-bar-using-html-css-and-javascript-669f0c1c37a7/

css菜单缓慢滑动