很多朋友在制作网站时往往想要将网站的导航做成中英文两种语言的，但是直接把两种文案往上放效果出来又不好看，那么是否存在更好的解决方案呢？

答案就在今天的小教程里面，我们可以使用一串小代码实现翻转导航的效果，实际展示如下：

下面是我们的详细教程，首先我们可以在导航组件下面新加一个代码组件，并把效果代码放置进去：

代码如下：

<style>

    .zz-nav .zz-menu .zz-menu-item .zz-menu-item__title>span:after{

      content: 'HOME';

      color: #FCE300;

      font-size: 12px;

      font-weight: 900;

      font-style: normal;

      font-family: Georgia;

      padding-bottom: 2px;

      border-bottom: 2px solid #762813;

      display: block;

      text-align: center;

    }

.zz-nav .zz-menu .zz-menu-item:nth-child(2) .zz-menu-item__title>span:after{

      content: 'ABOUT';

    }

.zz-nav .zz-menu .zz-menu-item:nth-child(3) .zz-menu-item__title>span:after{

      content: 'ONLINE STORE';

    }

.zz-nav .zz-menu .zz-menu-item:nth-child(4) .zz-menu-item__title>span:after{

       content: 'STORE';

    }

.zz-nav .zz-menu .zz-menu-item:nth-child(5) .zz-menu-item__title>span:after{

        content: 'CONTACT US';

    }

.zz-nav .zz-menu .zz-menu-item:nth-child(6) .zz-menu-item__title>span:after{

         content: 'INVITE BITS';

    }

.zz-nav .zz-menu-item .menu-link{

      overflow: hidden;

    }

.zz-nav .zz-menu-item .zz-menu-item__title{

     transition:transform 0.3s;

          height:25px;

    }

.zz-nav .zz-menu-item .zz-menu-item__title>span{

      transition:transform 0.3s;

      display: block;

}

.zz-nav .zz-menu-item:hover .zz-menu-item__title>span{

      transform: translateY(-50%);

}

.zz-nav {

text-align: center;

}

</style>

代码组件添加完成以后，我们需要点击导航组件，给导航组件添加一个自定义class：zz-nav，就可以让代码生效啦，操作如下：

PS：上述代码中红色背景部分为英文导航以及其下划线的颜色，可以修改颜色色号，蓝色背景部分为英文导航显示的单词，同样可以直接在代码中进行修改。