Is it possible to create a tabs menu like the following?

ionic-v1
1

I am trying to create a menu like the following picture with ionic:

image
menusample.jpg540×849 12.2 KB

So far I have tried the following:

<ion-tabs class="tabs-icon-top tabs-top tabs-positive">
    <ion-tab title="HOME" icon-off="home" icon-on="home" href="#/home">
        <ion-nav-view name="tab-home"></ion-nav-view>
    </ion-tab>

    <ion-tab title="NEWS" icon-on="news" icon-off="news" href="#/tab/news">
        <ion-nav-view name="tab-news"></ion-nav-view>
    </ion-tab>

    <ion-tab title="NEWS 2" icon-off="news2" icon-on="news2" href="#/tab/news2">
        <ion-nav-view name="tab-news2"></ion-nav-view>
    </ion-tab>

</ion-tabs>

Using SCSS I changed the positive color to blue as follow,

$positive:                        #0076c9 !default;

I have been able to get the tabs on top without the ion-header-bar. Still I need to increase the height and add the menu but I am thinking that the method I am using is not correct for this type of menu. I mean using the predefined tags,

<ion-tabs><ion-tab>...etc.

For the vertical menu, I know how to get a menu popup using the $ionicPopover but using a button like:

   <button class="button button-icon ion-android-more" ng-click="popover.show($event)"></button>

Does anyone know if it is possible to create the attached jpg menu in ionic? and if it is possible, could you please give me some hints as to how to do it? thanks a lot