Zurb Foundation menu - expanded on large up only?

Question

How can I make the menu expanded on large up but align-center on medium only?

Large up:

<ul class="menu expanded">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
</ul>

Medium:

<ul class="menu align-center>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
</ul>

I don't want to duplicate the menu twice. But how can I do it dynamically?

Answer 1

First i suggest to use an object json to organized data, and use it simply after for the generation dynamic of you ouput html.

The Json data + Javascript script html generator based on json : json to html

var content_li = [{"type":"li",
                   "content":[{"type":"a","content":["One"],"attributes":{"href":"#"}}]
                  },
                  {"type":"li",
                   "content":[{"type":"a","content":["Two"],"attributes":{"href":"#"}}]
                  }
                 ];
    var content_ul_expanded = {"type":"ul",
                 "content": content_li,
                 "attributes":{"class":"menu expanded"}
                };

    var content_ul_aligned = {"type":"ul",
                 "content": content_li,
                 "attributes":{"class":"menu align-center"}
                };

    var json_data = [content_ul_expanded, content_ul_aligned];
    //console.log(json_data);
    var body = document.body;
    var ul = [];
    var li = [];
    var a = [];

    for(var i in json_data){
      //console.log(json_data[i]);
      ul[i] = document.createElement(json_data[i].type);
     // console.log(json_data[i].attributes.class);
      ul[i].className = json_data[i].attributes.class;
      for(var j in json_data[i].content){
        //console.log(json_data[i].content[j]);
        li[j] = document.createElement(json_data[i].content[j].type);
        a[j] = document.createElement(json_data[i].content[j].content[0].type);
        a[j].href = json_data[i].content[j].content[0].attributes.href;
        a[j].textContent = json_data[i].content[j].content[0].content[0];
        li[j].appendChild(a[j]);
        ul[i].appendChild(li[j]);
      }
      body.appendChild(ul[i]);
    }