While working on a public facing SharePoint website I was asked to build layout that worked well with mobile devices. For the most part I achieved this by editing the master page and then choosing which CSS file to link to based on whether or not it was the mobile page was being requested. This approach worked well for most of my content, but the standard SharePoint navigation menu was somewhat problematic in that it lays itself using tables and is rather complicated. I wanted it to be much simpler and just use a simple unordered list.
I ended up writing a custom ASP.NET control to do just that. Of course I want the new menu to respect the same visibility settings for the different links and to stay in sync with changes to the sub site names. The best way to achieve this is to use SharePoint’s built in site map. My code ended up looking like this:
And the markup: