Responsive Fancy Sidebar Navigation Menu With Icons

Ionic: Side Bar Menu is an awesome mobile-friendly sidebar and navigation menu built with Ionic and Angular.

responsive sidebar menu, sidebar menu codepen, responsive sidebar menu css, sidebar menu examples, css sidebar navigation menu with icons

How to make use of it:

Install & download:

<div ng-controller="AppController">
    <ion-nav-view></ion-nav-view>
  </div>
<script id="app.html" type="text/ng-template">
    <ion-side-menus>

      <ion-side-menu-content>
        <ion-nav-bar class="bar-Prple">
          <ion-nav-back-button class="button-icon ion-arrow-left-c">
          </ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
            </button>
        </ion-nav-buttons>
        <ion-nav-view name="appContent"></ion-nav-view>
      </ion-side-menu-content>

      <ion-side-menu side="left" id="loggedOutMenu">
        <ion-header-bar class="bar-assertive">
          <h1 class="title">LOGO</h1>
        </ion-header-bar>
        <ion-content>
          <ion-list>
            <button ion-item menuClose class="SideBar_Clk"><ion-icon name="compass"></ion-icon> Location</button>
          </ion-list>
          <ion-list>
            <button ion-item menuClose class="SideBar_Clk"><ion-icon name="bookmarks"></ion-icon> Bookmarks</button>
          </ion-list>
          <ion-list>
            <button ion-item menuClose class="SideBar_Clk"><ion-icon name="contact"></ion-icon> Contact</button>
          </ion-list>
          <ion-list>
            <button ion-item menuClose class="SideBar_Clk"><ion-icon name="logo-buffer"></ion-icon> Collections</button>
          </ion-list>

        </ion-content>
      </ion-side-menu>
    </ion-side-menus>
  </script>
<script id="home.html" type="text/ng-template">
    <ion-view title="Side bar menu Template">
      <ion-content padding="true">
        <ion-purchase></ion-purchase>
      </ion-content>
    </ion-view>
  </script>

Ionic Side Bar Menu Plugin/Github


See Demo And Download

Official Website(nithinpjohn): Click Here

This superior jQuery/javascript plugin is developed by nithinpjohn. For extra Advanced Usage, please go to the official website.

Share