A bottom menu as a left menu (instead of an actionSheet)

ionic-v1
1

Hi!

(First, I’m a French developper so I’m sorry for my mistaken! And I just begin to work with ionic so maybe some question will be stupid. I try to improve myself ;))

I try to create a bottom menu displayed when we drag up. For now, I’ve got a side-menu which contains my content in a view and a div (when we dragup over this div, the bottom menu appears).

<ion-side-menus>
    <ion-pane ion-side-menu-content>
	<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
	<div class="navigation_bar" swipe-up="onSwipeUp()" style="position: absolute; bottom: 0; z-index: 99;">Navigation Bar</div>
    </ion-pane>
</ion-side-menus>

I’ve got a directive in my app.js :

.directive('swipeUp', function($ionicGesture) {
	return {
		restrict: 'A',
		link: function($scope, $element, $attr) {
			console.log($ionicGesture);
			$ionicGesture.on('dragup', function(e) {
				e.gesture.stopDetect();
				e.gesture.preventDefault();
				$scope.showActionMenu();
			}, $element);
		}
	}
})

And in my controllers.js, I’ve got a function which shows and ionicActionSheet :

$scope.showActionMenu = function() {
	$ionicActionSheet.show({
		titleText: "ActionSheetExample",
		buttons: [
			{ text: "Share" },
			{ text: "Move" },
		]
	});
}

It works: my ActionSheet is displayed but… I’m a little bit limited by this ActionSheet (I can’t display links, icons for each link) so I would lie to create a bottom menu instead of this ActionSheet.

Could you please help me? I don’t necessarily ask for a complete code, I just wanted some explanation to move on!

Thanks for reading!

Marjolaine

2

I just wanted to say that I’ve resolved my problem. I made a navbar :

<nav class="nav navbar" id="menu">
        <div class="nav navbar_top" drag-up="onDragUp()">Navigation Bar</div>
        <div class="nav navbar_content tabs" style="position: static;">
            <a href="#/app/home" class="nav tab-item">
                Retour
            </a>
            <a href="#/app/profile" class="nav tab-item">
                Profil
            </a>
            <a href="#/app/comparison" ng-click="fromGallery()" class="nav tab-item">
                Galerie
            </a>
            <a href="#/app/comparison" ng-click="fromCamera()" class="nav tab-item">
                Camera
            </a>
            <a href="#/app/reality" class="nav tab-item">
                Réalité augmentée
            </a>
            <a href="#/app/art" class="nav tab-item">
                Notices d'art
            </a>
            <a href="#/app/search" class="nav tab-item">
                Recherche
            </a>
        </div>
   </nav>

And then, I made a directive for the gestures :

.directive('dragUp', function($ionicGesture) {
	return {
		restrict: 'A',
		link: function($scope, $element, $attr) {
			$ionicGesture.on('dragup', function(e) {
				e.gesture.stopDetect();
				e.gesture.preventDefault();
				//$scope.showActionMenu();
				$element.parent().addClass('slide-in-up');
			}, $element);
		}
	}
})
3

Pretty cool, you should throw into a complete codepen and post it as a demo :smile:

4

Yes, you’re right. Here is the codepen for the example!

5 Likes
5

Fantastic!! Any solution for ionic 2 and up?