VUE双端响应式顶部导航栏（带吸顶效果）

已于 2022-01-23 12:06:36 修改
阅读量2.1k 收藏 25
点赞数 1
分类专栏： 前端 文章标签： vue.js javascript 前端
于 2022-01-23 12:01:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40707758/article/details/122649264
版权

VUE双端响应式顶部导航栏（带吸顶效果）

废话不多说，直接上代码：

<template>
  <div class="menubar" @touchmove.prevent>
      <div class="menubar-bg" :class="xd_flag&&'xd-active'"></div>
      <div class="logo">
        <!-- <img src="../../public/images/logo.png" alt="" height="36px" style="margin-top:12px"> -->
        <img src="https://gitee.com/static/images/logo.svg?t=158106664" alt="" height="30px" style="margin-top:15px">
      </div>
      <ul style="margin:0;padding:0;">
        <div class="xys-info">
          <img src="http://ccnuer114282.gitee.io/education_platform/dist/static/img/login.d0fc2f12.png" alt="">
          <div>未登录</div>
          <hr>
        </div>
        <li><a href="#/">
            <span class="icon"><i aria-hidden="true"></i></span>
            <span class="title" :class="index=='1'&&'nav-active'">首页</span>
        </a></li>
        <li><a href="#/project">
            <span class="icon"><i aria-hidden="true"></i></span>
            <span class="title" :class="index=='2'&&'nav-active'">项目</span>
        </a></li>
        <li><a href="#/paper-list">
            <span class="icon"><i aria-hidden="true"></i></span>
            <span class="title" :class="index=='3'&&'nav-active'">论文</span>
        </a></li>
        <li><a href="#/journal">
          <span class="icon"><i aria-hidden="true"></i></span>
          <span class="title" :class="index=='4'&&'nav-active'">期刊</span>
        </a></li>
        <li><a href="#/policy">
          <span class="icon"><i aria-hidden="true"></i></span>
          <span class="title" :class="index=='5'&&'nav-active'">政策</span>
        </a></li> 
        <li><a href="#/patent">
          <span class="icon"><i aria-hidden="true"></i></span>
          <span class="title" :class="index=='6'&&'nav-active'">专利</span>
        </a></li>
        <li><a href="#/conference">
          <span class="icon"><i aria-hidden="true"></i></span>
          <span class="title" :class="index=='7'&&'nav-active'">会议</span>
        </a></li>
        <li><a>
          <span class="icon"><i aria-hidden="true"></i></span>
          <span class="title" :class="index=='8'&&'nav-active'">机构</span>
        </a></li>
        <li><a href="#/recommendation">
          <span class="icon"><i aria-hidden="true"></i></span>
          <span class="title" :class="index=='9'&&'nav-active'">投稿推荐</span>
        </a></li>
      </ul>
      <div class="user">
        <div class="userimg">
          <img src="http://ccnuer114282.gitee.io/education_platform/dist/static/img/login.d0fc2f12.png" alt="">
        </div>
        <div class="username">未登录</div>
      </div>
      <div id="toggleBar" class="bar"><img src="http://ccnuer114282.gitee.io/education_platform/dist/static/img/nav.b716be73.png" alt="" class="nav-logo"></div>
    </div>
