Difference between #3 and #4 of Using the jqueryslidemenu plugin with CMenu

unchanged
Title
Using the jqueryslidemenu plugin with CMenu
unchanged
Category
How-tos
unchanged
Tags
Interface, Menu, Widgets
changed
Content
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](http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
"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.

~~~
[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');Yii::app()->clientScript->registerCssFile($jqueryslidemenupath.'/jqueryslidemenu.css');	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.

~~~
[php]
<div id="myslidemenu" class="jqueryslidemenu">
<!-- <div id="mainmenu"> -->
<?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><!-- mainmenu -->
~~~

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

Download Example Files
----------------------
Our colleague programmer
[Trejder](http://www.yiiframework.com/forum/index.php?/user/7141-trejder/
"Trejder") has compiled an example for all of you to play with it. 
[download
files](http://www.yiiframework.com/forum/index.php?app=core&module=attach&section=attach&attach_id=897
"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.