Skip to content

Instantly share code, notes, and snippets.

@dubrod dubrod/MODX Nav Switch
Last active Dec 13, 2015

Embed
What would you like to do?
Switch MODX Nav from <ul> to <select> when mobile device detected.
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; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.