Blog.YHT.Web.ID

Icon

Bosan adalah awal dari penciptaan perubahan.

Dropdown Menu di YiiFramework dengan CMenu

Karena butuh dalam implementasi yang menggunakan banyak 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.

Kategori: /tips-n-trick

Tag: , , , , ,

17 Responses

  1. FredTheRyick says:

    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

  2. miqdar says:

    mantab gan , berhasil 🙂
    hatur nuhun hehehe…

  3. indra says:

    Alhamdulillah apa yang saya cari ada disini, makasih banyak Gan, terus berkarya yah…:)

  4. yopi saputra says:

    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

    • yht says:

      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.

  5. arif says:

    mas kok eror di
    protected\views\layouts\main.php on line 61
    kenapa ya ? padahal semua sudah tak samakan

  6. yodhi says:

    saya ada kirim di pastebin.com mas tolong di bantu yah
    mas

  7. arif says:

    ini file main.php saya mas…

    http://pastebin.com/mvNurtKg

Leave a Reply