Switch MODX Nav from <ul> to <select> when mobile device detected.

MODX Nav Switch

Change Nav UL to Select when Mobile.

System Settings: Turn off resource and snippet caching. cacheable default is none. no pages can be cached.

1. add mobile_device_detect.php to the root folder



2. make sure jquery is called at the top of every page

<script src="http://code.jquery.com/jquery.js"></script>



3. New snippet [[navswitch]]


<?php
require_once('mobile_device_detect.php');
if($mobile_browser){ ?>

<script>
$(function(){$("nav select").change(function() {window.location = $(this).find("option:selected").val();});});
</script>

<nav><select><option value="">NAVIGATION</option>[[Wayfinder? &startId=`0` &outerTpl=`navOutTpl` &rowTpl=`mobilerowTpl`]]</select></nav>


<? } else { ?> 

<nav><ul>[[Wayfinder? &startId=`0` &outerTpl=`navOutTpl`]]</ul></nav>

<? } ?>



4. create a chunk called: navOutTpl

[[+wf.wrapper]]


5. create a chunk called: mobilerowTpl

<option [[+wf.id]][[+wf.classes]] value="[[+wf.link]]">[[+wf.linktext]][[+wf.wrapper]]</option>



6. Add Full Width CSS

/*NAV*/  
nav select{width:100%; padding: 10px 0;}
nav select option{ padding: 10px 0; vertical-align:middle; text-transform: uppercase; }