Create a top menu similar to the side menu


#1

Hi

I am creating an application where I have to show the latest notifications received. This notification must appear in the form of a top menu. My idea is to create a top menu that works similarly to the side menu, and yet still did not get to do it. Can someone help, and tell me what is the best way to do this?

Thanks.


How to do a Top Menu Slide like Sidebar
#2

Have you tried looking at $ionicPopover?

here is an example


#3

Tanks @cyprusglobe, but not quite what I need. What I wanted was to spend the navbar down, and show notifications on top. Similar to what happens with the side menu.
I tested some implementations with CSS transitions, but what worked in Android did not work on iOS, and what worked in iOS did not work on Android.


#4

Hi @lribeiro, something like this?


#5

@xAlien95 this is exactly what i need.
I will try it in my project and see how it works on the devices.

I will give feedback.
Tanks.


#6

Hi @xAlien95, im using your code and run it to ios platform. But why my app just show a blank white screen?
Did i have to add some code for run it on ios?
Thank you


#7

Thanks. Not exactly what I need, but help me find the solution. :grinning:
I needed the menu after the top bar.
So I change the controller.js

$scope.toggleTopMenu = function () {
    var menu = $('ion-top-menu')[0];
    // var pane = $('ion-pane')[0];
    var pane = $('ion-view.pane[nav-view="active"] ion-content')[0];
    // $('ion-top-menu')[0].css('top'
    pane.style.top = (menu.offsetHeight==0)?(parseFloat(menu.style.top)+350)+'px':menu.style.top;
    menu.style.height = (menu.offsetHeight==0)?'350px':0;
  };



 $scope.$on('$ionicView.afterEnter', function(e) {
    if($state.current.name=='app.home')
    {
      $('ion-top-menu').css('top', $('ion-view.pane[nav-view="entering"] ion-content').css('top'));
    }
  });

#9

Hi! I am looking for something like this in Ionic 2. Do you have any sample?