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>

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


Comments

Post a Comment

Popular posts from this blog

SVG stroke-linecap doesn't work for circles in Firefox? -

-
i've got problem svg stroke-linecap attribute. i've got circular progress bar in angularjs , set outer circle (blue one) have rounded "ends". @ fiddle . <svg ... height="130" width="130"> <!-- ngif: background --> <circle ... ng-if="background" fill="#fff" class="ng-scope" stroke-width="13" stroke="#cc3399" r="57.5" cy="65" cx="65" stroke-linecap="round" /> <!-- end ngif: background --> <circle ... fill="none" stroke-dashoffset="36.12831551628261" stroke-dasharray="361.28315516282623" stroke-width="13" stroke="#432db3" stroke-linecap="round" r="57.5" cy="65" cx="65" transform="rotate(-89.9, 65, 65)" /> </svg> how can that? ...
Read more

routes - Laravel 4 Wildcard Routing to Different Controllers -

-
realizing i'm going take beating this, have several questions "best practices" when constructing laravel route. do laravel routes run "first come first serve" top bottom? if route found, pass control controller (or perform action) , terminate? i have part of application acts url shortner. so, route looks this: route::get('/{id}', array('as' => 'home.text', 'uses' => 'homecontroller@text'), function($id){ //make sure id exists before pushing controller. if (storage::where('shortcode','=', $id)->count() > 0) { // route found } }); how can improved? one, i'm not sure how pass processing on controller conditionally.. sort of controller::make() ..? 3) there better way in laravel check if record exists versus doing mode::where('column','=','value')->count() 4) have legacy urls http://url.com/?...
Read more

cross browser - XSLT namespace-alias Not Working in Firefox or Chrome -

-
i transforming xhtml xhtml, need xslt stylesheet part of resulting document (the stylesheet contained in <script type"text/template"> element. using the xsl:namespace-alias instruction, works fine in ie, fails in both chrome , firefox. here relevant code: <xsl:output doctype-system="about:legacy-compat" omit-xml-declaration="yes" indent="yes" method="html" media-type="application/xhml" encoding="utf-8"/> <xsl:namespace-alias stylesheet-prefix="wxsl" result-prefix="xsl" /> <xsl:template match="head"> <!-- code omitted clarity --> <script type="text/template"> <wxsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:eli="local"> ...
Read more