Posts Tagged with menu

Displaying 1-8 of 8 results.
Resolved: Yii2 The 'label' option is required NavBar
posted by admin on February 21, 2017

<?php
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use app\helpers\App;
use yii\helpers\Html;

NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => App::t('Home'), 'url' => ['/site/index']],
//['label' => 'About', 'url' => ['/site/about']],
//['label' => 'Contact', 'url' => ['/site/contact']],
Yii::$app->user->isGuest ? (
['label' => App::t('Sign up', 'app2'), 'url' => ['/site/registration']]
) : (
[]
),
Yii::$app->user->isGuest ? (
['label' => App::t('Login'), 'url' => ['/site/login']]
) : (
'<li>'
. Html::beginForm(['/site/logout'], 'post')
. Html::submitButton(
App::t('Logout').' (' . Yii::$app->user->identity->username . ')',
['class' => 'btn btn-link logout']
)
. Html::endForm()
. '</li>'
),

],
]);
NavBar::end();
?>
Read more
Resolved: Yii 1.1 Cmenu item url array working by wrong logic
posted by admin on October 11, 2016
Cmenu item url working not correct.
It take my current url and the compose new url, and it is wrong.
For example it looks like like this

http://bukivedi.store/index.php?r=stores/stores/user

But I have only module Stores and want to view result:

http://bukivedi.store/index.php?r=stores/user

My Cmenu array is here:

array('label'=>'Таблицы <span class="caret"></span>', 'url'=>array('#'),
'itemOptions'=>array('class'=>'dropdown'),
'linkOptions'=> array(
'class' => 'dropdown-toggle',
'data-toggle' => 'dropdown',
),
'items' => array(
array('label' => 'Пользователи', 'url' => array('stores/user')),
array('label' => '', 'url' => array('#'), 'itemOptions'=>array('role'=>'separator', 'class'=>'divider')),
),
),
Read more
Resolved: Yii 1.1 How to add html tag in CMenu menu item label text?
posted by admin on October 10, 2016
I have CMenu and I try to add html tags to menu items label and like this

<?php $this->widget('zii.widgets.CMenu',array(
'htmlOptions'=>array('class'=>'nav navbar-nav'),
'items'=>array(
array('label'=>'Главная', 'url'=>array('/')),
array('label'=>'Склады <span class="caret"></span>', 'url'=>array('#'),
'itemOptions'=>array('class'=>'dropdown'),
'linkOptions'=> array(
'class' => 'dropdown-toggle',
'data-toggle' => 'dropdown',
),
...
),
)); ?>

Output show encoded html with html character:

Склады <span class="caret"></span>
Read more
Wiki: Yii 1: Как задавать стили css (class, id) для CMenu, пунктов меню и ссылок в менюwiki
posted by admin on October 10, 2016
Часто хочется задать свои стили css, своё оформление для меню CMenu. Это сводится к добавлению классов и идентификаторов id в html (виджет Cmenu формирует ненумерованный список <ul>, <li>;). В Yii для этих целей предусмотрены htmlOptions, itemOptions, and linkOptions.
1. Добавление названий id и class к CMenu.
Используются id и htmlOptions для добавления своих идентификаторов и классов.

//in your view
$this->widget('zii.widgets.CMenu', array(
'id'=>'myMenu',
'items'=>$this->myMenu,
'htmlOptions'=>array('class'=>'span-24 last'),
'encodeLabel'=>false, // чтобы можно было в label использовать html-теги (жирность, наклон, цвет и т.д.)
));

Это сформирует следующий html:

<ul class="span-24 last" id="myMenu">
...
</ul>

2. Добавление названий классов (class names) к пунктам CMenu (CMenu items) и ссылкам в пунктах меню (CMenu item links).
Используем itemOptions и linkOptions. Например:

//in your controller
$this->myMenu = array(
'id'=>'myMenu',
'items'=>array(
array(
'label'=>'Home',
'url'=>array('site/index'),
'itemOptions'=>array('class'=>'visited'),
'linkOptions'=>array('class'=>'bar'),
),
array('label'=>'Sign Out', 'url'=>array('site/signout')),
),
);

Эти команды позволят Yii сгенерировать следующий кусочек меню:

...
<ul id="myMenu">
<li class="visited">
<a class="bar" href="/site/index">Home</a>
</li>
...

Установив таким образом идентификаторы и классы в шаблоне html, далее расписывайте в файле стилей .css соответствующее оформление для них.Read more
Wiki: Responsive multilevel menu with Bootstrap 3 - Second and Third level submenuwiki
posted by admin on August 18, 2016
HTML

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">NavBar</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://github.com/fontenele/bootstrap-navbar-dropdowns" target="_blank">GitHub Project</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
<ul class="dropdown-menu multi-level">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>

CSS

.dropdown-submenu {
position: relative;
}

.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
display: block;
}

.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}

.dropdown-submenu.pull-left {
float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
Read more
Resolved: Yii Cmenu add class to item
posted by admin on April 23, 2016
I need an output like this html code

<ul class="yw0">
<li><span class="highlighter"></span><a href="#">Sign in</a>
</li>
<li><a href="#">Register</a>
</li>
</ul>


The code would be similar something but what would be the exact code to create an extra <span class="highlighter"></span> after the li tag and before the a tag**

<?php $this->widget('zii.widgets.CMenu',array(
'id'=>'menu',
'items'=>array(
array('label'=>'Signin', 'url'=>array('/site/signin')),
array('label'=>'Register', 'url'=>array('/site/register'))
),
)); ?>
Read more
Resolved: Yii CMenu - active class not rendering
posted by admin on April 12, 2016

'items'=>array(
array(
'label'=>'About',
'url'=>array('/contact')
),


My CMenu not generate active class.Read more
Wiki: Yii 1.1: Add id or class to CMenu itemswiki
posted by admin on April 12, 2016
CMenu comes with a lot of great customization options built in. One of the most used is the class 'active' being added to menu item. But, what if you want to add your own class or id to a menu item ?

It's very easy, you just need to use the 'itemOptions'.

If you want a menu like :

<ul id="myMenu">
<li id="first"><a href="#"><span>First</span></a></li>
<li id="second"><a href="#"><span>Second</span></a></li>
</ul>


Just do :

<?php $this->widget('application.components.MyMenu', array(
'id' => 'myMenu',
'items' => array(
array('label' => 'First', 'url' => array('#'), 'itemOptions'=>array('id' => 'first'), ),
array('label' => 'First', 'url' => array('#'), 'itemOptions'=>array('id' => 'second'), ),
),
));
?>
Read more