AngularJS 1.4, bootstrap multi level Accordion sample

Question

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;}}

get rid of bootstrap.js and use angular-ui-bootstrap which has a collapse directive — charlietfl
– charlietfl, Commented Jan 21, 2016 at 3:07
I am using this sample but its only for one level. Please advise how to proceed for nested levels. angular-ui.github.io/bootstrap/#/accordion — user3504187
– user3504187, Commented Jan 21, 2016 at 3:36

beaver · Accepted Answer · 2016-01-24 09:21:52Z

1

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

answered Jan 24, 2016 at 9:21

beaver

17.8k2 gold badges43 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

user3504187 Over a year ago

I am still stuck with this . Somehow the bootstrap css does not apply to this accordion. I tried using ng-class but still unable to color the elements at different level . Please help.

user3504187 Over a year ago

I have updated my non-working code in the original question.

beaver Over a year ago

Please refer to this stackoverflow.com/help/mcve in order to share a "Minimal, Complete, and Verifiable example". If you try to apply a CSS class and do not share its definition (i.e. the stylesheet), how someone could help you?

user3504187 Over a year ago

I have posted the css of menu that I want to apply. Please advise how to proceed further.

user3504187 Over a year ago

menucool.com/vertical/accordion-menu this link contains the exact type of menu I need however I cannot use this code for 2 reasons. (1) When I using angular tags along with this menu the menu does not display . (2) This is licensed code and will work only in Dev / Local .

|

Collectives™ on Stack Overflow

AngularJS 1.4, bootstrap multi level Accordion sample

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related