CODEWITHSUNDEEP
angularjsmobileionic-frameworkui-design
Niranth Reddy
Niranth Reddy

Reputation: 493

Subheader list in sidemenu using Ionic Framework

I am new to Ionic Framework. I have a problem here. I need a subheader with list of two hyperlinks in a single side-menu like this.

Design I need

My Code :

   <ion-header-bar class="bar-header">
            <h5 class="align-left"> Hello, Niranth Reddy </h5>
           <h5 class="align-right"> <a href="" ng-click="signOut()">
            Sign Out    </a> </h5>                                                                         
        </ion-header-bar>
    <ion-header-bar class="bar bar-subheader item-input-inset">
        <ion-item class="item-input-wrapper">
           <ul>
            <li>My Profile</li> 
            <li>My Orders</li>
           </ul>
         </ion-item>
    </ion-header-bar>
    <ion-content>
         <ion-list class="sideNav">
            <ion-item menu-toggle   
                ng-repeat="item in items track by $index"
                 class="side-menu item"
                   ng-click="getSelcected(item)"
                     href="#/sidemenu//{{item.name}}">
                         <div class="row">
                            <i class="{{item.link.icon}} featureIcon"></i>
                            <h4 class="col">{{item.properties.menuname}}</h4>
                        </div>
                    </ion-item>
            </ion-list>
         </ion-content>

Bu the result i get is like :

Result I got

Background colors doesn't matter. But I am specifically looking for such kind of design.

Any help guys ??

Upvotes: 1

Views: 361

Answers (1)

Harish Kommuri
Harish Kommuri

Reputation: 2854

I think you need to make changes in your code as follows.

Replace following code in your HTML

<ion-item class="item-input-wrapper">
  <ul>
     <li>My Profile</li> 
     <li>My Orders</li>
  </ul>
 </ion-item>

with,

<ion-list>
  <ion-item>My Profile</ion-item>
  <ion-item>My Orders</ion-item>
</ion-list>

or with

<div class="list">
  <ion-item>My Profile</ion-item>
  <ion-item>My Orders</ion-item>
</div>

Second one will be efficient.

Upvotes: 1

Related Questions