How to create such a menu (screenshot inside)


#1

Hey guys,

do you know the Lifesum app? I found it in Apple App Store and I like the special menu very much.

Do somebody have an idea to create such a “popup” menu? It comes with an overlay when you click on the “plus-icon”.
My app should have 5 tab (like lifesum) 2 normal tabs on the left, 2 normal tabs on the right (all tabs opens normal pages) and in the middle a special-icon/tab with such an overlay.

Do you have any idea how to do it the easiest way?

If you don’t know the app, please take a look to the attached screenshots.

Thanks for your support!
Sven


#2

I think the best way to achieve this (maybe not easiest) is with CSS and JavaScript (actually TypeScript).
Seeing screenshots, it is an absolute positioned div with rgba gray background (with alpha) and high z-index (upper than other elements), five children inside it, each child another div and a label/span (or any text) and inner div with background-image: url(…); or maybe an img tag.
What I don’t know is how positioning menu button between tabs button, or if middle tab button (if five) can change its behavior of switching between pages.