تالار گفتمان nCIS.ir

سلام


چطور میتونم دسته بندی ها رو در قسمت navbar در layout نمایش بدم؟

یعنی برا نمایش دسته بندی ها مجبور نباشیم صفحه خاصی برای دسته بندی ها بسازیم و از view استفاده کنیم.

لاراول روش خاصی برا این کار داره؟


متشکرم

دسته‌بندی‌ها رو از مدل بگیرین و با حلقه توی ویو پیمایش کنین و نمایش بدین.

نمایش دسته بندی ها در 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') !!}

متشکرم