Mobile Kit Pro - MobileMenu

The MobileMenu control is really the main feature of Mobile Kit Pro. It was developed with the goal of making a menu that is easy to use on the small screen of a mobile phone no matter how large or deep the hierarchy of pages in the site. No matter how deep in the site hierarchy the current page that the user is viewing, they can go up the hierarchy on the menu one step at a time all the way to the root and from there all the way back down to the current page without reloading the page. Only when a link to a different page is clicked does a new page load.  On Root level pages that have no children the menu shows the root level menu items with the current page highlighted. On any page with children the menu shows the current page highlighted plus its direct child pages. It also shows a link to Go Up the menu one level at a time until it reaches the root. On non root level pages with no child pages the parent page of the current page is shown along with its child pages and the current page highlighted.

The latest version of MobileMenu also supports pages marked as unclickable in Page Settings. When a user touches the link for an unclickable page in the MobileMenu it just expands to show the child pages of the unclickable page.

The latest version of Mobile Kit Pro ships with 2 different mobile skins that both use the MobileMenu but are styled quite differently. The mobilekit_v1 skin (which was originally the only skin included) has the menu styled using jQueryUI styles, the new i7MEDIA-mobile1 skin provided for free by our friends at i7MEDIA is styled quite differently. i7MEDIA has done a lot of work for their clients styling skins for mobile so if you'd like help producing a custom mobile skin you should contact them for a quote. Otherwise if you're a web designer yourself you have the same freedom to customize the design of your mobile skin as you do for any skin. For example in the original mobilekit_v1 skin we used jQueryUI tabs to get the menu and search and login links out of the way of the content, whereas i7MEDIA did their own thing with some javascript to show the menu by clicking a menu icon and a gear icon to reveal the login  register or logout links.

If you want to use different CSS classes on the menu you can change them from theme.skin.  You need to make sure your theme.skin file has this near the top to declare the MobileMenu control

<%@ Register Namespace="sts.MobileKit.Web" Assembly="sts.MobileKit.Web" TagPrefix="mkp" %>

Then you can set any of these properties which are shown with their default values (which correspond to the jQueryUI CSS classes used in the mobilekit_v1 skin).

<mkp:MobileMenu runat="server"
    UlCssClass="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" 
    LiActiveCssClass="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-all" 
    LiCurrentCssClass="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-all" 
    LiNormalCssClass="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" 
    GoBackToCurrentSpanCssClass="ui-icon ui-icon-circle-arrow-s" 
    GoUpSpanCssClass="ui-icon ui-icon-circle-arrow-n" 
    CurrentPageSpanCssClass="ui-icon ui-icon-triangle-1-e" 
    OtherPageSpanCssClass="ui-icon ui-icon-triangle-1-e" 
/>