• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

Published on Thursday, April 14, 2011

Using ASP.NET Site Maps with 51Degrees.mobi to Create Mobile Menus

Introduction

Vertical menus are an increasingly popular method of presenting primary navigation for mobile phones. The screen shot below shows the kind of design we mean.

Designers want nice big buttons, that are easy to select, consistently styled and importantly that display really quickly. With 51Degrees.mobi there's a solution that addresses all 3 of these challenges. Read on to find out more.

Solution

This menu button design is made up of 3 components. An image icon, text and the background. Many designers will create unique images that encompass all of these components. Such a solution is difficult to maintain consistently over time, fonts will be inconsistent, button images can become distorted and will have different sizes depending on the mobile device. All the repeated image data will take a long time to load in the bandwidth constrained world of mobile.

An alternative approach is to create the button using an image, hyperlink and background control. For compatibility across difference mobile devices the best container and background to use is a table control with two cells, one for the image icon and the other for the text and hyper link. These standard ASP.NET components are enhanced with 51Degrees.mobi in to important ways for this solution:

  1. The image for the icon is sized precisely to fit into the area required in the menu. Therefore multiple, or one larger, icon file(s) can be provided and the icon will shrink down to the required size automatically without additional image data being send over the network. This results in the image loading quickly.
  2. The table control needs to be styled with rounded corners and a gradient background. No consistent solution exists for all mobile devices. The 51Degrees.mobi style control can be used to dynamically create the correct CSS information to achieve the best result on all platforms.

Site Maps

A further consideration is where to provide the data for the icons, text and navigation urls. This information could be hard coded into each page which would work, but is time consuming and inelegant. The answer is ASP.NET's Site Maps feature. Site Maps enable a simple XML document, usually called web.sitmap, to define all the navigation of the web site. The XML used with 51Degrees.mobi's mobile site is shown below as an example.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="MobileWebApplication4.WebUserControl1" %>
 
<script runat="server" type="text/C#">
  
    /* Configure the dimensions of your menu items here. */
      
    public Unit Height = new Unit(2.5, UnitType.Em);
  
    internal Unit Width { get { return Height; } }
    internal Unit Gap { get { return new Unit(Height.Value * 0.3, Height.Type); } }
    internal Unit ImageWidth { get { return new Unit(Width.Value * 0.8, Width.Type); } }
    internal Unit ImageHeight { get { return new Unit(Height.Value * 0.8, Height.Type); } }
      
</script>
  
<%--Data source control for the menu information set to retrieve menu information relevent to the current page.--%>
<asp:SiteMapDataSource ID="SiteMapDataSourceMenu" runat="server" StartFromCurrentNode="true" ShowStartingNode="false" StartingNodeOffset="-1" />
  
<%--Data list used to display the menu items from the data source.--%>
<mob:DataList runat="server" ID="DataListMenu" DataSourceID="SiteMapDataSourceMenu" AllowPaging="false" Width="80%" Style="margin: 0px auto;" CellPadding="0" CellSpacing="4" RepeatLayout="Table" CssIncludeGroup="Menu">
    <ItemTemplate>
        <mob:Table runat="server" ID="PanelMenuItem" StyleID="StyleMenuItemBackground" CellPadding="0" CellSpacing="2" Height='<%# Height %>' BorderColor="Gray" BorderStyle="Solid" BorderWidth="2px" BackColor="#909cb3" Width="100%">
            <mob:TableRow runat="server" ID="TableRowMenuItem">
                <mob:TableCell runat="server" ID="TableRowMenuItemImage" Width='<%# Width %>' Height='<%# Height %>' VerticalAlign="Middle" HorizontalAlign="Center">
                    <mob:HyperLink runat="server" ID="HyperLinkMenuIcon" ImageURL='<%# "~/Images/" + Eval("title") + ".png" %>' Height='<%# ImageHeight %>' Width='<%# ImageWidth %>' CalculateSizeMode="ClientHeight" NavigateUrl='<%# Eval("url") %>' Style="text-decoration: none;" />
                </mob:TableCell>
                <mob:TableCell runat="server" ID="TableCellMenuItemSpacer" Width='<%# Gap %>' />
                <mob:TableCell runat="server" ID="TableCellMenuItemLabel">
                    <mob:HyperLink runat="server"  ID="HyperLinkMenuText" Text='<%# Eval("description") %>' ForeColor="White" NavigateUrl='<%# Eval("url") %>' Width="100%" Style="text-decoration: none;"/>
                </mob:TableCell>
            </mob:TableRow>
        </mob:Table>
    </ItemTemplate>
</mob:DataList>
      
<%--Style controls used to control the menu items based on the browser capabilities.--%>
<mob:Style runat="server" ID="StyleMenuItemBackground">
    <mob:Filter Property="IsMobileDevice" Method="Equals" Value="False">
        <mob:Filter Property="deviceid" Method="Contains" Value="firefox" Style="-moz-border-radius: 0.5em; background-image: -moz-linear-gradient( top, #b2bbca 0%, #909cb3 50%, #8593ac 50%, #73839f 100%);"/>
        <mob:Filter Property="IsMobileDevice" Method="Equals" Value="False" Style="border-radius: 0.5em; background-image: url('Images/GradientBackground.svg');"/>
    </mob:Filter>
    <mob:Filter Property="Platform" Method="Regex" Value="Android|iPhone OS" Style="-webkit-border-radius: 0.5em; background-image: -webkit-gradient(linear, left top, left bottom, from(#b2bbca), to(#73839f));"/>
    <mob:Filter Property="Platform" Method="Equals" Value="webOS" Style="border-radius: 0.5em;"/>
    <mob:Filter Property="Platform" Method="Equals" Value="Windows Phone OS" Style="background-image: url('Images/GradientBackground.svg');"/>
