博客导航条效果
学习来自风`宇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;">pscoola>
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 = scrollTop
return
} 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>