Difference between #4 and #6 of
Creating a database-driven hierarchical Structure combined with CMenu and superfish

Revision #6 has been created by thyseus on Jan 20, 2010, 1:02:04 PM with the memo:

added hint to css inconsistency
« previous (#4) next (#7) »

Changes

Title unchanged

Creating a database-driven hierarchical Structure combined with CMenu and superfish

Category unchanged

Tutorials

Yii version unchanged

Tags unchanged

Content changed

In this tutorial we will create a hierarchical Structure using the traditional adjacency list model. Yii's ActiveRecord paradigm makes it very easy to implement this structure via a join on itself. After this, we will use the new CMenu from yii 1.1 and implement it in conjunction with [superfish](http://users.tpg.com.au/j_birch/plugins/superfish/ "Title"), a jQuery plugin for creating menus. The [CDropDownMenu extension](http://www.yiiframework.com/extension/cdropdownmenu "Title") will help us to accomplish this task.
 
 
I will also add a tutorial using a [Nested Set](http://dev.mysql.com/tech-resources/articles/hierarchical-data.html "Title") (using the wonderful [nested set extension](http://www.yiiframework.com/extension/nestedset/ "Title")) soon.

At first, we create our SQL-Table containing our hierarchical data like this:
[...]
in the Database. Of course, when we run this function on our root node, we get all non-orphan childs.

After that, we can use the CDropDownMenu-Widget to generate our Menu:
[...]
$items[] = $model->getListed(); // note that the [] is important, otherwise CMenu will crash.

$this->widget('zii.widgets.CDropDownMenu',array( 'items'=>$items, 'htmlOptions' => array('class' => 'sf-menu') // needed for superfish integration, see below...
 
));
 
 
```
 
 
to render the menu with the content of our database. This already looks nice, but we want to have a real drop-drown menu.
 
The CHtml-Menu does not contain this feature at this moment, so we use a nice jquery plugin called superfish. Thanks to jquery, this fit's really easy into our Application. After downloading and extracting superfish, just put this line in your layout file views/layouts/main.php :
 
 
~~~
 
[html]
 
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
 
<script type="text/javascript" src="hoverIntent.js"></script>  // <-- optional
 
<script type="text/javascript" src="superfish.js">
 
~~~
 
 
Then, we need our Script to replace the existing ul-structure with the superfish-plugin:
 
~~~
 
[html]
 
<script type="text/javascript">
 
    $(document).ready(function(){
 
        $("ul.sf-menu").superfish();
 
    });
 
</script>
 
~~~
 
Since we have defined the class of our ul-element to be 'sf-menu', this script snippet will replace our structure with the power of superfish. ));
 
 
```
 
 
to render the menu with the content of our database. 
 
 
Attention: please be sure to not use this Widget inside the div id="mainmenu" of standard-generated webapps because there seems to be some css inconsistency between yii's default css and superfish's default css. Maybe this will be fixed sometime.
 
 
Note the bunch of effects and options (like drop-shadow) you can configure with superfish. in extensions/vendors/CDropDownMenu.js

After this, we want our Users to be able to easily move Menu entries around. To achieve this, we will use a Drop-Down List,
in which we can choose the parent of our selected element. We write this code-snippet to views/Hierarchy/_form.php :
[...]
15 0
24 followers
Viewed: 62 997 times
Version: 1.1
Category: Tutorials
Tags: menu
Written by: thyseus
Last updated by: thyseus
Created on: Jan 16, 2010
Last updated: 12 years ago
Update Article
Revert to #4 | Revert to #6

Revisions

View all history