Yii Framework Forum: Custom yii\widgets\Menu - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Custom yii\widgets\Menu Custom Menu Template, Class and Active Rate Topic: -----

#1 User is offline   DiHeich 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 22-November 16

Posted 22 November 2016 - 04:36 AM

Hi all,
i have a question about yii\widgets\Menu.

My template:
<ul class="page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
                        <li class="nav-item [b]start active open[/b]">
                            <a href="javascript:;" class="nav-link nav-toggle">
                                <i class="icon-home"></i>
                                <span class="title">Dashboard</span>
                                <span class="selected"></span>
                                <span class="arrow open"></span>
                            </a>
                            <ul class="[b]sub-menu[/b]">
                                <li class="nav-item [b]start active open[/b]">
                                    <a href="index.html" class="nav-link ">
                                        <i class="icon-bar-chart"></i>
                                        <span class="title">Dashboard 1</span>
                                        <span class="selected"></span>
                                    </a>
                                </li>
                                <li class="nav-item start ">
                                    <a href="dashboard_2.html" class="nav-link ">
                                        <i class="icon-bulb"></i>
                                        <span class="title">Dashboard 2</span>
                                        <span class="badge badge-success">1</span>
                                    </a>
                                </li>
                                <li class="nav-item start ">
                                    <a href="dashboard_3.html" class="nav-link ">
                                        <i class="icon-graph"></i>
                                        <span class="title">Dashboard 3</span>
                                        <span class="badge badge-danger">5</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item  ">
                            <a href="javascript:;" class="nav-link nav-toggle">
                                <i class="icon-bulb"></i>
                                <span class="title">Elements</span>
                                <span class="arrow"></span>
                            </a>
                            <ul class="sub-menu">
                                <li class="nav-item  ">
                                    <a href="elements_steps.html" class="nav-link ">
                                        <span class="title">Steps</span>
                                    </a>
                                </li>
                                <li class="nav-item  ">
                                    <a href="elements_lists.html" class="nav-link ">
                                        <span class="title">Lists</span>
                                    </a>
                                </li>
                                <li class="nav-item  ">
                                    <a href="elements_ribbons.html" class="nav-link ">
                                        <span class="title">Ribbons</span>
                                    </a>
                                </li>
                                <li class="nav-item  ">
                                    <a href="elements_overlay.html" class="nav-link ">
                                        <span class="title">Overlays</span>
                                    </a>
                                </li>
                                <li class="nav-item  ">
                                    <a href="elements_cards.html" class="nav-link ">
                                        <span class="title">User Cards</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>



My yii\widgets\Menu:
echo Menu::widget([
                        'encodeLabels' => false,
                        'options' => ['class' => 'page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu', 'data-keep-expanded' => 'false', 'data-auto-scroll' => 'true', 'data-slide-speed' => '200'],
                        'items' => [
                            // Important: you need to specify url as 'controller/action',
                            // not just as 'controller' even if default action is used.
                            // 'Products' menu item will be selected as long as the route is 'product/index'
                            ['label' => ' <i class="icon-home"></i>
                                <span class="title">Dashboard</span>
                                <span class="arrow"></span>', 'url' => ['javascript:;'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link nav-toggle'], 'items' => [
                                ['label' => '<i class="icon-bar-chart"></i>
                                        <span class="title">Dashboard 1</span>', 'url' => ['product/index', 'tag' => 'new'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link'] ],
                            ]],
                        ]);


How i can add the class sub-menu for the dropdown <ul> with the yii\widgets\Menu?
And it's possibile to add the Active class: start active open?
0

#2 User is offline   mostofa62 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 11-April 13
  • Location:Chittagong, Bangladesh

Posted 22 November 2016 - 11:55 PM

You can try following
echo Menu::widget([
                        'encodeLabels' => false,
                        'options' => ['class' => 'page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu', 'data-keep-expanded' => 'false', 'data-auto-scroll' => 'true', 'data-slide-speed' => '200'],
                        'submenuTemplate' => "\n<ul class='sub-menu'>\n{items}\n</ul>",
						'items' => [
                            // Important: you need to specify url as 'controller/action',
                            // not just as 'controller' even if default action is used.
                            // 'Products' menu item will be selected as long as the route is 'product/index'
                            ['label' => ' <i class="icon-home"></i>
                                <span class="title">Dashboard</span>
                                <span class="arrow"></span>', 'url' => ['javascript:;'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link nav-toggle'], 'items' => [
                                ['label' => '<i class="icon-bar-chart"></i>
                                        <span class="title">Dashboard 1</span>', 'url' => ['product/index', 'tag' => 'new'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link'] ],
                            ]],
                        ]);



Please see the code added after options:
 'submenuTemplate' => "\n<ul class='sub-menu'>\n{items}\n</ul>",

0

#3 User is offline   mostofa62 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 11-April 13
  • Location:Chittagong, Bangladesh

Posted 23 November 2016 - 12:03 AM

And also using active class:
echo Menu::widget([
                        'encodeLabels' => false,
                        'options' => ['class' => 'page-sidebar-menu  page-header-fixed page-sidebar-menu-hover-submenu', 'data-keep-expanded' => 'false', 'data-auto-scroll' => 'true', 'data-slide-speed' => '200'],
                        
						'activeCssClass'=>'start active open',
						'submenuTemplate' => "\n<ul class='sub-menu'>\n{items}\n</ul>",
						
                                                'items' => [
                            // Important: you need to specify url as 'controller/action',
                            // not just as 'controller' even if default action is used.
                            // 'Products' menu item will be selected as long as the route is 'product/index'
                            ['label' => ' <i class="icon-home"></i>
                                <span class="title">Dashboard</span>
                                <span class="arrow"></span>', 'url' => ['javascript:;'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link nav-toggle'], 'items' => [
                                ['label' => '<i class="icon-bar-chart"></i>
                                        <span class="title">Dashboard 1</span>', 'url' => ['product/index', 'tag' => 'new'], 'options' => ['class' => 'nav-item'], 'linkoptions' => ['class' => 'nav-link'] ],
                            ]],
                        ]);

0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users