Menu de la Fondation Zurb - élargi uniquement sur les grands formats?

Question

Comment est-ce que je peux faire le menuexpanded sur grand vers le haut mais align-center sur le milieu seulement?

Grande place:

<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> 

Je ne veux pas dupliquer le menu deux fois. Mais comment puis-je le faire dynamiquement?

Answer 1

D'abord, je suggère d'utiliser un objet json pour organiser les données, et l'utiliser simplement après pour la génération de dynamique de votre sortie html.

Les données Json + générateur html script Javascript basé sur 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]); 
 
    }