Orchard Mobile Navigation

Topics: Customizing Orchard, Troubleshooting, Writing themes
Apr 8, 2013 at 6:36 PM
I am building out a site in Orchard utilizing the built-in menu/navigation module on my template - this works exactly as I would expect. The template that was designed by my graphic artist includes a mobile version of the navigation which is in a standard <select /> tag like so:
<select name="select" onChange="MM_jumpMenu('parent',this,1)">
    <option value="#" selected>Menu</select>
    <option value="/about">About Us</select>
    <option value="/history">--History</select>
How can I replicate this on my page with the existing menu/navigation module? Basically the menu currently generates in <ul /> form at the top for desktop/tablet visitors (which I need to keep) and that section is hidden for mobile viewers with a select list shown in its place. I can visualize the Razor syntax necessary, but can't visualize how to access the menu object(s) to loop through them and put them into here.
Apr 9, 2013 at 1:56 PM
You could override the Menu.cshtml view and iterate over the Items collection of the Model.
From the top of my head, each Item represents a menu item. Use the debugger to inspect the object model.
In this view, you can render both the UL (as is the default) and the select element.