Jul 18, 2013
Dropdown Menu di YiiFramework dengan CMenu
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.
Gan, bagaimana ya membuat sub dari sub menu?
Contohnya seperti ini gan.
sales
AR Adjusment
review
sales list
customer payments
Ane udah coba dan hasilnya, sub dari sub menu tersebut berada di bawah sub menu. contohnya:
sales
AR Adjusment
review
sales list
customer payments
mohon bantuan gan
Belum pernah coba kerena belum butuh. Nanti saya coba-coba.
mantab gan , berhasil 🙂
hatur nuhun hehehe…
Sama2. Senang bisa membantu.
Alhamdulillah apa yang saya cari ada disini, makasih banyak Gan, terus berkarya yah…:)
Senang bisa membantu.
saya sudah ikuti tutorialnya tp bol bisa ya knp ya??
saya mau tnya mas. kan di dalam menu contact saya mau menambahkan sub menu sperti menu tangal lahir,umur hoby dan lain2,, contoh codingannya gmna uya..??
mohon dibntu ya?
Terima Kasih
1. Seharusnya bisa, di sini lancar kog.
2. Coba pelajari model, controller, dan view terkait contact. Contoh kodingan saya tidak punya.
3. Ya..
4. Terima kasih kembali.
mas kok eror di
protected\views\layouts\main.php on line 61
kenapa ya ? padahal semua sudah tak samakan
Coba kirim berkasnya ke pastebin.com lalu kirim link via komentar untuk mempermudah.
saya ada kirim di pastebin.com mas tolong di bantu yah
mas
email saya hendrayodhi.190893@gmail.com
saya lebih suka bila permasalahan karena tutorial yg sudah saya tulis di blog ini dokumentasinya di sini juga.
ngirim apa ya?
ini link menu.css
http://pastebin.com/1Xat2Ytt
ini file main.php saya mas…
http://pastebin.com/mvNurtKg
saya tidak lihat ada masalah di baris 61.
tapi cek apakah baris 52 tepat?