ナビゲーション バーのメニュー スタイルのデザインに関する最近の経験
メニューの種類
まずはメニューの種類を分けてみましょう
ここで2つのタイプに分けてみます
図 1 は通常のメニュー、図 2 はサブメニューのあるサブメニューです。2サブメニュー内のサブメニューは通常のメニューに相当します。
クラス名は以下の通りです
/* 菜單1 */
.el-menu .el-menu-item{
border-radius: 4px 2px 2px 4px;
}
/* 子母菜單2 */
.el-submenu__title{
border-radius: 4px 2px 2px 4px;
}1. 角を丸くする
1 つ目は、メニューとその内部のサブメニューの角が丸いことです。私のプロジェクトはこのファイルにあります
このスタイルを使用する
.el-menu .el-menu-item{
border-radius: 4px 2px 2px 4px;
}
サブメニューとサブメニュー
.el-submenu__title{
border-radius: 4px 2px 2px 4px;
}
2. マウスホバースタイル
/* 普通菜单1 */
.el-menu-item:hover {
background-color: #ffffff !important;
color: #0E0F0F !important;
}
/* 子母菜单2 */
.el-submenu__title:hover {
background-color: #ffffff !important;
color: #0E0F0F !important;
}
3. スタイルを選択します
サブメニュー 2 は選択できないため、ここでは通常のメニュー 1 のスタイルを設定するだけで済みます。
/* 菜單被選中的背景色 */
.el-menu .el-menu-item.is-active {
background-color: #FFEFD7 !important;
color: #0E0F0F !important;
border-right: 3px solid var(--primary-dark, #FBA429);
}
最小幅などの関係で右端が隠れる場合がありますのでご注意ください。
幅を自分で設定する必要があります
/* 取消最小邊距造成的顯示不全,跟css裏的.el-submenu .el-menu-item有關 */
.el-submenu .el-menu-item{
min-width: 190px !important;
}また、.el-menu-item.is-activeのみを使用した場合は上書きされます。
/*如果使用这个*/
.el-menu-item.is-active {
background-color: #FFEFD7 !important;
color: #0E0F0F !important;
border-right: 3px solid var(--primary-dark, #FBA429);
}
/*会被下面这个覆盖*/
.el-menu-item:hover {
background-color: #ffffff !important;
color: #0E0F0F !important;
}また、要素を放す前にマウスが要素をクリックしたときの状態であるアクティブ化スタイルを追加することもできます。
.el-menu-item:active {
background-color: #FFEFD7 !important;
color: #0E0F0F !important;
}効果
4. マージン
まず上部に余白を追加します
カスタム クラスまたはインライン スタイルを el-menu 要素に追加します。
class="el-menu-vertical-demo"
.el-menu-vertical-demo{
margin-top: 16px;
}
或者直接使用
style="margin-top: 16px;"
次に、メニューのサイドバー項目に左と下のマージンを追加します。
同様に、左マージンはインラインクラスとカスタムクラスの両方で機能します。
<sidebar-item
v-for="route in routes"
:key="route.path"
:item="route"
class="sidebar-item"
style="margin-left: 16px;"
/>
.sidebar-item{
margin-left: 16px;
}または、メニュー 1 とメニュー 2 に追加することもでき、上下どちらかを選択するだけで、効果はほぼ同じです。
/* 菜單1*/
.el-menu .el-menu-item{
border-radius: 4px 2px 2px 4px;
margin-left: 16px;
}
/* 子母菜單2 */
.el-submenu__title{
border-radius: 4px 2px 2px 4px;
margin-left: 16px;
}メニューに下マージンを追加します
/* 菜單1 */
.el-menu .el-menu-item{
margin-bottom: 8px;
}
/* 子母菜單2 */
.el-submenu__title{
margin-bottom: 8px;
}効果はこんな感じ
5. デフォルトの背景とフォント
メニュー 1 とメニュー 2 に追加できます
/* 菜單,部分樣式在sidebar.scss中 */
.el-menu .el-menu-item{
background-color: #FBA429 !important;
color: #000 !important;
}
/* 子母菜單 */
.el-submenu__title{
background-color: #FBA429 !important;
color: #000 !important;
}効果は図の通りです
6.SVGアイコン
現在のブロックで設定されている色に応じて、svgの色を自動で切り替えることができます。
svg ファイルのパスの色の値を currentColor に変更するだけです。
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11243_26828)">
<path d="M19 5V7H15V5H19ZM9 5V11H5V5H9ZM19 13V19H15V13H19ZM9 17V19H5V17H9ZM21 3H13V9H21V3ZM11 3H3V13H11V3ZM21 11H13V21H21V11ZM11 15H3V21H11V15Z"
fill="currentColor"/>修改这个fill或者path里的其他颜色
</g>
<defs>
<clipPath id="clip0_11243_26828">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
色を変えて見てみましょう
/* 菜單1*/
.el-menu .el-menu-item{
background-color: #FBA429 !important;
color: #fc0303 !important;改成红色
}効果は図の通りです
完全なコード
ビュー
メニューのイメージはこちら
完全なコード
<template>
<div :class="{'has-logo':showLogo}">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
mode="vertical"
class="el-menu-vertical-demo"
><!--頂部菜單邊距 -->
<sidebar-item
v-for="route in routes"
:key="route.path"
:item="route"
:base-path="route.path"
class="sidebar-item"
/><!--菜單邊距 -->
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
export default {
components: { SidebarItem, Logo },
computed: {
...mapGetters([
'sidebar',
'rules'
]),
routes() {
// return this.$router.options.routes
//console.log(this.rules);
return this.rules
},
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
showLogo() {
return this.$store.state.settings.sidebarLogo
},
variables() {
return variables
},
isCollapse() {
return !this.sidebar.opened
}
}
}
</script>
<style>
/* 整体顶边距 */
.el-menu-vertical-demo{
margin-top: 16px;
}
/* 整体左边距 */
.sidebar-item{
margin-left: 16px;
}
/* 菜單,部分樣式在sidebar.scss中 */
.el-menu .el-menu-item{
border-radius: 4px 2px 2px 4px;
margin-bottom: 8px;
}
/* 子母菜單 */
.el-submenu__title{
border-radius: 4px 2px 2px 4px;
margin-bottom: 8px;
}
/* 取消最小邊距造成的顯示不全,跟css裏的.el-submenu .el-menu-item有關 */
.el-submenu .el-menu-item{
min-width: 190px !important;
}
/* 菜單被選中的背景色 */
.el-menu .el-menu-item.is-active {
background-color: #FFEFD7 !important;
color: #0E0F0F !important;
border-right: 3px solid var(--primary-dark, #FBA429);
}
/* 菜單鼠標懸浮的背景色,會被選中樣式覆蓋.如果需要懸浮樣式覆蓋選擇樣式,在css文件裏找到el-submenu__title啟用&:hover，並註釋掉此樣式,並啟用選中樣式. */
.el-menu-item:hover {
background-color: #ffffff !important;
color: #0E0F0F !important;
}
/* 子母菜單*/
.el-submenu__title:hover {
background-color: #ffffff !important;
color: #0E0F0F !important;
}
.el-menu-item:active {
background-color: #FFEFD7 !important;
color: #0E0F0F !important;
}
</style>CSSスタイル
#app {
.main-container {
min-height: 100%;
transition: margin-left .28s;
margin-left: $sideBarWidth;
position: relative;
}
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
background-color: $menuBg;
height: 100%;
position: fixed;
font-size: 0px;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
// reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.el-scrollbar {
height: 100%;
}
&.has-logo {
.el-scrollbar {
height: calc(100% - 50px);
}
}
.is-horizontal {
display: none;
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.svg-icon {
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
// 菜單的鼠標懸浮字體顏色和背景色,這裏可以覆蓋菜單被選中時的顏色。
// &:hover {
// background-color: #ffffff !important;
// color: #0E0F0F !important;
// }
// &:focus {
// background-color: #FFEFD7 !important; /* 下拉子菜单选中时背景色，會和點擊衝突 */
// color: #0E0F0F !important;
// }
}
.is-active>.el-submenu__title {
//background: #0E0F0F ;//下拉母菜單背景色
//color: #F7F9FA ;//下拉母菜單字體
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
min-width: $sideBarWidth;
//background-color: #0E0F0F !important;//下拉子菜單背景色
//margin-top: 8px;//下拉子菜單上間距
// &:hover {
// background-color: #ffffff !important;//下拉子菜單鼠標懸浮背景色
// color: #0E0F0F !important;
// }
// &:active {
// background-color: #FFEFD7 !important;//下拉子菜單鼠標點擊時背景色
// color: #0E0F0F !important;
// }
// &:focus {
// background-color: #FFEFD7 !important; /* 下拉子菜单选中时背景色 */
// color: #0E0F0F !important;
// }
}
}
.hideSidebar {
.sidebar-container {
width: 54px !important;
}
.main-container {
margin-left: 54px;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
.svg-icon {
margin-left: 13px;
}
.sub-el-icon {
margin-left: 19px;
}
}
}
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 13px;
}
.sub-el-icon {
margin-left: 19px;
}
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
&>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important;
}
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform .28s;
width: $sideBarWidth !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
}
}
}
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
.svg-icon {
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
}
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
margin: 8px;//右拉子菜單邊距
&:hover {
// you can use $subMenuHover
// background-color: $menuHover !important;
background-color: #ffffff !important;//右拉子菜單鼠標懸浮背景色
color: #0E0F0F !important;
}
}
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}
SVG
このプロジェクトの svg ファイルはここにあります
使用したsvgを最後に載せておきます
ルーティング
完全なルーティングは示しませんが、例を示します。
{
path: '/Productmanagement',
component: Layout,
redirect: '/Productmanagement/coupon',
name: 'Productmanagement',
meta: {
title: '產品管理', icon: 'productManagement',roles:['Authenticated','merchant','ManagementAdmin'] // 角色信息
},
children: [
{
path: 'coupon',// /Productmanagement/coupon等同於coupon
name: 'Coupon',
component: () => import('@/views/coupon/Coupon_classification'),
meta: {
title: '優惠券', icon: 'DMIconMaster', roles: ['Authenticated','ManagementAdmin']
}
},
{
path: 'coupon',
name: 'Coupon',
component: () => import('@/views/coupon/merchant/index'),
meta: {
title: '優惠券', icon: 'DMIconMaster', roles: ['merchant']
}
},
{
path: '/Productmanagement/WorkFormEdit/:couponid/:memberid',// /Productmanagement/coupon等同於coupon,可以不用加上父路徑
component: () => import('@/views/coupon/edit/index.vue'),
name: '優惠券詳情',
hidden: true,
meta: {
title: '優惠券詳情',
activeMenu: '/Productmanagement/coupon'// 指定完全匹配的路径，要加上兩級父路徑/Productmanagement和coupon
}
},
{
path: 'Coupon_classification',
name: 'Coupon_classification',
component: () => import('@/views/coupon/couponlist'),
meta: {
title: '優惠券分類', icon: 'package', roles: ['Authenticated','ManagementAdmin','merchant']
}
},
]
},SVGリソース
最上位のリソースをダウンロードして使用できます。また、その他の一般的に使用される SVG も付属しています。
ダッシュボード
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11243_26828)">
<path d="M19 5V7H15V5H19ZM9 5V11H5V5H9ZM19 13V19H15V13H19ZM9 17V19H5V17H9ZM21 3H13V9H21V3ZM11 3H3V13H11V3ZM21 11H13V21H21V11ZM11 15H3V21H11V15Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_11243_26828">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>加盟店管理
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_17_4493)">
<path d="M18.36 9L18.96 12H5.04L5.64 9H18.36ZM20 4H4V6H20V4ZM20 7H4L3 12V14H4V20H14V14H18V20H20V14H21V12L20 7ZM6 18V14H12V18H6Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_17_4493">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>製品管理
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_6_9136)">
<path d="M2 20H22V16H2V20ZM4 17H6V19H4V17ZM2 4V8H22V4H2ZM6 7H4V5H6V7ZM2 14H22V10H2V14ZM4 11H6V13H4V11Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_6_9136">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>クーポン
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11243_97850)">
<path d="M22 10V6C22 4.9 21.1 4 20 4H4C2.9 4 2.01 4.9 2.01 6V10C3.11 10 4 10.9 4 12C4 13.1 3.11 14 2 14V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V14C20.9 14 20 13.1 20 12C20 10.9 20.9 10 22 10ZM20 8.54C18.81 9.23 18 10.53 18 12C18 13.47 18.81 14.77 20 15.46V18H4V15.46C5.19 14.77 6 13.47 6 12C6 10.52 5.2 9.23 4.01 8.54L4 6H20V8.54ZM9.07 16L12 14.12L14.93 16L14.04 12.64L16.73 10.44L13.26 10.23L12 7L10.73 10.22L7.26 10.43L9.95 12.63L9.07 16Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_11243_97850">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
クーポンカテゴリー
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_6_16165)">
<path d="M22 9.00002H17.21L12.83 2.44002C12.64 2.16002 12.32 2.02002 12 2.02002C11.68 2.02002 11.36 2.16002 11.17 2.45002L6.79 9.00002H2C1.45 9.00002 1 9.45002 1 10C1 10.09 1.01 10.18 1.04 10.27L3.58 19.54C3.81 20.38 4.58 21 5.5 21H18.5C19.42 21 20.19 20.38 20.43 19.54L22.97 10.27L23 10C23 9.45002 22.55 9.00002 22 9.00002ZM12 4.80002L14.8 9.00002H9.2L12 4.80002ZM18.5 19L5.51 19.01L3.31 11H20.7L18.5 19ZM12 13C10.9 13 10 13.9 10 15C10 16.1 10.9 17 12 17C13.1 17 14 16.1 14 15C14 13.9 13.1 13 12 13Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_6_16165">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>メンバー管理
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_6_15991)">
<path d="M9 12C10.93 12 12.5 10.43 12.5 8.5C12.5 6.57 10.93 5 9 5C7.07 5 5.5 6.57 5.5 8.5C5.5 10.43 7.07 12 9 12ZM9 7C9.83 7 10.5 7.67 10.5 8.5C10.5 9.33 9.83 10 9 10C8.17 10 7.5 9.33 7.5 8.5C7.5 7.67 8.17 7 9 7ZM9.05 17H4.77C5.76 16.5 7.47 16 9 16C9.11 16 9.23 16.01 9.34 16.01C9.68 15.28 10.27 14.68 10.98 14.2C10.25 14.07 9.56 14 9 14C6.66 14 2 15.17 2 17.5V19H9V17.5C9 17.33 9.02 17.16 9.05 17ZM16.5 14.5C14.66 14.5 11 15.51 11 17.5V19H22V17.5C22 15.51 18.34 14.5 16.5 14.5ZM17.71 12.68C18.47 12.25 19 11.44 19 10.5C19 9.12 17.88 8 16.5 8C15.12 8 14 9.12 14 10.5C14 11.44 14.53 12.25 15.29 12.68C15.65 12.88 16.06 13 16.5 13C16.94 13 17.35 12.88 17.71 12.68Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_6_15991">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>ポイント管理
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_17_1710)">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.31 11.14C10.54 10.69 9.97 10.2 9.97 9.47C9.97 8.63 10.76 8.04 12.07 8.04C13.45 8.04 13.97 8.7 14.01 9.68H15.72C15.67 8.34 14.85 7.11 13.23 6.71V5H10.9V6.69C9.39 7.01 8.18 7.99 8.18 9.5C8.18 11.29 9.67 12.19 11.84 12.71C13.79 13.17 14.18 13.86 14.18 14.58C14.18 15.11 13.79 15.97 12.08 15.97C10.48 15.97 9.85 15.25 9.76 14.33H8.04C8.14 16.03 9.4 16.99 10.9 17.3V19H13.24V17.33C14.76 17.04 15.96 16.17 15.97 14.56C15.96 12.36 14.07 11.6 12.31 11.14Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_17_1710">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>全体設定
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11243_27121)">
<path d="M7 17H21V19H7V17ZM7 5H21V7H7V5ZM7 11H21V13H7V11Z" fill="currentColor" stroke="currentColor" stroke-width="2"/>
</g>
<defs>
<clipPath id="clip0_11243_27121">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
エリア
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_17_4548)">
<path d="M20.5 3L20.34 3.03L15 5.1L9 3L3.36 4.9C3.15 4.97 3 5.15 3 5.38V20.5C3 20.78 3.22 21 3.5 21L3.66 20.97L9 18.9L15 21L20.64 19.1C20.85 19.03 21 18.85 21 18.62V3.5C21 3.22 20.78 3 20.5 3ZM10 5.47L14 6.87V18.53L10 17.13V5.47ZM5 6.46L8 5.45V17.15L5 18.31V6.46ZM19 17.54L16 18.55V6.86L19 5.7V17.54Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_17_4548">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>業種
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<g clip-path="url(#clip0_17_4557)">
<path d="M14 5V19H10V5H14ZM20 3H18V5H16V3H8V5H6V3H4V21H6V19H8V21H16V19H18V21H20V3ZM16 9V7H18V9H16ZM6 9V7H8V9H6ZM16 13V11H18V13H16ZM6 13V11H8V13H6ZM16 17V15H18V17H16ZM6 17V15H8V17H6Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0_17_4557">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>