I’ve been working with lightCMS a lot lately for a client and was asked to also make the existing project we were working on a responsive layout. After some research I found out lightCMS isn’t the most mobile friendly even though it still is an awesome platform. Anyways you cant output the menu in sections but you can output it as a whole and choose how many levels you want to display. So I had the idea of scraping the main menu with jQuery and creating a select box menu that was mobile friendly. Here it is —- This can be altered for anything even WordPress


/*-- creates mobile navigation ---*/
var mobilenav = '';
mobilenav += '

';
$('#mobile-menu').html(mobilenav);

After that I placed a div with the ID of “mobile-menu” next to the main menu which is used at the bottom of the script it takes all of the html generated and inserts it into my mobile-menu div. Pretty simple script but effective and reusable. I also used CSS3 media queries to hide the main menu on mobile devices and display the mobile-menu div as explained over here at CSS-Tricks.

Live Demo