</template>
<script>
export default {
  data(){
    return{
      xd_flag:false,
    }
  },
  computed:{
    index(){
      // vue-router 激活css高亮属性.nav-active 
      //事先要根据自己的需求定义好路由
      let path = this.$route.name;
      switch(path){
        case 'Home':
          return 1;
        case 'Project':
        return 2;
        case 'PaperList':
          return 3;
        case 'SubPaper':
          return 3;
        case 'Journal':
          return 4;
        case 'Policy':
          return 5;
        case 'Patent':
          return 6;
        case 'Conference':
          return 7;
        case 'Recommendation':
          return 9;
      }
    }
  },
  mounted(){
    let that = this;

    let toggleBar = document.getElementById('toggleBar');
    let MenubarUl = document.querySelector('.menubar ul');
    let LeftSildeMenubar = document.querySelector('.menubar ul');

    //显示侧滑导航栏
    toggleBar.onclick = function() {
      LeftSildeMenubar.classList.toggle('active');
      document.body.style.overflow = 'hidden';
    }

    //隐藏策划导航栏
    MenubarUl.onclick = function() {
      LeftSildeMenubar.classList.remove('active');
      document.body.style.overflow = 'scroll';
    }
    
    //吸顶
    window.onscroll = function() {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if(scrollTop==0){
        that.xd_flag = false;
      }else{
        that.xd_flag = true;
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.nav-active{
  color: white !important;
  font-weight: bold !important;
  border-bottom: 2px solid white !important;
  box-sizing: border-box !important;
  height: 60px;
  transition: none !important;
}
.nav-logo{
  display: none;
  width: 30px;
  margin-top: 15px;
  vertical-align: middle;
  margin-left: 15px;
}
.xd-active{
  opacity: 1 !important;
  box-shadow: 0 0 6px #0d0d0dab;
}
.xys-info{
  display: none;
}
.content {
  width: 100%;
  height: 100%;
  text-align: center;
}

.menubar {
  position: fixed;
  width: 100%;
  top: 0;
  height: 60px;
  display: flex;
  flex-direction: row;
  user-select: none;
  z-index: 100;
}

.menubar-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:0;
  z-index: -1;
  background: linear-gradient(-150deg, #389c8d, #3c4f7e);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.menubar .logo {
  min-width: 120px;
  width: 10%;
  text-align: center;
}

.menubar .logotitle {
  width: 100%;
  line-height: 60px;
  font-size: 24px;
  color: #fff;
}

.menubar .user {
  width: 20%;
  min-width: 80px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-right: 30px;
  align-items: center;
  cursor: pointer;
}

.menubar .user .userimg {
  width: 60px;
  height: 60px;
}

.menubar .user .userimg img {
  width: 36px;
  height: 36px;
  margin-top: 12px;
  margin-right: 0px;
  border-radius: 50%;
}

.menubar .user .username {
  font-size: 14px;
  color: #eee;
  height: 60px;
  line-height: 60px;
}

.menubar ul {
  position: relative;
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: left;
  text-align: center;
}

.menubar ul li {
  min-width: 50px;
  list-style: none;
  margin-left: 20px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.menubar ul li a {
  position: relative;
  display: block;
  width: 100%;
  line-height: 60px;
  text-decoration: none;
}

.menubar ul li a:hover span{
  transition: all 0.3s ease;
  color: #eee;
}

.menubar ul li a .icon {
  display: none;
}

.menubar ul li a .title {
  position: relative;
  display: block;
  line-height: 60px;
  text-align: center;
  font-size: 16px;
  color: #bbb;
}

.list {
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-around;
  align-items: center;
}

.list .item {
  flex-basis: 23%;
  margin-top: 22px;
  height: 260px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: .314s;
  cursor: pointer;

}

.list .item:hover{
  transform: scale(1.02);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}

.list .item .desc {
  width: 90%;
  margin: 16px;
  flex-basis: 80%;
  background-color: #f5f5f5;
}

.list .item .title {
  width: 90%;
  margin: auto 16px;
  margin-bottom: 16px;
  flex-basis: 20%;
  background-color: #f5f5f5;
}

.footer{
  position: relative;
  bottom: 0;
  height: 172px;
  color: #a5a5a5;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  line-height: 36px;
}

/* 响应式 */
@media (max-width:1060px) {
  .nav-logo{
    display:block;
  }
  .nav-active{
    color: white !important;
    font-weight: bold !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
    height: 60px;
    transition: all 0.1s ease-in;
  }
  .xys-info{
    display: block;
    margin-top: 20px;
    color: #aaa;
    img{
      width: 60px;
      margin-bottom: 10px;
    }
    hr{
      width: 80%;
      margin-left: 10%;
      margin-top: 20px;
      margin-bottom: 20px;
      border: none;
      height: 2px;
      border-radius: 10rem;
      background: #ccc;
    }
    div{
      cursor: pointer;
    }
  }
  .menubar {
    position: fixed;
    top: 0;
    display: block;
    height: 60px;
    transition: .321s;
  }

  .menubar .logo {
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
  }

  .menubar .logotitle {
    width: 100%;
    line-height: 60px;
    font-size: 20px;
    color: #fff;
  }

  .menubar ul {
    width: 0px;
    position: fixed;
    height: 100vh;
    left: -60px;
    display: flex;
    flex-direction: column;
    background-color: #282c34;
    overflow: hidden;
    transition: .141s;
    z-index: 10;
    box-shadow: 6px 0px 10px 0px rgba(0, 0, 0, 0.5);
  }

  .menubar ul.active {
    left: 0;
    width: 260px;
    transition: .314s;
  }

  .menubar ul.active::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);
    z-index: -1;
  }

  .menubar ul li {
    width: 100%;
  }

  .menubar ul li a {
    display: flex;
    flex-direction: row;
  }

  .menubar ul li a .icon {
    position: relative;
    display: block;
    min-width: 60px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    display: block;
  }

  .menubar ul li a .title {
    position: relative;
    display: block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
  }

  .menubar .bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
  }

  .menubar .user .username {
    display: none;
  }

  .list .item {
    flex-basis: 45%;
    margin-top: 12px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }
}

@media (max-width:480px) {
  .list .item {
    flex-basis: 100%;
    margin-top: 12px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }
}

</style>

效果图

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

又菜又爱玩的学树人。
关注
  • 1
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-cli实战项目9 顶部导航栏的实现
weixin_42213903的博客
11-20 5568
文章目录上一章节顶部导航栏的实现基本实现调整头像完整代码下一章节 上一章节 Vue-cli实战项目8 主布局的实现 顶部导航栏的实现 使用Element 的 NavMenu 导航菜单组件来实现 NavMenu 导航菜单 基本实现 调整 水平布局 class=“d-flex” 居中 class=“align-items-center” mb-0 = margin-bottom：0 mr-auto ...
vue 移动端与pc端的适配功能（两套路由）
yasuo56的博客
11-04 1019
vue适配双端
Vue实现二级导航
조국화
04-21 1087
<!doctype html> 二级菜单(vue)
vue—菜单栏自适应折叠
08-01 3815
vue—菜单栏自适应折叠
Vue --- 菜单导航栏
zxsy19966的博客
06-29 8060
【vue】菜单导航栏
Vue实现顶部导航栏设计
m0_52204142的博客
10-21 7374
效果图： 完整代码： <template> <div class="title"> <div class="title-left"> <div class="title-left-image"></div> <router-link to="/unusedOrder"> 　　 <span class="">导航一</spa
Bootstrap实现响应式导航栏效果
11-22
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-...
响应式导航栏.zip
06-05
在“响应式导航栏.zip”中，使用Vue.js框架来实现数据和表现的分离，这是现代前端开发的常见实践。Vue.js是一个轻量级的JavaScript框架，它提倡声明式编程，使开发者能更专注于描述数据和视图的关系，而无需关心如何...
element-ui 实现响应式导航栏的示例代码
10-15
在本文中，我们将深入探讨如何使用Element UI框架实现响应式导航栏。Element UI 是一个基于 Vue.js 的组件库，提供了丰富的UI元素，用于快速构建美观的前端界面。然而，它默认并不提供传统的顶部导航栏组件，因此...
vue2移动端响应式模板
02-21
Vue2 移动端响应式模板是为适应各种屏幕尺寸的移动设备而设计的一种开发框架。这个模板基于Vue2，利用了lib-flexible和postcss-plugin-px2rem这两个关键工具，实现像素单位（px）到相对单位（rem）的自动化转换，...
html5简洁的响应式顶部固定导航菜单特效
11-21
html5简洁的响应式顶部固定导航菜单特效 html5简洁的响应式顶部固定导航菜单特效 html5简洁的响应式顶部固定导航菜单特效 html5简洁的响应式顶部固定导航菜单特效
vue实现二级导航栏效果
10-16
主要为大家详细介绍了vue实现二级导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue设置导航栏、顶部栏为公共页面
FJ101113的博客
10-08 2146
首先全局引入需要的两个组件 import LeftSide from '@/components/leftSide/index'; import CrmHeader from '@/components/crmHeader/index'； Vue.component('LeftSide',LeftSide); Vue.component('CrmHeader',CrmHeader); 然后在MainApp.vue中添加如下代码 <!-- 实际运用场景中，登录注册页面我们不希望出现，所以用keep-a
Vue3项目-配置路由及侧边栏导航栏
dayouan的博客
03-31 3923
2.在router文件夹下面index文件中 routes数组添加重定向 其中某对象中添加 children 属性 配置 二级路由 并关联上想要链接的页面 component 后面跟懒加载页面。-----------------------此时 通过手动输出地址就可以跳转地址 显示出路由出口的内容----------------------首先要提取头部组件到公共文件夹中 方便后期维护 然后引入到HomeView文件中 因为我写的vue3是以js为主的 因此 要删除掉类型注解。
vue 搜索框header_Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件
weixin_32535637的博客
01-12 634
基于Vue.js实现自定义Topbar+Tabbar组件|仿咸鱼底部凸起导航最近一直在倒腾Nuxt项目，由于Nuxt.js是基于Vue.js的服务端渲染框架，只要是会vue，基本能很快上手了。一般移动端项目，顶部导航/底部Tab功能是少不了的。本想着使用Vant组件库，可是项目中有个类似咸鱼底部凸起导航功能，经过再三考虑还是自己造了个自定义Navbar+Tabbar组件。以便以后在其它Vue项目中...
vue实现横向切换自动居中
Summer_JK的博客
12-02 1692
vue实现横向切换自动居中 想要点击的元素自动居中，首先要获取的值有：元素距离屏幕的左边距离，元素宽度的一半，屏幕的总宽度的一半，当前滚动的距离长度，下面是实现的代码： HTMl（这里的html是我项目所需要的数据渲染，大家可以理解成ul下多个li的结构）： <div class="flash-list"> <div class="scroll-box"> <div v-for="(item, _index) in flashLi
Vue实战第3章：主页设计之顶部导航栏
孙君的空间站
02-01 9418
Vue实战第3章：主页设计之顶部导航栏
vue中的横向排列_vue.js 首页PC端横排导航栏
weixin_39954908的博客
12-19 1159
先看看效果 {{item.name}}{{subItems.name}}export default{data(){return{nowIndex:0,items:[{name:‘首页‘,isSubShow:false,subItems:[]},{name:‘精选路线‘,isSubShow:false,subItems:[{name:‘马尔代夫‘},{name:‘索马里海峡‘},{name:‘丽江...
Vue-cli3.0布局实战篇---组件
洋滔的博客
12-01 2220
在我们实际开发项目中，会有一些重复的代码块，比如单页应用的底部工具栏，页面的顶部导航栏，甚至一些特定应用里的推荐商品等等，如果我们每个页面都单独去写这些代码，一是影响开发效率二是不方便维护。而vue中的组件components，就可以解决这样的问题，通过组件的复用，来实现这些相同的页面效果。今天就给大家带来，在vue-cli3.0开发中，几种最常见的组件使用方法。
使用vue+elementui实现 顶部导航栏
最新发布
05-03
使用 Vue 和 Element UI 实现顶部导航栏的步骤如下： 1. 安装 Vue 和 Element UI ```bash npm install vue npm install element-ui ``` 2. 引入 Element UI 在 `main.js` 文件中引入 Element UI： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值