Using the jqueryslidemenu plugin with CMenu

You are viewing revision #5 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#4)next (#6) »

  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

section 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.

18 1
8 followers
Viewed: 41 819 times
Version: Unknown (update)
Category: How-tos
Written by: Antonio Ramirez
Last updated by: pc131
Created on: Oct 28, 2010
Last updated: 13 years ago
Update Article

Revisions

View all history

Related Articles