</mob:Style>

The above ASP.NET contains 4 major sections.

 

  1. The code block at the top defines the size information for the control. I've made everything scale based on the desired height, but you can change it to use any suitable method.
  2. The SiteMap data control.
  3. A mobile DataList bound to the SiteMap used to display the menu items in a table. Each menu items are also a table with two cells. I've used a table because it's the most compatible method of layout information like this.
  4. The Style block at the bottom is used to determine the CSS to apply to the menu item to determine the background and the border radius. Three methods of providing a gradient background are shown:
    1. Mozilla linear gradients.
    2. Webket gradients.
    3. Using an SVG file to provide the gradient.

Most IIS configurations do not enable SVG files to be downloaded by default. Therefore you may need to add the following to the system.webserver section of the web.config file.

<staticContent>
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
staticContent>

Finally you'll need to add the user control to all the pages that have navigation links. Just add the user control reference at the top of the aspx page.

 

<%@ Register Src="~/Menu.ascx" TagPrefix="uc" TagName="Menu" %>

Then place the control on the page.

<uc:Menu runat="server" ID="MenuPage" Height="2em" />

When the ASPX page is loaded the SiteMap data source will work out the relevant navigation links. The 51Degrees.mobi DataList and Style controls will do the rest.

Conclusion

Site Maps provide a very easy and simple method to configure flexible navigation. When combined with 51Degrees.mobi mobile navigation can be implemented quickly and easily for all mobile device types. Probably quicker to set-up than the time required to create 15 separate menu images and you'll avoid all the pain of maintenance and poor performance.

Happy mobile navigating.

Comments (0)

Author: Products Team

Categories: Development

Tags: Mobile

James Rosewell
>

Products Team

Other posts by Products Team
Contact author

Name:
Email:
Subject:
Message:
x

Tags

.NET 2013 2014 4G 51Degrees 5G A.C.Roma A7 ABI Acer Affiliate Marketing Alcatel Amazon AMP Analysis Analytics Android Android 5.0 Lollipop Android Kitkat Android Lollipop Android Media Stick Apache API Apple Apple TV Archos Asha Asian Market ASP.NET Asus Australia Big Data Black Friday Blackberry Blink Browser C C# Case Study CeBIT CES Chrome Cloud CMS combinations Comparison Competition CoolPad COTW Cron CSS3 Data Data Blog Data File Data Model Daydream Denver Design Desire Eye Desktop Detection Device Device Data Device Detection Device Intelligence Device Popularity Device property Device Types Device Use Display DoCoMo Doogee DotNetNuke Download Drupal Email EReader E-Reader Ericsson Evaluation Event Examples EXPLAY Rio Facebook feature Firefox Firefox OS Fly Foundation Framework France Galaxy S3 Galaxy S5 Galaxy Tab A Galaxy Tab A 8.0 Galaxy Tab A 9.7 Germany Global Google Google Daydream GSMA HAProxy Hardware Hisense HTC HTC ONE MAX HTC OS HTML5 HTTP Huawei HUAWEI. UPDATE HUDL Huwaei IBC Icemobile Prime 4.0 IE IFA IIS Image Optimiser Image Optimizer India Infographic Ingeniux Internet usage iOS iOS 7 iOS 8 ipad iPhone iPhone 6 IsEmailBrowser IsWebApp Italy Japan Java Javascript Jolla Kentico Keynote Kindle Kindle Fire Kindle Fire HD Leagoo Lenovo LG Location Log File Analysis LTE Lumia Map Memory Meta Data Mi 4S Micromax Microsoft Miia Style Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Module Motorola MVC4 MWC MWC 2017 MWC16 MyPhone Native NET New Release News News Letter Nexus Nexus 6 Nexus 9 NFC NGINX Nokia Non-Mobile NVIDIA Omate On7 Opera Opera Mini Operating System Optimisation OS OSX 10.10 OTA Panasonic Patent PC Pebble Performance phablet phone PHP Poland Presentation Press Release Price Band PRIV PS4 Python QMobile QR Codes Redirection Research Reseller Responsive Images RESS Review reviews RIM Ringmark RWD Samsung Scala Screen Screen resolution Screen Size SEO Server Set Box Set Top Box Sharepoint Shark 1 SHIFT phones Sitecore SLUSH Smart TV Smartphone Smartphones Smartwatches Snapdragon Sony Sony Xperia Spain Swedish Beers Symbian Tablet Tablets Tesco Testing Top 5 TOTW TV UDS UK Umbraco Update updates US User Agent UserAgent User-Agent Vendors Version 3 VoLTE VR Wearable Web WebKit WebMatrix White Paper Widgets Widnows WiFi Wiko Wileyfox Windows Windows Phone Xbox XBox One Xiaomi Xperia Xperia z Yosemite Z10 ZenFon 2 ZOPO ZTE