foreword

Usually when we browse the web, the navigation bar as shown in the figure below is not uncommon. When the mouse is placed on it, the hidden content on the right will slowly and smoothly unfold, which is very beautiful and practical. Do you know how this effect is achieved? ? Let's practice it together.

as the picture shows:
insert image description here

Implementation ideas

First of all, we need to position all the navigation bars to the lower right corner of the web page through fixedthe attribute ;
Set transitionthe property to add a smooth transition effect to all navigation bars;
Use rightthe property to offset all navigation bars to the right;
When the mouse touches a certain navigation bar, use hoverthe attribute , rightset the value to 0px, and cooperate with the previously mentioned transitionattribute to display the content on the right side smoothly.

Not much to say, let's look directly at the source code

full source code

<template>
  <div class="parentBox">
    <div class="contantsBox">
      <div>
        <span><img src="../assets/yuyue.png" /></span>
        <span>预约体验</span>
      </div>
      <div>
        <span><img src="../assets/kefu.png" /></span>
        <span>联系客服</span>
      </div>
      <div>
        <span><img src="../assets/fhdb.png" /></span>
        <span>回到顶部</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.parentBox {
    
    
  height: 100%;
  background: gainsboro;
  overflow: hidden;
  overflow-y: auto;
  .contantsBox {
    
    
    div {
    
    
      transition: all 0.7s;
      position: fixed;
      right: -127px;
      width: 180px;
      background: rgba(96, 96, 96, 0.6);
      color: #fff;
      padding: 8px 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      span:last-child {
    
    
        margin-left: 16px;
      }
      img {
    
    
        width: 32px;
        height: 32px;
        vertical-align: middle;
      }
    }
    div:nth-child(1) {
    
    
      bottom: 197px;
    }
    div:nth-child(2) {
    
    
      bottom: 148px;
    }
    div:nth-child(3) {
    
    
      bottom: 100px;
    }
    div:hover {
    
    
      right: 0px;
      cursor: auto;
      span {
    
    
        cursor: pointer;
      }
    }
    div:not(:last-child) {
    
    
      border-bottom: 1px solid #fff;
    }
  }
}
// 隐藏浏览器滚动条
::-webkit-scrollbar {
    
    
  display: none;
}
</style>

Extension

Of course, the above-mentioned operations are just a form of display, and similar functions may have very different effects. Next, let’s take a look at the effects of the following cases.

Case 1

full source code

<template>
  <div class="parentBox">
    <div class="menusBox">
      <p><span data-text='快速上手'>快速上手</span></p>
      <p><span data-text="进阶用法">进阶用法</span></p>
      <p><span data-text="开发指南">开发指南</span></p>
    </div>
  </div>
</template>
<style lang="less" scoped>
.parentBox {
    
    
  padding: 50px;
  height: 100%;
  background: rgb(37, 34, 51);
  .menusBox {
    
    
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(241, 241, 241, 0.25);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4) inset;
    border-radius: 16px;
    width: 30%;
    display: flex;
    justify-content: space-around;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    p {
    
    
      cursor: pointer;
      span {
    
    
        text-transform: uppercase;
        color: #fff;
        margin-top: -50px;
        transition: 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);
      }
      span:before {
    
    
        content: attr(data-text);
        /*直接使用data-text属性的值*/
        display: block;
        color: rgb(173, 255, 43);
      }
      span:hover {
    
    
        margin-top: 0;
      }
    }
    p * {
    
    
      display: inline-block;
      font-size: 18px;
      line-height: 50px;
    }
  }
}
</style>

renderings

insert image description here

Case 2