vue实现仿DJI大疆官网顶部导航栏组件

页面进入时，导航栏背景色为透明：
鼠标移入时，导航栏背景变白，鼠标停留的标签字体颜色变换，出现底边框，若有二级下拉菜单，则平滑向下弹出菜单：

gitee仓库地址：https://gitee.com/Yuzaki-Nasa/dji-nav

实现导航栏二级从上往下弹出效果：https://blog.csdn.net/vvv3171071/article/details/121002283

导航栏的tab还有点击跳转、点击滚动页面等功能，可自行使用。

最终效果图：

DJINav.vue：

<template><!-- 顶部 --><div class="main-top"><div class="top-nav"><div class="container"><!-- 左侧 --><div class="t-left"><a href="#"><img src="../assets/ui_img/Profile.jpg" alt="" class="nav-logo" /><span>XXXXXXXX平台商城</span></a></div><!-- 右侧 --><div class="t-right"><ul><li @click="goToGitee"><div class="nav-tab">我的gitee</div></li><li @click="goTheDoc"><div class="nav-tab">滚动页面</div></li><li><div class="nav-tab">跳转链接</div><ul class="nav-menu"><li @click="goToLinks(0)">百度一下</li><li @click="goToLinks(1)">淘宝</li><li @click="goToLinks(2)">京东</li><li @click="goToLinks(3)">鹰角网络</li></ul></li><li><div class="nav-tab">关注我吧</div><ul class="nav-menu"><li @click="followMe(0)">CSDN</li><li @click="followMe(1)">知乎</li><li @click="followMe(2)">简书</li><li @click="followMe(3)">哔哩哔哩</li></ul></li><!-- <li @click="goToConsole"><div class="nav-tab">控制台</div></li> --><div class="console" @click="goToConsole"><div class="btn">控制台</div></div></ul></div></div></div><div class="container"><div class="baner-title"><h1>XXXXXXXX平台商城</h1><h3>Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介Demo简介</h3></div></div><div style="height: 3000px"></div><div class="documentation module-title">这种demo不需要文档，随便点点就玩明白了</div></div>
</template><script>
export default {name: 'DJINav',data() {return {}},methods: {// 跳转至对应规范标准goToLinks(id) {switch (id) {case 0:window.open('https://www.baidu.com/', '_blank')breakcase 1:window.open('https://www.taobao.com/', '_blank')breakcase 2:window.open('https://www.jd.com/', '_blank')breakcase 3:window.open('https://www.hypergryph.com/', '_blank')breakdefault:System.out.println('error')}},// 跳转至对应技术分享followMe(id) {switch (id) {case 0:window.open('https://blog.csdn.net/vvv3171071', '_blank')breakcase 1:window.open('https://www.zhihu.com/people/ling-deng-zao-lang','_blank')breakcase 2:window.open('https://www.jianshu.com/u/ea92175f1607', '_blank')breakcase 3:window.open('https://space.bilibili.com/163409', '_blank')breakdefault:System.out.println('error')}},// 跳转至GiteegoToGitee() {window.open('https://gitee.com/Yuzaki-Nasa/dashboard/projects', '_blank')},// 跳转至控制台goToConsole() {window.open('https://gitee.com/Yuzaki-Nasa/dji-nav', '_blank')},// 页面滚动到产品文档goTheDoc() {let el = document.getElementsByClassName('documentation')[0]this.$nextTick(() => {window.scrollTo({ top: el.offsetTop - 500, behavior: 'smooth' })})}}
}
</script>

<style lang="scss">
*,
:after,
:before {/* -webkit-box-sizing: inherit; */box-sizing: border-box;
}
/* 字体 */
@font-face {font-family: 'PingFangRegular';src: url('../assets/fonts/PingFangRegular.ttf');
}@font-face {font-family: 'PingFangMedium';src: url('../assets/fonts/PingFangMedium.ttf');
}body {font-family: 'PingFangMedium', PingFang SC;margin: 0;background: #ddd;
}/* 版心 */
.container {width: 100%;max-width: 1220px;margin: 0 auto;
}/* 模块标题 */
.module-title {margin-top: 60px;font-family: 'PingFangRegular';font-size: 28px;color: #000000;letter-spacing: 2px;text-align: center;line-height: 30px;font-weight: 600;
}/* 顶部导航栏 开始 */
.main-top {width: 100%;height: 650px;background: url('../assets/ui_img/banner4.jpg') no-repeat;background-size: cover;background-position: 100% 100%;.container {position: relative;}.top-nav {height: 80px;width: 100%;transition: all 0.3s;.t-left {float: left;a {height: 80px;line-height: 80px;display: inline-block;position: relative;.nav-logo {position: absolute;width: 32px;height: 32px;top: 24px;left: 20px;}span {font-size: 16px;font-family: 'PingFangMedium';margin-left: 62px;color: #ffffff;}}}.t-right {float: right;margin-right: 20px;ul {li {float: left;width: 120px;height: 80px;cursor: pointer;.nav-tab {height: 80px;width: 104px;margin: 0 auto;text-align: center;font-size: 16px;font-family: 'PingFangMedium';color: #ffffff;line-height: 80px;font-weight: 400;}.nav-menu {width: 120px;height: 0px;float: left;background: #ffffff;box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);border-radius: 0 0 2px 2px;overflow: hidden; // 让li的内容隐藏li {margin-left: 8px;width: 104px;height: 55px;border-bottom: 1px solid #eeeeee;font-family: 'PingFangRegular';font-size: 14px;// color: #34364e;line-height: 55px;text-align: center;font-weight: 400;}li:hover {color: #2271f7;font-family: 'PingFangMedium';}}}li:hover {.nav-tab {border-bottom: 4px solid #1890ff;color: #2271f7;}.nav-menu {transition: all 0.3s; // 鼠标移出时menu瞬间消失，故将transition加在hover里height: 220px; // 使menu从上往下平滑弹出}}.console {width: 104px;height: 80px;float: left;margin: 0 8px;position: relative;border-bottom: 4px solid transparent;cursor: pointer;.btn {margin-top: 2px;background: #2271f7;width: 91px;height: 35px;line-height: 35px;// padding-left: 24px;font-size: 15px;color: #fff;border-radius: 8px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}}.console:hover {border-bottom: 4px solid #1890ff;}}}}.top-nav:hover {background-color: #ffffff;box-shadow: 0 3px 8px 0 rgba(32, 42, 70, 0.07);.t-left a span {color: #34364e;}.t-right {.nav-tab {color: #34364e;}.nav-menu li {background: #ffffff;}}}.baner-title {position: absolute;top: 188px;left: 20px;text-align: left;h1 {font-weight: 800;font-size: 40px;color: #ffffff;}h3 {width: 493px;height: 104px;font-weight: 400;font-size: 14px;color: #ffffff;line-height: 26px;margin-top: 19px;}}
}.documentation {height: 1000px;margin-bottom: 1000px;
}
/* 顶部导航栏 结束 */
</style>

若对您有所帮助请为我点亮star，THX！

vue实现仿DJI大疆官网顶部导航栏组件相关推荐

仿简书，知乎pc官网顶部导航栏上下滚动效果
描述:简书,知乎顶部导航栏,当鼠标上下滚动时切换不同导航栏,非常符合用户习惯. 怎么实现的呢首先看一下实现的效果先上代码 <!DOCTYPE html> <html lang=& ...
HTML+CSS实现小米官网顶部导航栏
效果图效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
前端学习——仿原神官网顶部导航栏
前端学习--仿原神官网顶部导航栏通过使用CSS html实现原神官网的导航栏本人做的原神官网后续将把顶部标签hover效果的教程发出下面来看看代码  ...
vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
jQuery的小米官网-----侧边导航栏
目录前言 1.原生js和jQuery优势对比 1.1.原生JavaScript优点 1.2.jQuery优点 2.侧边栏代码展示 2.1. 原生js代码 2.2.jQuery代码总结前言时隔多 ...
Android仿微信底部菜单栏+今日头条顶部导航栏
背景 Android应用几乎都会用到底部菜单栏,在Material Design还没有出来之前,TabHost等技术一直占主流,现在Google新sdk中提供了TabLayout类可以便捷的做出底部菜 ...
智能社官网顶部导航实现demo
从智能社的blue老师公开课中学习到了很多,在此表示感谢. 这个导航很好玩,于是就想实现一个. html <div id="box"><ul><li& ...
vue.js项目实战运用篇之抖音视频APP-第三节：底部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
HTML网页设计期末课程大作业~仿腾讯游戏官网设计与实现(HTML+CSS+JavaScript)
HTML期末大作业~基于HTML+CSS+JavaScript腾讯游戏官网设计与实现关于HTML期末网页制作,大作业A+水平 ~腾讯游戏官网HTML+CSS+JavaScript实现,共有游戏首页 ...

vue实现仿DJI大疆官网顶部导航栏组件

vue实现仿DJI大疆官网顶部导航栏组件相关推荐

最新文章

热门文章