Hi,
I am creating a mobile app with bottom bar icons at the bottom. The 1st bottom bar item should be like the 3 horizontal stripes menu while the remaining bottom bar items on the right side icons, navigating to other pages.
When clicking on the 3 horizontal stripes a menu should slide up (like in Windows 7 menu). I want the menu just being the height of the available menu options in it and not to the top of the screen. I guess i can set the height of this in css.
How can i accomplish such a menu?
I made a block of such a menu and thought mayb some javascript must be involved to show and hide it when clicked on the 3 horizontal lines...
Thanks for your help/advice.
Hi Kenneth
If I understood, you want something like this
To achieve this result use Popover Widget inside BottomBarItem Block, and use this simple css.
.bottom-bar > a, .bottom-bar > div, .bottom-bar-item { overflow: visible; }
I hope this helps you
Regards,
José Rosário
Hi Jose,
Thanks for your help.
However i am encountering 2 problems now.
1. How can i have the popup automatically cover the full width of the screen? Css styling is ignored, even with !important. I have included some links as menu in the popup. Height of the popup is fine.
2. How can i have the popup anker at the top left corner of the bottombar container? Any screen resoltution change will cause it to be on another position.
Thanks.
Kenneth.
Try this CSS, and you will achieve something like this I hope.
[data-popover] > .popover-bottom { position: fixed; width: 100%; bottom: 60px; }
Sorry for the late response.
Thanks again for your help. I will try it out.