Adding side-menu in ionic framework

Question

I am new to ionic. I am converting an existing angular app into mobile app using ionic framework. But, I can't add a side menu to this. How do I do that. Here's my code:

<div class="wrap">
    <div class="header">
        <div class="pull-right">
            <a href="#" class="handle"><i class="fa fa-bars">
                </i></a>
        </div>

        <div class="text-center">
            <h1>SKY</h1>
        </div>


    </div>
    <div class="items-list">
        <div class="item">
            <div class="clearfix">
                <div class="item-thumb-container">
                    <img src="images/item-1.jpg" class="item-thumb img-responsive">
                </div>
                <div class="item-details-container">
                    <h2 class="item-title">Item Name</h2>
                    <div class="item-description">
                        <p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p>
                    </div>
                    <div class="item-meta">
                        <a href="#" ui-sref="single" class="item-btn">See</A>
                        <span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span>
                        <span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="item item-img-right">
            <a href="#" ui-sref="single">
                <div class="clearfix">
                    <div class="item-details-container">
                        <h2 class="item-title">Item Name</h2>
                        <div class="item-description">
                            <p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p>
                        </div>
                        <div class="item-meta">
                            <span class="item-btn">See</span>
                            <span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span>
                            <span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span>
                        </div>
                    </div>
                    <div class="item-thumb-container">
                        <img src="images/item-1.jpg" class="item-thumb img-responsive">
                    </div>
                </div>
            </a>
        </div>
        <div class="item">
            <a href="#" ui-sref="single">
                <div class="clearfix">
                    <div class="item-thumb-container">
                        <img src="images/item-1.jpg" class="item-thumb img-responsive">
                    </div>
                    <div class="item-details-container">
                        <h2 class="item-title">Item Name</h2>
                        <div class="item-description">
                            <p>Lorem ipsum dolor sit amet, sit qualibo beloi refashi ispuias.</p>
                        </div>
                        <div class="item-meta">
                            <span class="item-btn">See</span>
                            <span class="qty">10 <i class="fa fa-glass" aria-hidden="true"></i></span>
                            <span class="price">9 SAR <span class="round"><i class="fa fa-dollar" aria-hidden="true"></i></span></span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

I want to show the side menu when the button to the right is clicked. I have tried adding <ion-sidemenus> but it shows the menu list items outside.

YATO YATO · Accepted Answer · 2017-12-03T07:54:36

Ionic calls this MenuToggle which can be easily implemented by a single line of code

<button ion-button menuToggle>Toggle Menu</button>

Read more about MenuToggle on the official docs.

Adding side-menu in ionic framework

1 Answers