css-Ant-Menu 导航菜单更改为左侧列表行选中

1.Ant-Menu导航菜单

导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提供多级结构来收纳和排列网站架构。

2.具体代码

html

html 复制代码
 <!-- 左侧切换 -->
                <div class="fileLeft">
                    <div class="content_left_name">类型</div>
                    <a-menu style="width: 100%" mode="vertical">
                        <a-menu-item v-for="(item, index) in componentList" :key="index">
                            <div class="content_left_select"  @click="handleClick(item.id)">
                                <IconComponent :statues="item.statues" style="width:35px"></IconComponent>
                                <div class="content_left_title">{{item.name}}</div>
                            </div>
                        </a-menu-item>
                    </a-menu>
                </div>

css

css 复制代码
// 左侧结构
.fileLeft {
    width: 20%;
    height: 100%;
    float: left;
    background-color: #ffffff;
    border-radius: 8px;
}
// 左侧name
.content_left_name{
	height:40px;
	width: 100%;
	padding-left: 2%;
	line-height:40px;
	text-align:left;
	background-color: #fafafa;
	font-weight: 600;
	font-size: 15px;
	border-bottom: 1px solid #e8e8e8;
}
// icon与文本
.content_left_select{
	display:flex;
	flex-direction:row;
}
//文本
.content_left_title{
	height:40px;
	width:60px
}
相关推荐
Myli_ing33 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风36 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7012 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm2 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript