AngularJS 1.4, bootstrap multi level Accordion sample -
i want build menu below not finding appropriate sample utilising angularjs 1.4, bootstrap & accordion. accordion must. please advise.
menu1 menu2 submenu2.1 submenu2.2 sub-submenu2.2.1 sub-submenu2.2.2 menu3 i have added code below. style sheet bootstrap.css. custom stylesheet used in project. accordion menu elements should have different colours @ each level of menu. 1 selected should displayed in different color. when hover on elements should display different color. per below implementation have 2 main level elements in menu. first element displaying proper accordion behaviour. second element open. no stylesheet getting applied either of 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;}}
here example of multi-level (3 levels) ui bootstrap accordion. have adapt needs.
this example 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>
Comments
Post a Comment