【项目整理】一个好看的导航栏

需求：（思路梳理）
1.初始默认选中主页图标。
2.导航栏鼠标经过图标时，图标为蓝色，且下方显示图标名称。
3.选中子菜单名称时，其所在父级导航改为选中状态，图标为白色。
4.子菜单选中为单选。
6.点击主页图标，恢复到首页。

整个骨架

-for循环提前配好的配置项，方便后期增删改
-图标框需要和下方提示文字分开，因为交互效果不同

知识点1：v-for="(ele,index) in baseMenuCof"

把导航栏分成多个部分，子导航做成一个整体。遍历导航数组，得到并列的三个div。具体样式在这个div内部 子dom层设计，在这一层设置鼠标浮动和鼠标点击事件。

<div v-for="(ele,index) in baseMenuCof"
		:key="ele.id"
		:data-key="ele.id"
		@mouseover="changeMenu(ele.name,index,ele.top)"
		@click="backToHome()">
</div>

baseMenuCof:[
            {
                id:'shouye',
                active:'menuActive',  //定义点击之后的样式
                name:'首页',
                top:0  //样式设置
            },
            {
                id:'xxxx',
                active:'',
                name:'xxxx',
                top:258-80
            },
        ],

知识点2：border: transparent 4px solid

div内的第一个子元素，图标

 <div :class="['menu', ele.active]"><a :class="ele.id+' icon'"></a></div>

.menu设置固定样式 margin和padding，重点是border: transparent 4px solid; 为了鼠标浮动左侧有蓝色提示的时候，图标不会右移。ele.active 用来控制鼠标浮动后的样式，鼠标浮动事件中会给这个ele.active赋值。

知识点3： :class=“ele.id+’ icon’”

图标的颜色替换，用background+class来控制。
用.icon 设置一个整体图片的样式，通过.menu的状态改变来控制更换图片

 .menu a.icon{
    width: 40px;
    height: 40px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 50%;
    background-color: transparent;
    background-position:center;
}

知识点4： “css”： .menu:hover a.icon

可以通过父级的hover、active等交互事件，控制子级的样式。

 .menu a.icon.shouye{
      background-image:  url('../assets/icon/home.png');
 }
 .menu:hover a.icon.shouye{
     background-image:  url('../assets/icon/home-hover.png')
 }
 .menu.menuActive a.icon.shouye{
     background-image:  url('../assets/icon/home-active.png')
 }

知识点5：.menu + span

"+"号是控制.menu标签后的第一个span元素样式，.menu:hover + span{ visibility: visible; } 来通过.menu的鼠标浮动控制span显隐。

完整代码

整体结构代码：

<template>
 <div id="leftMenu">
        <img alt="logo" src="../assets/logo.png" id="logo">
        <!-- 一级菜单 -->
        <div v-for="(ele,index) in baseMenuCof"
            :key="ele.id"
            :data-key="ele.id"
            @mouseover="changeMenu(ele.name,index,ele.top)"
            @click="backToHome()">
            <div :class="['menu', ele.active]"><a :class="ele.id+' icon'"></a></div>
            <span>{{ele.name}}</span> 
        </div>
 </div>
</template>

完整代码：一个好看的导航栏（Vue）

任何问题可以在评论区讨论交流