實現dcat-admin的雙選單風格( 頂部+左側)

YeRic發表於2023-12-17

實現dcat-admin的雙選單( 頂部+左側)風格

實現dcat-admin的雙選單( 頂部+左側)風格

網址:demo.saishiyun.net/admin
賬號:admin , 密碼:code123

我們在使用dcat-admin日常開發中,稍複雜一些專案,選單也會更多。全部展現在左側,會變的過長。給使用帶來了不便。如果使用頂部大選單,左側子選單的風格,就能解決這個問題。

選單的資料來源,還是來自admin_menu表。只不過要重新規則一下層次。頂層為後臺頂部大選單,第二層為左側子選單。
1.第一步,後臺頂部從admin_menu表 獲取。在 bootstrap.php 檔案中插入

Admin::navbar(function (Navbar $navbar) {
    $menuModel = config('admin.database.menu_model');
    $list = (new $menuModel())->where(['parent_id' => 0])->orderBy('id','DESC')->get();
    $menu_parent_id = !empty($_COOKIE['menu_parent_id'])? $_COOKIE['menu_parent_id']:'';
    $htmls = '';
    $is_active = false;
    foreach ($list as $key => $itemk) {
        $active  = '';
        if(!empty($menu_parent_id) && $menu_parent_id == $itemk['id'] && !$is_active){
            $active  = 'active';
            $is_active = true;
        }else{
            if($key == 0 && empty($menu_parent_id) && !$is_active){
                $active  = 'active';
                $is_active = true;
            }
        }

        $htmls .= '<a href="javascript:void(0);" class="nav-link nav-items '.$active.'" data-id="'.$itemk['id'].'">'.$itemk['title'].'</a>';
    }

    $navbar->left($htmls);
});

2.第二步,自我實現左側選單,同樣在 bootstrap.php 中插入以下程式碼。

admin_inject_section(Admin::SECTION['LEFT_SIDEBAR_MENU'], function () {
    $menuModel = config('admin.database.menu_model');
    $menulist = (new $menuModel())->allNodes()->toArray();
    $html = '';
    foreach (Helper::buildNestedArray($menulist) as $item) {
        $html .= view('admin.partials.left_sidebar_menu', ['item' => &$item, 'builder' => Admin::menu()])->render();
    }
    return $html;
});

3.第三步,左側選單模板檔案,可以用dcat-admin原來的模板,只需要在他原來的基礎上做一些調整,加入幾個class(hide_menu, show_menu), 為li新增一個id 屬性。

@php
    $depth = $item['depth'] ?? 0;

    $horizontal = config('admin.layout.horizontal_menu');

    $defaultIcon = config('admin.menu.default_icon', 'feather icon-circle');
    $topcheng = empty($item['parent_id']) ? true:false;
@endphp

@if($builder->visible($item))
        @if(empty($item['children']))
            <li class="nav-item">
                <a data-id="{{ $item['id'] ?? '' }}" @if(mb_strpos($item['uri'], '://') !== false) target="_blank" @endif
                href="{{ $builder->getUrl($item['uri']) }}"
                   class="nav-link {!! $builder->isActive($item) ? 'active' : '' !!}">
                    {!! str_repeat('&nbsp;', $depth) !!}<i class="fa fa-fw {{ $item['icon'] ?: $defaultIcon }}"></i>
                    <p>
                        {!! $builder->translate($item['title']) !!}
                    </p>
                </a>
            </li>
        @else

            <li class="{{ $horizontal ? 'dropdown' : 'has-treeview' }} {{ $depth > 0 ? 'dropdown-submenu' : '' }} nav-item {{ $builder->isActive($item) ? 'menu-open' : '' }} {{$topcheng ? 'hide-menu':''}}" id="parent_id_{{$item['id']}}">
                <a href="#"  data-id="{{ $item['id'] ?? '' }}"
                   class="nav-link {{ $builder->isActive($item) ? ($horizontal ? 'active' : '') : '' }}
                   {{ $horizontal ? 'dropdown-toggle' : '' }}">
                    {!! str_repeat('&nbsp;', $depth) !!}<i class="fa fa-fw {{ $item['icon'] ?: $defaultIcon }}"></i>
                    <p>
                        {!! $builder->translate($item['title']) !!}

                        @if(! $horizontal)
                            <i class="right fa fa-angle-left"></i>
                        @endif
                    </p>
                </a>
                <ul class="nav {{ $horizontal ? 'dropdown-menu' : 'nav-treeview' }}">
                    @foreach($item['children'] as $item_sub)
                        @php
                            $item_sub['depth'] = $depth + 1;
                        @endphp
                        @include('admin.partials.left_sidebar_menu', ['item' => $item_sub,'builder'=>$builder])
                    @endforeach
                </ul>
            </li>
        @endif
