ورود

abdollah110110 · 18-07-1395، 06:39 ق.ظ

سلام

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

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

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

متشکرم

***ADMIN*** · 18-07-1395، 08:29 ق.ظ

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

abdollah110110

نمایش دسته بندی ها در 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 از صفحه قرار میگیرد بصورت:

1	`{!! 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 قرار میگیرد بصورت:

1	`{!! Html::script('js/bootstrap-submenu-script.js') !!}`

متشکرم

ورود
نام‌کاربری
رمزعبور:	فراموشی رمزعبور
	مرا به‌خاطر بسپار.