CSDN网页顶部导航栏,浮窗效果
说明:此篇文章是基于前两篇文章发布,其中包含了vue-cli(脚手架)的使用,和vue-router(路由)的使用,同时使用了全局事件总线。
导航栏效果
导航栏几乎完全和 csdn 网页的导航栏相同
导航栏代码
<template>
<div>
<div class="navbarBox" style="min-height: 48px;">
<div class="navbar">
<!-- 导航栏容器 -->
<div class="navbar-container">
<!-- 左侧 -->
<div class="navbar-container-left">
<!-- 网页logo -->
<div class="logo">
<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="">
</div>
<!-- 左侧导航栏 -->
<ul class="left-ul">
<li title=""><router-link active-class="active" to="#"> 博客 </router-link></li>
<li title=""><router-link active-class="active" to="#"> 开发者文库 </router-link></li>
<li title=""><router-link active-class="active" to="#"> 课程 </router-link></li>
<li title=""><router-link active-class="active" to="#"> 问答 </router-link></li>
<li title=""><router-link active-class="active" to="#"> 社区 </router-link></li>
<li title=""><router-link active-class="active" to="#"> 插件 </router-link></li>
<li title=""><router-link active-class="active" to="#"> 认证 </router-link></li>
<li title=""><router-link active-class="active" to="#"> 开源 </router-link></li>
</ul>
</div>
<!-- 中间搜索框 -->
<div class="navbar-container-middle">
<div class="navbar-search-container">
<input type="text" autocomplete="off" id="search" :placeholder="defaultText">
<button>
<i></i>
<span>搜索</span>
</button>
</div>
</div>
<!-- 右侧导航栏 -->
<div class="navbar-container-right">
<div class="navbar-btns-User">
<!--用户登录: 展示用户的头像以及其他信息-->
<div class="userPhoto" @mouseover="mouseOver" @mouseleave="mouseLeave" v-if="isLogin">
<!-- 用户头像 -->
<a class="hasAvatar" :style="{opacity}" href="https://blog.csdn.net/weixin_52372879?spm=1000.2115.3001.5343" >
<img src="../assets/portrait.png">
</a>
<!-- 用信息弹出框 初始display:none-->
<div class="navbar-profile" :style="{display}" >
<div class="profile-user">
<!-- 用户简介的头像 -->
<a class="profile-avatar" href="https://blog.csdn.net/weixin_52372879?spm=1000.2115.3001.5343">
<img src="../assets/portrait.png"></a>
<p class="profile-nickName">京茶吉鹿</p>
</div>
</div>
</div>
<!--用户未登录: 提示提示信息-->
<div class="userPhoto" v-else @click.prevent="login">
<a href="">登录/注册</a>
</div>
<!-- 会员中心 -->
<div class="navbar-btn navbar-btn-dynamic navbar-fl">
<a href="">会员中心</a>
</div>
<!-- 足迹 -->
<div class="navbar-btn navbar-btn-news navbar-fl">
<a href="">足迹</a>
</div>
<!-- 动态 -->
<div class="navbar-btn navbar-btn-news navbar-fl">
<a href="">动态</a>
</div>
<!-- 消息 -->
<div class="navbar-btn navbar-btn-news navbar-fl">
<a href="">消息</a>
</div>
<!-- 发布 -->
<div class="navbar-btn navbar-btn-write navbar-fl">
<a class="write" href="">
<i ></i>发布
<i ></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "CSDNHeader",
data(){
return{
opacity: 1,
display: 'none',
isLogin: false,
defaultText: 'CSDN——京茶吉鹿'
}
},
methods:{
mouseOver(){
this.opacity = 0
this.display = 'block'
},
mouseLeave(){
this.opacity = 1
this.display = 'none'
},
transIndex(){
this.$router.push('/index')
},
login(){
this.$router.push('/login')
}
},
mounted() {
this.$bus.$on('isLogin',(data)=>{
this.isLogin = data
})
//此处要判断token是否存在,存在则不展示 登录/注册 选项
if(window.sessionStorage.getItem("tokenStr")){
this.isLogin = true
}
}
}
</script>
<style scoped>
.navbar{
position: fixed;
z-index: 2001;
top: 0px;
width: 100%;
left: 0px;
font-size: 14px;
/* 字体粗细,400相当于normal */
font-weight: 400;
color: #222226;
background-color: #fff;
/* 阴影 水平阴影距离,垂直阴影距离, 模糊尺寸, 阴影尺寸 颜色*/
box-shadow:0 2px 4px 0 rgb(0, 0, 0,5%);
}
.navbar-container{
width: 100%;
/* 最小宽度,窗口缩小之后到1280px不会再缩小 */
min-width: 1280px;
box-sizing: border-box;
padding: 0 24px;
margin: 0 auto;
height: 48px;
line-height: 48px;
display: flex;
justify-content: space-between;
-webkit-box-pack: justify;
}
.toolbar-container-left{
/* 元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器 */
flex: none;
}
.logo{
position: relative;
float: left;
margin-right: 8px;
/* 当箭头鼠标移到会变成手式鼠标 */
cursor: pointer;
}
.logo img{
width: 80px;
max-width: 80px;
height: 44px;
display: block;
margin-top: calc((48px - 44px)/ 2);
}
.left-ul{
width: auto;
height: 100%;
/* 去除li中的间隙,在li中设置font-size,否则没有内容 */
font-size: 0px;
float: left;
}
.left-ul li{
position: relative;
display: inline-block;
font-size: 14px;
height: 100%;
line-height: 48px;
}
a{
color:#000;
padding: 0 10px;
/* 删除a标签的下划线 */
text-decoration: none;
}
/* 鼠标停留时的样式 */
.left-ul li:hover{
background-color: #eee;
}
.navbar-container-middle{
padding: 0 40px;
flex: 1;
}
.navbar-search-container{
width: 100%;
max-width: 720px;
height: 32px;
line-height: 32px;
margin-top: calc((48px - 32px)/ 2);
box-sizing: border-box;
font-size: 0px;
margin-left: auto;
margin-right: auto;
}
.navbar-search-container input{
font-size: 14px;
display: inline-block;
width: calc(100% - 88px);
height: 100%;
line-height: inherit;
/* 为了后面聚焦搜索框样式,将边框外围线清除 */
outline: 0;
background: #f5f6f7;
color: #222226;
vertical-align: top;
text-indent: 16px;
border: 1px solid #e8e8ed;
border-right: none;
box-sizing: border-box;
border-radius: 16px 0 0 16px;
}
/* 搜索框聚焦样式 */
.navbar-search-container input:focus{
border: 1px solid #fc5531;
border-right: none;
}
.navbar-search-container button{
display: inline-block;
width: 88px;
height: 100%;
outline: 0;
border: 0 none;
border-radius: 0 16px 16px 0;
font-size: 14px;
line-height: 32px;
cursor: pointer;
background-color: #fc5531;
text-align: left;
}
.navbar-search-container i{
display: inline-block;
width: 24px;
height: 24px;
background: url(https://g.csdnimg.cn/common/csdn-toolbar/images/csdn-white-search.png) no-repeat center center;
background-size: 100%;
vertical-align: middle;
position: relative;
top: -1px;
margin-left: 14px;
}
.navbar-search-container span{
display: inline-block;
vertical-align: top;
color: #fff;
}
.navbar-btns-User{
flex: 1;
}
.userPhoto{
height: 100%;
float: left;
position: relative;
line-height: 48px;
text-align: center;
padding: 0 8px;
}
.hasAvatar{
display: block;
line-height: 48px;
color: #222226;
margin-top: calc((48px - 32px)/ 2);
margin-right: 16px;
opacity: 1;
}
.hasAvatar img{
width: 32px;
height: 32px;
border-radius: 50%;
}
.navbar-profile{
width: 248px;
color: #222226;
background: #fff;
position: absolute;
min-height: 200px;
top: 48px;
left: 50%;
margin-left: -132px;
z-index: 9999999;
border-radius: 4px;
box-shadow: 0 0 10px 2px rgb(0 0 0 / 6%);
}
.navbar-profile .profile-user{
text-align: center;
padding: 20px 0 12px 0;
border-bottom: 1px solid #e8e8ed;
}
.navbar-profile .profile-user .profile-avatar{
position: absolute;
width: 48px;
height: 48px;
padding: 0px;
top: -32px;
left: 50%;
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
border-radius: 50%;
cursor: pointer;
z-index: 9999;
border: 1px solid #e8e8ed;
}
.profile-user .profile-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.navbar-profile .profile-user .profile-nickName{
width: 100%;
box-sizing: border-box;
padding: 0 16px;
font-size: 16px;
color: #222226;
font-weight: 500;
height: 40px;
line-height: 40px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.navbar-btn{
position: relative;
height: 48px;
line-height: 48px;
color: inherit;
text-align: center;
padding: 0 4px;
}
.navbar-fl{
float: left;
}
.navbar-btn-write>a i:first-child{
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
background: url("../assets/write.png");
background-size: 100%;
margin-right: 2px;
}
.navbar-btn-write>a i:last-child{
display: inline-block;
background: 0 0;
width: 10px;
height: 7px;
margin-left: 7px;
vertical-align: middle;
background: url(https://g.csdnimg.cn/common/csdn-toolbar/images/write-hover-thro.png) no-repeat center center;
background-size: 100%;
}
.write{
display: block;
min-width: 88px;
height: 32px;
line-height: 32px;
text-align: center;
color: #fff;
background: #fc5531;
border-radius: 20px;
margin-top: calc((48px - 32px)/ 2);
}
</style>