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.
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).
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"