نمایش دسته بندی ها در layout رو بصورت زیر انجام میدیم:
اول دسته بندی ها رو با استفاده از مدل دریافت میکنیم:
<?php
$categories = AppCategory::with('children')
->whereNull('parent_id')
->get();
?>
بعد به روش زیر به نمایش درمیاریم:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">موضوعات <span class="caret"></span></a>
<ul class="dropdown-menu">
<?php foreach($categories as $category): ?>
<li<?= ($category->children->count() > 0 ? ' class="dropdown dropdown-submenu"' : '')?>>
<?php if($category->children->count() > 0): ?>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
{{ $category->name }} <span class="fa fa-caret-left"></span>
</a>
<ul class="dropdown-menu">
<?php foreach($category->children as $child): ?>
<li>
<a href="{{ route('categories.show', ['id' => $child->id]) }}">
{{ $child->name }}
</a>
</li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<a href="{{ route('categories.show', ['id' => $category->id]) }}">
{{ $category->name }}
</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</li>
در نهایت برای اینکه submenuها به درستی به نمایش درآیند دو فایل زیر رو به layout اضافه میکنیم:
فایل bootstrap-submenu-styles.css:
.marginBottom-0 {
margin-bottom:0;
}
#navbar-nav .open > .dropdown-toggle {
background-color: pink;
}
#navbar-nav .open .dropdown-toggle:focus {
background-color: red;
color: #000;
}
.dropdown-submenu{
position:relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
margin-top: -6px;
margin-right: -1px;
right: 100%;
min-width: 160px;
background: #fdd;
border-radius: 6px 0 6px 6px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
box-shadow: 3px 3px 6px #f99;
-webkit-box-shadow: 3px 3px 6px #f99;
-moz-box-shadow: 3px 3px 6px #f99;
}
.dropdown-submenu>a:after{
display:block;
/*content:" ";*/
float: left;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
border-left-color:#555;
}
.dropdown-submenu.pull-left{
float:none;
}
.dropdown-submenu > .dropdown-toggle > span {
float:left;
width: 0;
}
.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;
}
که در قسمت head از صفحه قرار میگیرد بصورت:
{!! Html::style('css/bootstrap-submenu-styles.css') !!}
و فایل bootstrap-submenu-script.js:
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
که در انتهای body قرار میگیرد بصورت:
{!! Html::script('js/bootstrap-submenu-script.js') !!}
متشکرم