CMenu <ul>

Hello everyone.

Can you, please, help me solve one problem?

This code

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

    'items'=>array(

        array('label'=>'Item1', 'url'=>array('site/index')),

        array('label'=>'Item2', 'url'=>"#", 'linkOptions'=>array('id'=>'myId1'),'submenuOptions'=>array('id'=>'myId'),'items'=>array(

            array('label'=>'SubItem1', 'url'=>array('site/anot','id'=>'9')),

            array('label'=>'SubItem2', 'url'=>array('site/anot','id'=>'10')),

        )),

    ),

));

alongside with some javascript

$("#myId1").click(function()

                     {

                        $("#myId").slideToggle();

                     });

and css

#myId

{

	display: none;

}

give me a little menu in which when I click ‘Item2’ two sibitems appear.

The problem is when I click, for example, ‘SubItem1’ the corresponding page is loaded but Item2 is not expanded any more, that is my subitems hide away. Though when I click Item2 again I can see that ‘SubItem1’ is active.

In plain html it looks like

<ul id="yw3">

<li><a href="/predmety/index.php?r=site/index">Item1</a></li>

<li><a id="myId1" href="#">Item2</a>

   <ul id="myId">

       <li class="active"><a href="/predmety/index.php?r=site/anot&amp;id=9">SubItem1</a></li>

       <li><a href="/predmety/index.php?r=site/anot&amp;id=10">SubItem2</a></li>

   </ul>

</li>

</ul>

How active class can be applied to <ul id="myId">?

Try like that:

<ul id="myId" style= "display:<?php if (/*is active subItem1 or subItem2*/) 'dynamic'; else 'none';?>;">

Instead of using css.

But how can I do it using CMenu widget?

Yes, you can do with javascript:

<script type="text/javascript">

<?php if (*is active subItem1 or subItem2*/)?>

$('#myId').css('display', 'dynamic');

<?php else:?>

$('#myId').css('display', 'none');

<?php endif;?>

</script>

hi!

do you want a vertical menu?? …why can you use a tree widget??

In the code of your menu, 2 doubts

[i]linkOptions is a existing property??

submenuOptions property exist? or is submenuHtmlOptions??[/i]

CMenu

…

it appears the code

$("#myId1").click(function()

                     {

                        $("#myId").slideToggle();

                     });

doesn’t reload with the SubItem pages (only with the SubItem pages??)

where is your menu code?? in the view /layouts/main.php or /column2.php??

I think you must put the js code into the view (main.php??) for reload js code in every petition

 $js = '$("#myId1").click(function()

                     {

                        $("#myId").slideToggle();

                     });';


        Yii::app()->clientScript->registerScript('script', $js, CClientScript::POS_LOAD);

and the css code put it into the submenuHtmlOptions the slideToggle() function will do the efect

regards

Yes they exist. Look here

There are no problems with this code. It does what it’s meant to do - just expands Menu Item that has subitems only when the Menu Item is clicked…

Actualy my menu is a portlet and it is placed in the portlet view and all my javascript is in the same file.

My problem is not that Menu Item does not expand but the problem is that it does not remain expanded after I go to another page.

[SOLVED]

Thanks to your hints, zaccaria, I managed to solve my problem. So here is my solving for those who might have the same problem.

So here is my CMenu:

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

    'items'=>array(

        array('label'=>'Item1', 'url'=>array('site/index')),

        array('label'=>'Item2', 'url'=>"#", 'linkOptions'=>array('id'=>'myId1'),'submenuOptions'=>array('id'=>'myId','class'=>'menuitems'),'items'=>array(

            array('label'=>'SubItem1', 'url'=>array('site/anot','id'=>'9')),

            array('label'=>'SubItem2', 'url'=>array('site/anot','id'=>'10')),

        )),

        array('label'=>'Item3', 'url'=>"#", 'linkOptions'=>array('id'=>'myId2'),'submenuOptions'=>array('id'=>'myId_a','class'=>'menuitems'),'items'=>array(

            array('label'=>'SubItem1', 'url'=>array('site/anot','id'=>'12')),

            array('label'=>'SubItem2', 'url'=>array('site/anot','id'=>'13')),

        )),

    ),

));

When I click some subitem it becomes active. Now my script has to find out what subitem is active and get its <ul> id (which is set in ‘submenuOptions’). To do this I first have to save the CMenu object in some variable.

So I did this

$menu = $this->widget('zii.widgets.CMenu', array(...));

Now having my CMenu in $menu I desined this code to get needed <ul> id

$id = "";

foreach($menu->items as $mn)

{

    if(array_key_exists('items',$mn))

    {

        for($i=0;$i<sizeof($mn['items']);$i++)

        {

            if($mn['items'][$i]['active'])

            {

                $id = $mn['submenuOptions']['id'];

            }

        }

    }  

}

So after I got $id I can use it in javascript like this

<?php if($id):?>

   $('#<?php echo $id;?>').css('display', 'block');

<?php endif;?>

Now when I click some subitem the corresponding page is loaded and submenu remains expanded and clicked link has active css.

But one remark - I guess my code will work only for two level menu.