CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
user3504187
user3504187

Reputation: 83

AngularJS 1.4, bootstrap multi level Accordion sample

I want to build a menu something like as below but I am not finding an appropriate sample utilising AngularJS 1.4, bootstrap & accordion. Accordion is a must. Please advise.

menu1
menu2
  submenu2.1
  submenu2.2
     sub-submenu2.2.1
     sub-submenu2.2.2
menu3

I have added the code below. Style sheet is Bootstrap.css. Also some custom stylesheet used in project. Accordion menu elements should have different colours at each level of menu. Also the one selected should be displayed in different color. When we hover over elements it should display different color. As per the below implementation I have 2 main level elements in menu. The first element is displaying proper accordion behaviour. Second element is always open. No stylesheet is getting applied to either of the menu elements. Please advise.

HTML: 

 <script type="text/ng-template" id="menuTree">
      <uib-accordion-group is-open="firstMenuItemStatus.isFirstOpen" is-disabled="firstMenuItemStatus.isFirstDisabled">
        <uib-accordion-heading ng-if="c.pDtos">
            {{c.name}}
        </uib-accordion-heading>
        <div ng-repeat="p in c.pDtos" ng-include="'smenuTree'"></div>
      </uib-accordion-group>
  </script>

  <script type="text/ng-template" id="smenuTree">
      <uib-accordion-group>
        <uib-accordion-heading>
          {{p.name}}
        </uib-accordion-heading>
        <div ng-show="p.aDtos" ng-repeat="a in p.aDtos">
          <a ui-sref="crhDetail({ crhId : a.crhId})">{{a.name}}</a>
        </div>
      </uib-accordion-group>
  </script>
  <div class="menuSec" ng-controller="menuCtrl">
    <uib-accordion close-others="true">
      <div ng-repeat="c in menuTreeSet" ng-include="'menuTree'" >
      </div>
    </uib-accordion>    
  </div>

Custom CSS:

.menuSec {top: 80px;left: 0;right: 0;bottom: 0;}
.menuSec>ul {position: absolute;background:#2166b3;width:100%;}
.menuSec>ul>li, .secondLevelList>li, .thirdLevelList>li{position: relative;float: right;display:block;list-style: none;width: 100%;height: 40px;line-height: 44px;text-align: right;font-size: 12px;padding-right: 14px;box-shadow: 0 1px 0 #3A76C4;cursor: pointer;}
.secondLevelList, .thirdLevelList{width:220px;}
.secondLevelList>li, .thirdLevelList>li{width:220px;height:30px;line-height: 32px;float: right;list-style: none;}
.selected{height:auto !important;background:#135aa9;border-left: 3px solid #000033;border-bottom:none;box-shadow:none !important;}
.secondLevelList>.selected{background:#004388;}
.menuText{position:absolute;text-align:right;right:47px;}
.menuSec ul li:hover {background: #135aa9;border-left: 3px solid #000033;}
.menuSec ul li .fa {margin-left: 14px;line-height: 40px;}
.secondLevelList, .thirdLevelList{position:relative !important;float:right;display:block;border-top:1px solid #000033;}
.secondLevelList{margin-right:-14px;}
.thirdLevelList{margin-right:-24px;}
.secondLevelList>li{background:#0a4d99;border-bottom:1px solid #2a66a9;padding-right:24px;}
.selected>.secondLevelList>li:hover{background:#004388 !important;}
.secondLevelList>li:hover{background:#003b78;}
.thirdLevelList>li{background:#004388;border-bottom:1px solid #18589f;padding-right:34px;}
.thirdLevelList>li:hover{background:#003871 !important;}
.thirdLevelList>.selected, .thirdLevelList>.selected:hover{padding-right:10px;background-image:url(../images/NowWeAt.png) !important;background-position:right !important;background-repeat:no-repeat !important;}
.menuSecCT{width:80px;overflow:hidden;}
.menuSecCT .menuText{display:none;}
.menuSec ul li{padding-right:34px;}
.secondLevelList, .thirdLevelList{display:none;}}

Upvotes: 1

Views: 2892

Answers (1)

beaver
beaver

Reputation: 17647

Here is an example of multi-level (3 levels) UI Bootstrap accordion. You have to adapt to your needs.

This example is based on ng-include:

<script type="text/ng-template" id="menuTree">
      <uib-accordion-group>
        <uib-accordion-heading ng-if="menu.listChilds">
          <a href="{{menu.href}}">{{menu.label}}</a>
        </uib-accordion-heading>
        <div ng-repeat="submenu in menu.listChilds" ng-include="'smenuTree'"></div>
      </uib-accordion-group>
  </script>

  <script type="text/ng-template" id="smenuTree">
      <uib-accordion-group>
        <uib-accordion-heading >
          <a href="{{submenu.href}}">{{submenu.label}}</a>
        </uib-accordion-heading>
        <div ng-show="submenu.listChilds" ng-repeat="item in submenu.listChilds">
          <a href="{{item.href}}">{{item.label}}</a>
        </div>
      </uib-accordion-group>
  </script>

  <div ng-controller="MenuController">
    <uib-accordion close-others="oneAtATime">
      <div ng-repeat="menu in items" ng-include="'menuTree'"></div>
    </uib-accordion>
  </div>

http://plnkr.co/edit/ERURCsdvjhts1ujkYTrz?p=preview

Upvotes: 1

Related Questions