Available elements

Menu

One of the most common element on iPhone and iPod Touch is the menu. WebApp.Net provides styles required to easily build menu with the look and feel of the Apple's device. All options are explained in details below.

Classic menu

A classic menu is based on a simple html list tag. It must be surrounded by a parent element with iMenu class. To add arrows to menu items just add the iArrow class to the html list tag. Item text displays on one line and text overflow is handled directly by the style sheet.

View code
Sample 2.2: menu with arrow
[div class="iMenu"]
    [h3]Menu title[/h3]
    [ul class="iArrow"]
        [li][a href="..."]Menu item 1[/a][/li]
        [li][a href="..."]Menu item 2[/a][/li]
        [li][a href="..."]Menu item 3[/a][/li]
    [/ul]
[/div]
		
View code
Sample 2.1: simple menu
[div class="iMenu"]
    [h3]Menu title[/h3]
    [ul]
        [li][a href="..."]Menu item 1[/a][/li]
        [li][a href="..."]Menu item 2[/a][/li]
        [li][a href="..."]Menu item 3[/a][/li]
    [/ul]
[/div]
		

Addtional elements

There are two additional elements that you can use in the menu items: icon and extra text. Usage of these elements is shown below, you can of course mix them.

View code
Sample 2.3: menu with extra text
[div class="iMenu"]
    [h3]Menu title[/h3]
    [ul class="iArrow"]
        [li][a href="..."][span]Text 1[/span] Menu item 1[/a][/li]
        [li][a href="..."][span]Text 2[/span] Menu item 2[/a][/li]
        [li][a href="..."][span]Text 3[/span] Menu item 3[/a][/li]
    [/ul]
[/div]
		
View code
Sample 2.4: menu with icons
[div class="iMenu"]
    [h3]Menu title[/h3]
    [ul class="iArrow"]
        [li][a href="..."][img src="..." /] Menu item 1[/a][/li]
        [li][a href="..."][img src="..." /] Menu item 2[/a][/li]
        [li][a href="..."][img src="..." /] Menu item 3[/a][/li]
    [/ul]
[/div]
		

Working with custom styles

TODO

Saturday, 20-Jun-2009 14:40:36 CEST