[Baxterdown]

Hi everyone, newbie here and LOVING MobiOne!

I am designing an iPad web app and would like to create navigation similar to CNN’s iPad app where the user touches a menu item (the word Headlines) and the nav bar fades into the page with a nice semi transparent background. Here’s a screen capture:

The way I am envisioning my approach is as follows:

– create a button on the title bar that when touched goes to a screen (let’s call it screen_a) via a fade transition
– create a screen with a transparent background and 300X600px panel containing list items and located on the upper left corner under the title bar of the page (this is screen_a)

In the UI, the user touches the button which “goes to” screen_a. But because screen_a is a “partial page” with a transparent background, it gives the impression of the menu appearing on top of the current page.

My questions:

– How do I create a page with a transparent background? Or is it even possible?
– Is my approach feasible? Or is there a better approach? I’m open to suggestions 🙂

Thanks in advance for your help!

Jose

[support-michael]

@Baxterdown

Any Design Center widget that has customizable color properties can include an alpha transparency value. Currently that includes panel, custom button and link. Also images with transparency are supported by the image and image-button widgets. See screenshot below for a layered UI of panel, panel w/ image background and custom-button configured with transparency. We will include more themes and color customization of the fixed widgets later this year.
See attachment gradient-ipad-example.png

Attachments:

You must be logged in to view attached files.

[Baxterdown]

Hi Wayne,

Thanks for your reply. I see what you mean… Since I am not a programmer, your approach brings up a few other questions:

– how do I make a button bring up a panel when you touch it?
– how do I keep a panel hidden and only show it when when I need to? And of course, how do I hide it after the menu selection is made?
– do I have to have the panel in every page of my app? or is there a way for the panel to be on it’s own? — which is why I thought that having the panel on a screen with a transparent background made sense…

Thanks again for your help

Jose

[Author]

Posts