CV工程师
2023-07-20 08:37:46 阅读:196
由于之前懒省事,移动端下直接把本站上方的导航菜单给隐藏了,这样移动端的用户访问就无法点击菜单,使用十分不方便,加上近期给网站新增了一个导航功能,如果没有菜单根本访问不了,于是萌生了一个增加移动端点击显示菜单功能的想法。
既然有了想法,那么开始构思如何去做。我首先开始去寻找市面上的一些优秀主题,看看他们都是怎么做的,这边我曾关注了几款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
终于增加了这个功能以后感觉网站都变得更加完整了,后续还要不断增加新的内容。回头有时间的话,将导航页面的前后端实现写出来。 未完待续~
评论