博客导航条效果

学习来自风`宇Blog

• 上浮菜单的效果，如果使用transition的话，会发现刚开始的display为none，也就是一开始是没有初始值的，也就不能用过渡。所以使用动画来解决这个问题
• 当鼠标hover悬浮在主菜单上时，子菜单与主菜单之间还有些距离，当从主菜单移动到子菜单的过程中，由于不满足hover条件了，还没移到子菜单，子菜单就隐藏了，这个用伪类比较方便解决，给主菜单添加伪类，让它占据子菜单与主菜单之间还有些距离这部分空间，就满足了hover条件了
• 在vue中，尽量用类名来做效果。

<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&family=Delicious+Handrawn&family=Noto+Sans+Mono:wght@300&display=swap');
@import url('//at.alicdn.com/t/c/font_4004562_9wrsonssnio.css');body {margin: 0;min-height: 100vh;background-color: #b5b5b5;background-image: url(@/assets/bg.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;}ul,
li {margin: 0;padding: 0;list-style: none;
}a {text-decoration: none;color: #4c4948;
}.non-bg-color {background-color: rgba(255, 255, 255, 0) !important;
}.non-bg-color .nav-bar-right>ul>li>a {color: #e1e1e3 !important;
}/* 子菜单上浮效果 */
@keyframes submenu-moveUp {0% {transform: translateY(20px);opacity: 0;}100% {transform: translateY(0px);opacity: 1;}
}.nav-bar {box-sizing: border-box;position: fixed;width: 100%;padding: 0 40px 0 40px;top: 0;background-color: rgba(255, 255, 255, 0.8);height: 60px;transition: all 0.5s;display: flex;align-items: center;justify-content: space-between;&.up {top: -60px}.nav-bar-left {.site-name {font-size: 32px;color: #fff;}}.nav-bar-right {&>ul {display: flex;&>li {padding: 5px;margin: 0 2px;position: relative;a.menu-a {display: flex;align-items: center;position: relative;i {margin-right: 3px;margin-top: 3px;font-size: 16px;}span {font-size: 16px;/* 不要换行 */display: inline-block;width: max-content;}&::before {content: '';position: absolute;bottom: -5px;left: 0;height: 2px;width: 100%;background-color: #4ab1f4;width: 0;transition: all 0.28s;}&:hover::before {display: block;width: 100%;}}&::before {/* 添加在这里，让hover触发元素和隐藏元素之间的距离能覆盖到,让hover效果正常 */content: '';position: absolute;width: 100%;height: 18px;// background-color: red;bottom: -18px;}&:hover {.sum-menu-ul {display: block;animation: submenu-moveUp 0.5s;}}.sum-menu-ul {position: absolute;right: 0;top: 36px;width: max-content;background-color: #fff;line-height: 1.6em;border-radius: 5px;display: none;i {margin-right: 8px;}li {padding: 5px 10px;&:hover {color: #4ab1f4;background-color: #4ab0f3;}&:first-child {border-radius: 6px 6px 0 0;}&:last-child {border-radius: 0 0 6px 6px;}}}}}}}
</style>
<template><div><div ref="navBar" class="nav-bar non-bg-color"><div class="nav-bar-left"><a class="site-name" href="#" style="font-family: 'Cairo', sans-serif;">pscool</a></div><div class="nav-bar-right"><ul><li><a class="menu-a" href="#"><i class="iconfont icon-sousuo" style="font-weight: bold;"></i><span>搜索</span></a></li><li><a class="menu-a" href="#"><i class="iconfont icon-shouye"></i><span>首页</span></a></li><li><a class="menu-a" href="#"><i class="iconfont icon-faxian"></i><span>发现</span><i class="iconfont icon-a-xiala2"></i></a><ul class="sum-menu-ul"><li class="sub-menu-li"><a href="#"><i class="iconfont icon-xiangmuguidang" style="font-weight: bold;"></i><span>归档</span></a></li><li class="sub-menu"><a href="#"><i class="iconfont icon-icon_category"></i><span>分类</span></a></li><li class="sub-menu"><a href="#"><i class="iconfont icon-biaoqian"></i><span>标签</span></a></li></ul></li><li><a class="menu-a" href="#"><i class="iconfont icon-yingyong"></i><span>娱乐</span><i class="iconfont icon-a-xiala2"></i></a><ul class="sum-menu-ul"><li class="sub-menu-li"><a href="#"><i class="iconfont icon-xiangce" style="font-weight: bold;"></i><span>相册</span></a></li><li class="sub-menu"><a href="#"><i class="iconfont icon-pinglun"></i><span>说说</span></a></li></ul></li><li><a class="menu-a" href="#"><i class="iconfont icon-lianjie" style="font-weight: bold;font-size: 18px;"></i><span>友链</span></a></li><li><a class="menu-a" href="#"><i class="iconfont icon-zhifeiji"></i><span>关于</span></a></li><li><a class="menu-a" href="#"><i class="iconfont icon-liuyan"></i><span>留言</span></a></li><li><a class="menu-a" href="#"><i class="iconfont icon-denglu"></i><span>登录</span></a></li></ul></div></div><div class="content" style="height: 500px;"></div></div>
</template><script>export default {name: 'navbar',data() {return {preScrollTop: null,}},mounted() {window.addEventListener('scroll', this.onScroll)},destroyed() {window.removeEventListener('scroll', this.onScroll)},methods: {onScroll() {let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;if (scrollTop < 1) {this.$refs['navBar'].classList.add('non-bg-color')} else {this.$refs['navBar'].classList.remove('non-bg-color')}if (!this.preScrollTop) {this.preScrollTop = scrollTopreturn} else {if (scrollTop > this.preScrollTop) {console.log('向下');this.$refs['navBar'].classList.add('up')} else {console.log('向上');this.$refs['navBar'].classList.remove('up')}this.preScrollTop = scrollTop}}},components: {}
}
</script>