Mega Menus

Yii 1.1 General Discussion
1

I want to create a Yii mega menu. I searched the site, but didn’t come up with anything and none of the menu extensions I found seem to do them.

Here’s the code for one in jQuery, but I’m not sure what to do with it in Yii:-

www.javascriptkit.com/script/script2/jkmegamenu.shtml

Sorry if it’s a stupid question. I’m fairly new to PHP, YII, JQuery and JQuery in Yii, so any basic pointers would be great.

Thanks.

2

Can anybody help with this?

3

If there is nobody writing megamenu extension on Yii, you can write yourself. It should be simple. Because you don’t define what you want completely, I’ll assume you are going to put mega menu on every page and the menu is fixed (meaning not url from certain table, or access-related)

I think this is not best practice but it should make megamenu run on Yii:

  1. download the script from megamenu site

  2. put the js file on the your_project/js/ (create ‘js’ folder yourself)

  3. on the your_project/protected/views/layouts/main.php there is code similar like this:


<?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')),

				....

		)); ?>

You change it into like this:


<?php $this->widget('zii.widgets.CMenu',array(

                        'id'=>'megamenu1',

                        'htmlOptions'=>array('class'=>'megamenu'),

			'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')),

				....

		)); ?>
  1. At this code inside the <head></head> tag (still in protected/layouts/main.php)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->baseUrl; ?>/js/jkmegamenu.css" />

<script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/jkmegamenu.js">

<script type="text/javascript">

jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")

</script>

Remember, this is not the best practice, and I haven’t test it myself. But I hope it can run though. If this really have worked, then you should improve the code. Maybe you can convert it into CWidget that will be better