попытался реализовать изменение класса у span togglebutton в navbar widget что бы в конечном итоге получилось так
<div class="navbar-header col-md-7 col-xs-7">
button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="ion-ios-keypad rotateOut"></span>
</button>
</div>
реализовал следующим образом создал класс ToggleButton который наследуется от NavBar вот он
namespace frontend\models;
use yii\helpers\Html;
use yii\bootstrap\Widget;
use yii\bootstrap\NavBar;
use yii\base\Object;
use Yii;
use yii\helpers\ArrayHelper;
class ToggleButton extends NavBar
{
public $navheaderOptionClass=[];
/**
* @var string
*/
public $toggleButtonOption;
/**
* Initializes the widget.
*/
public function init()
{
Widget::init();
$this->clientOptions = false;
if (empty($this->options['class'])) {
Html::addCssClass($this->options, ['navbar', 'navbar-default']);
} else {
Html::addCssClass($this->options, ['widget' => 'navbar']);
}
if (empty($this->options['role'])) {
$this->options['role'] = 'navigation';
}
$options = $this->options;
$tag = ArrayHelper::remove($options, 'tag', 'nav');
echo Html::beginTag($tag, $options);
if ($this->renderInnerContainer) {
if (!isset($this->innerContainerOptions['class'])) {
Html::addCssClass($this->innerContainerOptions, 'container');
}
echo Html::beginTag('div', $this->innerContainerOptions);
}
if(isset($this->navheaderOptionClass)) {
echo Html::beginTag('div', [$this->navheaderOptionClass]);
}else{
echo Html::beginTag('div', ['class' => 'navbar-header ']);
}
if (!isset($this->containerOptions['id'])) {
$this->containerOptions['id'] = "{$this->options['id']}-collapse";
}
if(isset($this->toggleButtonOption)) {
echo $this->TogleButton($this->toggleButtonOption);
}else{
echo $this->renderToggleButton();
}
if ($this->brandLabel !== false) {
Html::addCssClass($this->brandOptions, ['widget' => 'navbar-brand']);
echo Html::a($this->brandLabel, $this->brandUrl === false ? Yii::$app->homeUrl : $this->brandUrl, $this->brandOptions);
}
echo Html::endTag('div');
Html::addCssClass($this->containerOptions, ['collapse' => 'collapse', 'widget' => 'navbar-collapse']);
$options = $this->containerOptions;
$tag = ArrayHelper::remove($options, 'tag', 'div');
echo Html::beginTag($tag, $options);
}
public function TogleButton($span){
$bar = Html::tag('span', '', ['class' => 'icon-bar']);
$screenReader = "<span class=\"sr-only\">{$this->screenReaderToggleText}</span>";
return Html::button("{$screenReader}\n{$bar}\n{$bar}\n{$bar}", [
'class' => $span,
'data-toggle' => 'collapse',
'data-target' => "#{$this->containerOptions['id']}",
]);
}
/**
* Renders collapsible toggle button.
* @return string the rendering toggle button.
*/
}?>
вот так пытаюсь реализовать это в виде
use yii\bootstrap\Nav;
use frontend\models\ToggleButton;
$toggleButton= new ToggleButton();
$toggleButton::begin([
'brandLabel' => false,
'options' => [
'class' => 'navbar navbar-default navbar-fixed-top right Two col-md-5 col-xs-5 navbar-fixed-top',
'id' =>'custom-bootstrap-menu'
],
'containerOptions' => [
'class' => 'collapse navbar-collapse navbar-menubuilder',
'id' => 'bs-example-navbar-collapse-1'],
'renderToggleButton'=> $toggleButton->renderToggleButton('ion-ios-keypad rotateOut')
//The HTML attributes of the inner container.
]);
$toggleButton::end();
получаю следующее (полный код с виджетом nav я не стал выклдывать зачем он вам, просто не удивляйтесь почемуответ такой большой)
<nav id="w0" class="navbar navbar-default" role="navigation">
<div class="container">
<div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="w0-collapse" class="collapse navbar-collapse">
<nav id="custom-bootstrap-menu" class="navbar navbar-default oneMe transparent" role="navigation">
<div class="container">
<div 0-class="navbar-header col-md-7 col-xs-7">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 col-md-14 col-md-offset-10 col-xs-24" href="/frontend/web/">
<img src="http://crimea/frontend/web/foto/logo.png" alt="">
</a>
</div>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse navbar-menubuilder">
<ul id="w1" class="nav navbar-nav navbar">
<li class="active"><a href="/frontend/web/site/index">Главная</a></li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">По производителям
<b class="caret"></b>
</a>
<ul id="w2" class="dropdown-menu">
<li>
<a href="/frontend/web/firmcat/list?id=1" tabindex="-1">Алуштинский эфиромасличный совхоз-завод</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Магазин
<b class="caret"></b>
</a>
<ul id="w3" class="dropdown-menu">
<li><a href="/frontend/web/catalog/list?id=3" tabindex="-1">Каталог</a></li>
</ul>
</li>
<li><a href="/frontend/web/blog/list">Блог</a></li>
</ul>
</div>
</div>
</nav>
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top right Two col-md-3 col-sm-4 col-xs-5 navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="ion-ios-keypad rotateOut"></span>
<span class='itemCart'>0</span>
</button>
</div>
<div id="bs-example-navbar-collapse-2" class="collapse navbar-menubuilder col-md-24 col-xs-24">
<ul class="nav navbar-nav navbar">
<li><a href="/frontend/web/site/logout">Sergalas(выйти)</a></li>
<li><a href="/frontend/web/cabinet/index?OrderitemSearch%5Bid%5D=1">Личный кабинет</a></li>
<li><a href="/frontend/web/cart/list">Корзина</a></li>
</ul>
</div>
</div>
откуда берутся вот это ума не приложу
<nav id="w0" class="navbar navbar-default" role="navigation">
<div class="container">
<div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="w0-collapse" class="collapse navbar-collapse">
и самое интересно что оно ни где не закрывается.
