Blog.YHT.Web.ID

Karena butuh dalam implementasi yang menggunakan banyak menu dengan Dropdown menu maka lahirlah ide ini.

Saya tidak berniat untuk mengoprek terlalu banyak mengingat batas waktu yang dibutuhkan dalam implementasi tidak terlalu lama.

Hanya ada 2 langkah yang perlu dilakukan untuk implementasi ini yaitu menempatkan berkas `menu.css` di folder `css/` dan melakukan perubahan pada berkas `protected/views/layouts/main.php`.

Berikut isi dari `menu.css` :

/* ———————————————————————–
Dropdown Menu Implementation on Yii FrameWork Using CMenu
Yudha H Tejaningrat (yht@kalamangga.web.id)
2013-07-18 12:30
———————————————————————– */
#mainmenu ul { list-style: none; margin: 0; padding: 0; position: relative; height: 30px; }
#mainmenu ul li { display: inline-block; height: 28px; float: left; overflow: visible; }
#mainmenu ul li:hover > ul { display: block; }
#mainmenu ul li a { float: none; display: inline-block; white-space: nowrap; }
#mainmenu ul li ul { display: none; position: absolute; top: 100%; background:white url(bg.gif) repeat-x left top; color: #ffffff; height: auto;}
#mainmenu ul li ul li {clear: left; background:white url(bg.gif) repeat-x left top; color: #ffffff; height: auto; width: 320px;}
#mainmenu ul li ul li a { color: #ffffff; padding: 4px 14px; display: block; background-color:transparent; }
#mainmenu ul li ul li.active a,
#mainmenu ul li ul li a:hover { color: #6399cd; background-color:#EFF4FA; text-decoration:none; }

Lalu perubahan yang dilakukan pada `protected/views/layouts/main.php` ada 2, yaitu memuat `menu.css` dan merubah susunan menu. Berikut kode sumber yang dirubah :

…
<link href=”<?php echo Yii::app()-/>request->baseUrl; ?>/css/main.css” rel=”stylesheet” type=”text/css” />
<link href=”<?php echo Yii::app()-/>request->baseUrl; ?>/css/form.css” rel=”stylesheet” type=”text/css” />
<link href=”<?php echo Yii::app()-/>request->baseUrl; ?>/css/menu.css” rel=”stylesheet” type=”text/css” />

<title><?php echo CHtml::encode($this->pageTitle); ?></title>
…

…
<div id=”mainmenu”><?php $this->widget(‘zii.widgets.CMenu’,array(
‘items’=>array(
array(‘label’=>’Home’, ‘url’=>array(‘/site/index’)),
array(
‘label’=>’About’,
‘url’=>array(‘#’),
‘items’=>array(
array(‘label’=>’Me’, ‘url’=>array(‘/site/page’, ‘view’=>’about’),
array(‘label’=>’This’, ‘url’=>array(‘#’)),
array(‘label’=>’You’, ‘url’=>array(‘#’)),
),
),
array(
‘label’=>’How You Can’,
‘url’=>array(‘#’),
‘items’=>array(
array(‘label’=>’Contact Me’, ‘url’=>array(‘/site/contact’)),
array(‘label’=>’Download This’, ‘url’=>array(‘#’)),
array(‘label’=>’Say “Wow!”‘, ‘url’=>array(‘#’)),
),
),
array(‘label’=>’Login’, ‘url’=>array(‘/site/login’), ‘visible’=>Yii::app()->user->isGuest),
array(‘label’=>’Logout (‘.Yii::app()->user->name.’)’, ‘url’=>array(‘/site/logout’), ‘visible’=>!Yii::app()->user->isGuest)
),
)); ?></div><!– mainmenu –>
…

Semoga membantu. Happy coding! 🙂

Update 21 Agustus 2013 : contoh bisa dilihat di sini.