@endif

4.第四步,加入js, 實現切換動效。

function setCookiek(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookiek(name) {
    var nameEQ = name + "=";
    var cookies = document.cookie.split(';');
    for(var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        while (cookie.charAt(0) == ' ') {
            cookie = cookie.substring(1, cookie.length);
        }
        if (cookie.indexOf(nameEQ) == 0) {
            return cookie.substring(nameEQ.length, cookie.length);
        }
    }
    return null;
}
$(function() {
    $('.nav-items').on('click',function (d) {
        $(this).parent('.navbar-left').find('.nav-items').removeClass('active');
        $(this).addClass('active');
        var id = $(this).attr('data-id');
        var idss = 'parent_id_'+id;
        setCookiek('menu_parent_id',id,365);

        $('.nav-sidebar').children('li').removeClass('show-menu');
        $('.nav-sidebar').children('li').removeClass('menu-open');
        $('#'+idss).addClass('show-menu');
        $('#'+idss).addClass('menu-open');
    })
});
$(document).ready(function(){
    var menu_parent_id = getCookiek('menu_parent_id');
    $('.nav-sidebar').children('li').removeClass('show-menu');
    if(menu_parent_id != undefined){
        var idss = 'parent_id_'+menu_parent_id;
        $('#'+idss).addClass('show-menu');
        $('#'+idss).addClass('menu-open');
    }else{
        $('.nav-sidebar').children('li:first').addClass('show-menu')
    }
});

  1. 此選單的css, 如果不喜歡這個風格,自己可以重新定義
    .sidebar-light-primary .nav-item>.nav-link.active{
     background: linear-gradient(to right,var(--color) 0%,var(--color-sub) 100%);
     box-shadow: 0 13px 16px 0 hsl(var(--hsl-dark),.2);
     border-radius: 8px;
     color: var(--font-white, #fff)!important;
     z-index: 1;
     margin-right: 10px;
     margin-left: 10px;
    }
    [class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link.active, [class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link.active:hover{
     background: linear-gradient(to right,var(--color) 0%,var(--color-sub) 100%);
     box-shadow: 0 13px 16px 0 hsl(var(--hsl-dark),.2);
    }
    [class*=sidebar-light-] .nav-sidebar>.nav-item>.nav-treeview{
     padding-top: 5px;
     background: #d0e9c75c;
    }
    .hide-menu{display: none;}.show-menu{display: block;}
    .main-sidebar, .main-sidebar:before{
     width:220px;
    }
    body:not(.sidebar-mini-md) .content-wrapper, body:not(.sidebar-mini-md) .main-footer, body:not(.sidebar-mini-md) .main-header{
     margin-left:220px;
    }
    .header-navbar.fixed-top{
     left: 220px;
    }
    .navbar-left .active{
     color: var(--font-white, #fff)!important;
     border: 0;
     background:linear-gradient(to left,var(--color) 0%,var(--color-sub) 100%);
     box-shadow:0 13px 16px 0 hsl(var(--hsl-dark),.2);
    }
    .nav-items{
     height: 38px!important;
     line-height: 38px!important;
     color: var(--font-black);
     border-radius: 8px;
     font-weight: 700;
     margin: 0 4px!important;
     border: 0;
     padding: 0px min(1.1vw,20px);
     float: none;
     display: inline-block;
    }
    :root {
     --h: 149;
     --s: 93%;
     --l: 39%;
     --l-dark: calc(var(--l) - 5%);
     --hsl: var(--h), var(--s), var(--l);
     --hsl-dark: var(--h), var(--s), var(--l-dark);
     --color: hsl(var(--hsl));
     --color-dark: hsl(var(--hsl-dark));
     --color-sub: hsl(91, 70%, 57%);
     --color-success: #07c160;
     --color-warning: #faad14;
     --color-danger: #eb5e12;
     --border-radius: 8px;
     --border-radius-small: 4px;
     --border-radius-big: 16px;
     --card-margin: 16px;
     --top-nav-heght: 64px;
     --step: calc((100% - var(--l)) / 10);
     --color-light-1: hsl(var(--h), var(--s), calc(var(--step) * 1 + var(--l)));
     --color-light-2: hsl(var(--h), var(--s), calc(var(--step) * 2 + var(--l)));
     --color-light-3: hsl(var(--h), var(--s), calc(var(--step) * 3 + var(--l)));
     --color-light-4: hsl(var(--h), var(--s), calc(var(--step) * 4 + var(--l)));
     --color-light-5: hsl(var(--h), var(--s), calc(var(--step) * 5 + var(--l)));
     --color-light-6: hsl(var(--h), var(--s), calc(var(--step) * 6 + var(--l)));
     --color-light-7: hsl(var(--h), var(--s), calc(var(--step) * 7 + var(--l)));
     --color-light-8: hsl(var(--h), var(--s), calc(var(--step) * 8 + var(--l)));
     --color-light-9: hsl(var(--h), var(--s), calc(var(--step) * 9 + var(--l)));
     --color-light-10: hsl(var(--h), var(--s), calc(var(--step) * 9.5 + var(--l)));
     --font-white: #fff;
     --font-black: #1d2129;
     --font-black-2: hsl(0, 0%, 20%);
     --font-black-3: hsl(0, 0%, 30%);
     --font-black-4: hsl(0, 0%, 40%);
     --font-black-5: hsl(0, 0%, 50%);
     --font-black-6: hsl(0, 0%, 60%);
     --font-black-7: hsl(0, 0%, 70%);
     --font-black-8: hsl(0, 0%, 80%);
     --font-black-9: hsl(0, 0%, 90%);
     --border-white: #fff;
     --border-black: #1d2129;
     --border-black-2: hsl(0, 0%, 20%);
     --border-black-3: hsl(0, 0%, 30%);
     --border-black-4: hsl(0, 0%, 40%);
     --border-black-5: hsl(0, 0%, 50%);
     --border-black-6: hsl(0, 0%, 60%);
     --border-black-7: hsl(0, 0%, 70%);
     --border-black-8: hsl(0, 0%, 80%);
     --border-black-9: hsl(0, 0%, 90%);
     --border-black-10: hsl(0, 0%, 95%);
     --border-black-11: hsl(0, 0%, 97%);
     --bg-white: #fff;
     --bg-black: #000;
     --bg-black-1-2: hsl(0, 0%, 3%);
     --bg-black-1-1: hsl(0, 0%, 5%);
     --bg-black-1: hsl(0, 0%, 10%);
     --bg-black-2: hsl(0, 0%, 20%);
     --bg-black-3: hsl(0, 0%, 30%);
     --bg-black-4: hsl(0, 0%, 40%);
     --bg-black-5: hsl(0, 0%, 50%);
     --bg-black-6: hsl(0, 0%, 60%);
     --bg-black-7: hsl(0, 0%, 70%);
     --bg-black-8: hsl(0, 0%, 80%);
     --bg-black-9: hsl(0, 0%, 90%);
     --bg-black-10: hsl(0, 0%, 95%);
     --bg-black-11: hsl(0, 0%, 97%);
    }
本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章