Zurb Foundation 菜单 - 仅向上扩展？

Question

我怎样才能让 menu expanded 大号但 align-center 只在中号？

大上：

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

中：

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

我不想将菜单复制两次。但是我怎样才能动态地做到这一点？

Answer 1

首先我建议使用一个对象json来组织数据，并在你生成动态输出后使用它html。

Json数据+Javascript脚本html生成器基于json：json到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]);
    }

Zurb Foundation 菜单 - 仅向上扩展？

Zurb Foundation menu - expanded on large up only?

html

css

zurb-foundation

zurb-foundation-6