1. Installation of Script
2. Creating the Menu
3. Download Example Files

Yii makes it really easy for all to use their already made objects that automate everything we do. It provides also great power of flexibility and styling but hey, we programmers tend to complicate our lives and push a little more the power of our tools.

This tutorial makes use of the jqueryslidemenu plugin to give us a cool featured slidemenu with just a little bit of effort taking advantage of the way Yii's CMenu widget renders its items.

Installation of Script ¶

Once we download the plugin we are going to place its contents to their correspondent folders (i.e. styles on the css folder, js files on scripts folder, images -yes you guessed right, the images folder). Nevertheless is up to you how you order the files as long as the images and styles have their image paths correctly set.

Creating the Menu ¶

We are going to use it in our main.php layout file for the sake of the example -and because it is the place where we, most of us, will use it.

First we register the required css and js files for our menu.

Put this code inside < head > section < /head > of yii/your_app/protected/views/layout/main.php

// remember that you can actually point to the js files directly if
// your script file is outside of protected/subfolders
$jqueryslidemenupath = Yii::app()->assetManager->publish(Yii::app()->basePath.'/scripts/jqueryslidemenu/');
	
//Register jQuery, JS and CSS files
Yii::app()->clientScript->registerCssFile($jqueryslidemenupath.'/jqueryslidemenu.css');

Yii::app()->clientScript->registerCoreScript('jquery');

Yii::app()->clientScript->registerScriptFile($jqueryslidemenupath.'/jqueryslidemenu.js');

And finally we create our menu. Please note that our menu is wrapped with a layer 'div' and one its classes to jqueryslide menu.

<div id="myslidemenu" class="jqueryslidemenu">

<?php $this->widget('zii.widgets.CMenu',array(
   'items'=>array(
      array('label'=>'Home', 'url'=>array('/site/index')),
      array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
      array('label'=>'Contact', 'url'=>array('/site/contact')),
      array('label'=>'jqSlideMenuTest', 'url'=>array('#'), 
        'items'=>array(
           array('label'=>'Home', 'url'=>array('/site/index')),
           array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
           array('label'=>'Contact', 'url'=>array('/site/contact'), 
              'items'=>array(
                  array('label'=>'Home', 'url'=>array('/site/index')),
                  array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
                  array('label'=>'Contact', 'url'=>array('/site/contact'),
                      'items'=>array(
                          array('label'=>'Home', 'url'=>array('/site/index')),
                          array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
                          array('label'=>'Contact', 'url'=>array('/site/contact')),
                       )),
                  )),
              )),	
       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)),
     )); ?>
<br style="clear: left" />

</div><!-- myslidemenu-->

That's it... quite easy right? You can change its style to suit your 'design' needs.

Download Example Files ¶

Our colleague programmer Trejder has compiled an example for all of you to play with it. download files

Just make sure that you have the runtime and assets's folders permissions to be writable and correct the index.php file Yii path's to the correct one on your computer.

Also remember that if you use assets to publish your css and js, everytime you edit css or js you must delete subfolder in assets that contains published files, and refresh the page.