Search Bar appear on search button click and drop down menu

Ionic Framework ionic-v3
1

I design a ion-navbar with 4 buttons and the last button is for search .I now want when cearch button clicked then a ion-searchbar appear over other icons and perform search operations after complete back to previous stage .also there are a more button I want drop down when its clicked . bellow is my code

<ion-navbar *navbar hideBackButton>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <!--<ion-title>Category List</ion-title>-->
    <ion-segment>
        <ion-segment-button class="segment-button segment-activated" role="button" tappable="" value="puppies" aria-pressed="true">
            <ion-icon name="globe"></ion-icon>
        </ion-segment-button>

        <ion-segment-button class="segment-button" role="button" tappable="" value="kittens" aria-pressed="false">
            <ion-icon name="logo-android"></ion-icon>
        </ion-segment-button>

        <ion-segment-button class="segment-button" role="button" tappable="" value="ducklings" aria-pressed="false">
            <ion-icon name="logo-apple"></ion-icon>
        </ion-segment-button>

    </ion-segment>
    <ion-buttons end>
        <button>
            <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>
    <ion-buttons end>
        <button>
            <ion-icon name="md-more"></ion-icon>
        </button>
    </ion-buttons>



</ion-navbar>

please help me to do this.

2

Right now this is a bit out of scope for both ionic2 and angular2. Angular’s animation isn’t fully ready to be used, and thats something that could be used in a situation like this.

So for now I’d say hold off on this for a bit. Though nice concept!

3

Hi @mhartington I post a new Topic which is related to this topic ,can you please look into this once .

4

Hi all
can any body put some light on this?