Yii Framework 教程 (29)：Zii CMenu 元件實戰 - 多級導航選單與麵包屑

CMenu 核心功能

• 以 HTML 無序清單 (<ul><li>) 渲染多級選單。
• 支援 visible (顯示條件)、active (當前項目高亮)、items (子選單遞迴)。
• 豐富屬性：label、url、template、linkOptions、itemOptions、submenuOptions。
• 通常放置於版型 protected/views/layouts/main.php。

基本用法範例

// protected/views/layouts/main.php
widget('zii.widgets.CMenu', [
    'items' => [
        ['label' => 'Home', 'url' => ['/site/index']],
        ['label' => 'About', 'url' => ['/site/page', 'view' => 'about']],
        ['label' => 'Contact', 'url' => ['/site/page', 'view' => 'contact']],
        ['label' => 'Login', 'url' => ['/site/login'], 'visible' => Yii::app()->user->isGuest],
        ['label' => 'Logout (' . Yii::app()->user->name . ')', 'url' => ['/site/logout'], 'visible' => !Yii::app()->user->isGuest],
        ['label' => 'Admin', 'url' => ['/admin/index'], 'visible' => Yii::app()->user->checkAccess('admin'), 'items' => [
            ['label' => 'User Management', 'url' => ['/admin/user']],
            ['label' => 'Role Management', 'url' => ['/admin/role']],
        ]],
    ],
    'htmlOptions' => ['class' => 'nav navbar-nav'], // Bootstrap 整合
    'submenuHtmlOptions' => ['class' => 'dropdown-menu'],
    'activeCssClass' => 'active',
    'encodeLabel' => false, // 允許 HTML 標籤
]); ?>

靜態頁面支援 (CViewAction)

// SiteController.php
public function actions() {
    return [
        'page' => [
            'class' => 'CViewAction',
            // 'viewParam' => 'view', // 預設參數名
            // 'basePath' => 'pages', // 預設視圖子目錄
        ],
    ];
}

// 視圖檔案：protected/views/site/pages/about.php, contact.php

麵包屑導航 (CBreadcrumbs)

搭配 CMenu 使用，Controller 設定 $this->breadcrumbs 陣列：

// Controller
public function actionView($id) {
    $post = Post::model()->findByPk($id);
    $this->breadcrumbs = [
        'Posts' => ['index'],
        $post->title => [],
    ];
    $this->render('view', ['model' => $post]);
}

// Layout (main.php)
breadcrumbs)): ?>
    widget('zii.widgets.CBreadcrumbs', [
        'links' => $this->breadcrumbs,
        'homeLink' => '
Home
',
        'tagName' => 'ul',
        'separator' => '
/
',
        'htmlOptions' => ['class' => 'breadcrumb'],
    ]); ?>

CSS 樣式關鍵 (Bootstrap 3 整合範例)

/* main.css */
.navbar-nav > li > a { padding: 15px; }
.dropdown-menu > li > a { padding: 10px 20px; }
.breadcrumb { background: #f5f5f5; padding: 8px 15px; margin-bottom: 20px; }
.breadcrumb > li + li:before { content: "/ "; color: #ccc; }
.active > a { font-weight: bold; }

渲染結果對比

套用 CSS (Bootstrap)：

無 CSS (原始 HTML)：

進階技巧

1. 動態選單從資料庫載入：

   
   $items = Menu::model()->findAll(['order'=>'sort_order']);
   $menuItems = [];
   foreach ($items as $item) {
       $menuItems[] = [
           'label' => $item->name,
           'url' => $item->url,
           'visible' => $item->is_visible,
           'items' => $item->children ? $this->buildMenuItems($item->children) : [],
       ];
   }
   

2. RBAC 權限控制顯示：'visible' => Yii::app()->user->checkAccess('permissionName')。
3. 當前項目自動高亮：CMenu 自動比對 url 與當前請求路由，匹配則加 activeCssClass。可覆寫 isItemActive() 自訂邏輯。
4. 自定義模板：'template' => '
5. {menu}
' 控制單項輸出結構。

常見問題

完整範例下載

MenuDemo.zip - 含 Controller、Layout、CSS、靜態頁面完整代碼。

1. 上一篇文章： Yii Framework 教程 (28)：Data Provider 詳解 - CActiveDataProvider、CArrayDataProvider、CSqlDataProvider
2. 下一篇文章： Yii Framework 教程 (30)：Zii CListView 元件實戰 - 列表視圖、分頁、排序與自定義模板

PHP 綜合知識

PHP GD 庫繪製柱狀圖完整代碼：自適應寬高、刻度標註、數值顯示

功能特色 數值） 自動計算畫布寬度、柱寬、間距 繪製 X

PHP 讀寫 XML 完整指南：DOM、SAX、Regex 與最佳實踐

什麼是 XML？ XML (eXtensible Marku

Yii2 整合 Pjax 導致內聯腳本載入失敗的原因與解決

問題現象 使用 defunkt/jquery-pjax 載入

PHP 模擬 POST 上傳圖片完整實現 (客戶端 CLI + 伺服器端)

架構說明 客戶端 (CLI)：定時任務/腳本，從伺服器拉取