wordpress站点添加skype,营销推广的方案,做网站去哪里下载素材,带漂浮广告的网站目录 前言代码效果展示导航实现代码导航实现代码导航应用代码前言 总结一个最近开发的需求。设计稿里面有一个置顶的导航条，要求在激活的项目下面展示个下划线。我最先开始尝试的是使用 after 的伪类选择器，直接效果一样，但是展示的时候就会闪现变化，感觉不够自然，参考了一… 目录 前言代码效果展示导航实现代码导航实现代码导航应用代码 前言
总结一个最近开发的需求。设计稿里面有一个置顶的导航条，要求在激活的项目下面展示个下划线。我最先开始尝试的是使用 after 的伪类选择器，直接效果一样，但是展示的时候就会闪现变化，感觉不够自然，参考了一下其他网站的设计，最终选择将下划线改成一个可以随着导航项内容长度自动变换的div，并添加了滑块效果。
代码效果展示
为了图方便，我就写了主页和欢迎语两个路由内的内容，其他都页面都没写，不过效果倒是不影响。 导航实现代码
导航实现代码
这里的导航条内容封装在Header内容中
templatediv class="header-container"!-- 导航内容 --ul class="navigate-box"li class="navigate-item" v-for="(item,key) in navList" :key="key" @click=" navHoverID = item.id "router-link v-if="item.path" :to="item.path"{{item.name}}/router-link!-- 因为这里的页面3-页面5具体路由组件没有填写，这里为了导航项滑块效果，就先用span代替一下--span class="item" v-else{{item.name}}/span/lidiv class="trigger disabled" :style="slider()"/div/ul/div
/templatescript
export default {name: 'Header',data() {return{navList:[{id:0, name: "主页", path: "/homepage"}
