vuenav
A Vue.js project
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --reportFor a detailed explanation on how things work, check out the guide and docs for vue-loader.
##使用vue实现的一个简易二级导航
技术栈
- vue + vue-router + less
功能看图
横向的子菜单:
纵向的子菜单:
布局方案：
<!-- guidemenu: 纵向菜单 -->
<!-- toolmenu：横向菜单 -->
<ul class="nav">
<li><a href="">首页</a></li>
<li><a href="">安全</a></li>
<li><a href="">开发指南<b></b></a>
<ul class="guidemenu" v-show="isguide">
<li><a href="">开发流程</a></li>
<li><a href="">前后端契约</a></li>
<li><a href="">API文档说明</a></li>
</ul>
</li>
</ul>
<div class="toolmenu">
<ul class="menu">
<li>开发者中心</li>
<li><a href="">SDK</a></li>
<li><a href="">API文档</a></li>
</ul>
<ul class="menu">
<li>打包工具</li>
<li><a href="">Grunt</a></li>
<li><a href="">glup</a></li>
</ul>
</div>guidemenu : 纵向菜单的定位范围以父级li为准，所以直接写在li标签下。
toolmenu ：横向菜单的定位以body为准，所以直接写在最外面。
实现方案：
当鼠标移动到li上时,显示子菜单，针对于guidemenu，只需要判断父级li 移入移出即可。isguide作为开关显示隐藏子菜单。
<li @mouseover="isguide=true" @mouseout="isguide=false"><a href="">开发指南<b></b></a>
<ul class="guidemenu" v-show="isguide">
<li><a href="">开发流程</a></li>
<li><a href="">前后端契约</a></li>
<li><a href="">API文档说明</a></li>
</ul>
</li>针对于toolmenu 。因为子菜单于li标签是脱离开的，所以需要两个地方判断。一：在li标签上移入时或 在ul.guidemenu 标签上移入时显示子菜单。二：在li标签上移出并在ul.guidemenu标签上也移出时隐藏子菜单。
<li @mouseover="istool=true" @mouseout="istool=false"><a href="">常用工具<b></b></a></li>
<!-- 子菜单 -->
<div class="toolmenu" v-show="istool||ismenu" @mouseover="ismenu=true" @mouseout="ismenu=false">
<ul class="menu">
<li>开发者中心</li>
<li><a href="">SDK</a></li>
<li><a href="">API文档</a></li>
</ul>
<ul class="menu">
<li>打包工具</li>
<li><a href="">Grunt</a></li>
<li><a href="">glup</a></li>
</ul>
</div>细节处理
导航栏的底部有间隙，li包括的实际范围是蓝色部分，也就是说mouseover能作用的范围就是蓝色部分，这样的话当鼠标放置于红框框的地方，子菜单就不会显示。这里的处理方法是借用伪元素填充了这段距离。
.nav{
>li{
&:after{
position: absolute;
content: '';
height:20px;left:0;right:0;
}
}结束========================
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent