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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*-- creates mobile navigation ---*/
  var mobilenav = '';
  mobilenav += '<select>';
  $('#menu .topNav li:not(ul.level2 li)').each(function(){
    var name = '';
    var link = '';
                //while going through each list item checks if the list-item has the class "hasChildren"
                //if it has children elements it creates an optgroup and then ouputs the children as options
    if($(this).hasClass('hasChildren')){
      name = $(this).children('a').text();
      link = $(this).children('a').attr("href");
      mobilenav += '<optgroup label="' + name + '">';
      mobilenav += '<option value="' + link + '">' + name + '</option>';
      $(this).find('ul.level2 li').each(function(){
        var subname = $(this).children('a').text();
        var sublink = $(this).children('a').attr("href");
        mobilenav += '<option value="' + sublink + '">' + subname + '</option>';
      });
      mobilenav += '</optgroup>';
    }else{
      name = $(this).children('a').text();
      link = $(this).children('a').attr("href");
      mobilenav += '<option value="' + link + '">' + name + '</option>';
    }
  });
  mobilenav += '</select>';
  $('#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