给网站增加移动端菜单 - 文章

由于之前懒省事，移动端下直接把本站上方的导航菜单给隐藏了，这样移动端的用户访问就无法点击菜单，使用十分不方便，加上近期给网站新增了一个导航功能，如果没有菜单根本访问不了，于是萌生了一个增加移动端点击显示菜单功能的想法。

初步计划

既然有了想法，那么开始构思如何去做。我首先开始去寻找市面上的一些优秀主题，看看他们都是怎么做的，这边我曾关注了几款WordPress主题：

总裁主题：

这种风格还是我个人比较喜欢的，不过由于它的按钮是在底部居中的位置，因此菜单出现的位置为屏幕左侧，倒是不太符合我的逻辑，但是我认为我整体上喜欢这个风格，有参考意义。

日主题：

日主题这个就更加符合我的审美了，不出意外的话我会选择日主题这样的形式去展示菜单。

7B2：

7b2采用的是这种滑动菜单，和我预想中的不一样，直接pass。

参考完以上几款主题以后，我的大体思路就确定了，恰巧在这个时候我访问了一下AdSense:

这个我感觉更棒了，不过我的站的话，还是要把菜单放在右边的。

代码思路

看完上面的几个实例以后，心中大概有了思路：第一步就是在我的Toolbar组建里面增加一个全屏的父div，然后这个父div使用flex布局并添加两个子div，分别表示白色的菜单容器和黑色的点击隐藏菜单容器。功能不难，开撸！

代码历程

<!--在Toolbar组建内，添加一个div，这个div的背景为黑色，不过我这里在黑色透明背景的基础上增加了模糊-->
<!-->透明黑色模糊背景表现的class为：modal-show<-->
<div class="fixed modal-show z-30 w-full h-full border-t-2"
    :class="mobileMenuStatus ? ' animation-mobile-bg-show' : 'animation-mobile-bg-hidden pointer-events-none'">
    <div class="w-9/12 bg-white h-full right-0 absolute"
        :class="mobileMenuStatus ? 'animation-mobile-show' : 'animation-mobile-hidden'">
        <ul class="text-lg font-semibold">
            <li class="cursor-pointer select-none">
                <NuxtLink @click="toggleMobileMenu()" to="/">
                    <div class="m-2 p-2 mx-2 bg-gray-100 ">首页</div>
                </NuxtLink>
            </li>
            <li v-for="(item, index) in dataList" :key="index" class="cursor-pointer select-none">
                <NuxtLink @click="toggleMobileMenu()" :to="{ name: item.link }">
                    <div class="m-2 p-2 mx-2 bg-gray-100 ">{{ item.name }}</div>
                </NuxtLink>
            </li>
        </ul>
    </div>
    <div class="w-3/12 h-full" @click="toggleMobileMenu()"></div>
</div>

效果：

以上代码还是多少花费了些时间的，例如：pointer-events-none，我如果不加上这句的话，即便隐藏了菜单，但是还是无法点击正常的页面内容，另外就是动画效果。

动画使用css实现：


@keyframes right-to-left {
  0% {
      transform: translateX(120vw)
  }

  100% {
      transform: translateX(0px)
  }
}
@keyframes to-show {
  0% {
      opacity: 0;
  }

  100% {
     opacity: 1;
  }
}
@keyframes to-hidden {
  0% {
      opacity: 1;
  }

  100% {
     opacity: 0;
  }
}
.animation-mobile-show {
  animation-name: right-to-left;
  animation-duration: 0.4s;
}
.animation-mobile-hidden {
  transform: translate3d(100%,0,0);
  transition: transform .3s ease-in-out;
}
.animation-mobile-bg-show {
  animation-name: to-show;
  animation-duration: 0.4s;
}
.animation-mobile-bg-hidden {
  opacity: 0;
  transition: opacity .2s cubic-bezier(0,0,.2,1) 0ms;
}

动画分为两部分，一部分是父布局（黑色透明模糊背景）的消失和显示，仅有控制一个opacity即可（注意看还有背景逐渐模糊）。另一部分则是白色的菜单元素，这里在显示和隐藏的基础上增加了滑动离开和进入的动画效果。

全部代码地址：页面：https://github.com/ZN-GG/ZNGG-Nuxt3/blob/main/components/Toolbar.vue 样式：https://github.com/ZN-GG/ZNGG-Nuxt3/blob/main/assets/css/tailwind.css

结语

终于增加了这个功能以后感觉网站都变得更加完整了，后续还要不断增加新的内容。回头有时间的话，将导航页面的前后端实现写出来。未完待续~