Zurb Foundationのメニュー - 大規模にのみ拡張？

Question

menuexpandedを大型化するにはどうすればよいですか？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> 

私は2回押してメニューを複製する必要はありません。しかし、私はそれをどのように動的に行うことができますか？

Answer 1

まず、データを整理するためにオブジェクトjsonを使用し、単にhupのhtmlの世代の動的生成のために使用することをお勧めします。

JSONに基づいてJSONデータ+ Javascriptのスクリプト、HTMLジェネレータ：JSONはJavaScriptをせずに

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]); 
 
    }