最新消息: 新版网站上线了!!!

Yii CMenu 扩展的使用方法

通过下拉菜单,实现二级导航

 

第一步:   找到:protected\views\layouts\main.php

    <div id="mainmenu">
        <?php $this->widget('zii.widgets.CMenu',array(
            'items'=>array(

                //一般菜单
                array('label'=>'Home', 'url'=>array('/site/index')),

                ……

                 //下拉菜单

                array(
                    'label'=>'父菜单',
                    'url'=>array(''),
                    'linkOptions'=>array('id'=>'menuCompany'),
                    'itemOptions'=>array('id'=>'itemCompany'),
                    'items'=>array(
                        array('label'=>'子菜单1', 'url'=>array('/Xxxxx1/admin')),
                        array('label'=>'子菜单2', 'url'=>array('/Xxxxx2')),
                        array('label'=>'子菜单3', 'url'=>array('/Xxxxx3')),
                    ),
                ),

            ),
        )); ?>
    </div><!-- mainmenu -->

 

第二步:   自定义下拉菜单的样式  (必须自定义样式,才会出现下拉效果)

修改css文件:(protected同级)  /css/main.php

 

/*导航下拉效果Css*/
#mainmenu  ul { list-style: none; margin: 0; padding: 0; position: relative; height: 28px; }
#mainmenu  ul li { display: block; height: 28px; float: left; overflow: visible; }
#mainmenu  ul li:hover > ul { display: block; }
#mainmenu  ul li a { float: left; display: block; }
#mainmenu  ul li ul { display: none; position: absolute; top: 100%;
    background: #4D9AC6; color: #fff; height: auto;
}
#mainmenu  ul li ul li { float: none; }   /* 子导航不浮动,竖向排列 */
#mainmenu  ul li ul li a { color: #FFFFFF; padding: 4px 14px; display: block; }
#mainmenu  ul li ul li.active a,
#mainmenu  ul li ul li a:hover { color: #5BA0C9; }  /* 鼠标经过链接的颜色 */

转载请注明:谷谷点程序 » Yii CMenu 扩展的使用方法