menus for Web Apps

Most mobile apps have a menu that pops out from the left or right side when you touch/click an icon with 3 horizontal lines. I'm seeing that idiom used more and more on web sites, and it seems like it would be fitting on web apps as well.

What control(s) exist to help with that?

I've been building my app with a tabbed notebook, and I'm guessing I can hide the tabs and just have that popout menu select the pages itself. Is there possibly a better way to do that?

We use this side menu approach on our WebCore apps. Also it auto hides on narrow screens and just shows an icon for each menu option.

How we do it? I have no idea as we are fully templated and my designer does all that malarky. However, I think it might be reasonably straightforward to implement in a pure (non templated app). Have 2 panels - a narrow one for the menu, aligned left and a larger one for the content aligned client.

On the menu panel have a hamburger icon that when clicked makes the left panel narrower. Add some code to pretty it up (animation maybe) and hide text and just show the icons.

Yeah, I need to hire one of those guys to make my app look nice.

I put a Panel that overlays the left side of the screen and toggles on and off, then I put some labels on it to serve as menu items. It works, but I was hoping there's something a little more appropriate.

Actually he has removed the hamburger, it just autosizes when the screen. It's done with css, not webcore though. Maybe resize the panel rather than toggle it on and off.

1 Like