Tab-like Sidemenu


#1

Maybe someone can help…
I want the links in a side menu work in the same way as they work on a tab bar: each link has its own view. E.g. I have “Home”, “Settings” and “About” as menu items. When I change from “Home” to “Settings” to “About” there must not be a “back” icon in the navigation bar and any page transition.
I could imagine this is already implemented in some way and I am just to stupid to find the right place in the docs…


#2

Hey cauboy, I have the same issue. Did you you find a solution? Share it thanks


#3

You could just wire up a bunch of separate views as templates then make a static side menu that just links to each view? Then in each view, define the left button, right button, and if you want a back button or not

<view title="'Title'" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">…</view>

#4

Thanks mhartington, Could you explain better what you mean, I have tried various examples that I found in this forum regarding this issue, but have not had the desired result.


#5

@andrea No problem. Similar to the tab bar example, where each tab is a different view, you could create an abstract state that has the side menu either left or right with static links, then in the content create a empty nav-view where the content will be displayed. Have you seen this codepen? This should get you in the right direction


#6

Sure, I’ve seen and also tried this example but unfortunately I can not properly close the menu with the $scope.sideMenuController.toggleLeft(); Can you help me?


#7

I had that issue too. For that I created a global controller that has this function.

$scope.toggleMenu = function () {
            $scope.sideMenuController.toggleLeft();
        };

Then for each link i have an ng-click directive on it

<a ng-click="toggleMenu()"></a>

Does this help?


#8

Yes I tried, and it works. Finally I removed the animation properties. I don’t like the effect that produce when I close the sidemenu.
Any ideas?


#9

What effect is that, the sliding and closing of the menu at the same time? Could you post a demo of what you have and I could see what this problem is?


#10

Exactly, the effect is that, below you can find the code I used. If you add the property animation=“slide-left-right” you’ll get the effect I was talking about.

        <div ng-controller="MainCtrl">
        <nav-view></nav-view>
    </div>

    <script id="nav.html" type="text/ng-template">
        <side-menus>
            <pane side-menu-content>
                <nav-bar animation="nav-title-slide-ios7"
                         type="bar-assertive"
                         back-button-type="button-icon"
                         back-button-icon="ion-arrow-left-c"></nav-bar>
                <nav-view name="navContent"></nav-view>
            </pane>
            <side-menu side="left" ng-controller="SideCtrl">
                <header class="bar bar-header bar-dark">
                    <div class="title">Left Menu</div>
                </header>
                <content has-header="true" class="bg-dark">
                    <ul class="list">
                        <a href="#/nav/courts" class="item bg-dark" ng-click="toggleMenu()">courts</a>
                        <a href="#/nav/members" class="item bg-dark" ng-click="toggleMenu()">members</a>
                    </ul>
                </content>
            </side-menu>
        </side-menus>
    </script>

    <script id="courts.html" type="text/ng-template">
        <view title="'Courts'" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons">
            <content has-header="true" padding="true">
                <a href="#/nav/week" class="item">week</a>
            </content>
        </view>
    </script>

    <script id="week.html" type="text/ng-template">
        <view title="'Week'">
            <content has-header="true" padding="true">
                <a href="#/nav/courts" class="item">courts</a>
            </content>
        </view>
    </script>

    <script id="members.html" type="text/ng-template">
        <view title="'Members'" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons">
            <content has-header="true" padding="true">
            </content>
        </view>
    </script>

    function($stateProvider, $urlRouterProvider) {
    // Ionic uses AngularUI Router which uses the concept of states
    // Learn more here: https://github.com/angular-ui/ui-router
    // Set up the various states which the app can be in.
    // Each state's controller can be found in controllers.js
    $stateProvider

        .state('nav', {
            url: '/nav',
            abstract: true,
            templateUrl: 'nav.html'
        })
        .state('nav.courts', {
            url: '/courts',
            views: {
                'navContent': {
                    templateUrl: "courts.html",
                    controller: 'CourtsCtrl'
                }
            }
        })
        .state('nav.week', {
            url: '/week',
            views: {
                'navContent': {
                    templateUrl: "week.html",
                    controller: 'WeekCtrl'
                }
            }
        })
        .state('nav.members', {
            url: '/members',
            views: {
                'navContent': {
                    templateUrl: "members.html",
                    controller: 'MembersCtrl'
                }
            }
        })

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/nav/courts');

#11

@andrea Yeah I see what you mean now that I’ve taken that animation off. It does look a lot bette with out the animation, much smoother.


#12

Hi! There is no codes, out of link. Could you give me a new link?