Skip to content

Instantly share code, notes, and snippets.

@zacharyabresch

zacharyabresch/_global.json

Created September 30, 2013 18:36
Show Gist options
  • Save zacharyabresch/6768113 to your computer and use it in GitHub Desktop.
Save zacharyabresch/6768113 to your computer and use it in GitHub Desktop.
Download ZIP
Example of navigation built from JSON in mixture ... for demonstration to Team Mixture to see if there's a way to abstract this. Right now it's frakkin ugly!!
Raw
_global.json
{
"version": "4.3.0",
"navigation" : [
{
"name": "Services",
"slug": "services",
"sub-nav": [
{
"name": "Data Center Services",
"slug": "data-center-services",
"sub-nav": [
{
"name": "Colocation",
"slug": "colocation"
},
{
"name": "Disaster Recovery",
"slug": "disaster-recovery"
},
{
"name": "Compliance",
"slug": "compliance"
}
]
},
{
"name": "Cloud Services",
"slug": "cloud-services",
"sub-nav": [
{
"name": "ION Cloud Services",
"slug": "ion-cloud-services"
},
{
"name": "Enterprise Cloud Services",
"slug": "enterprise-cloud-services"
},
{
"name": "Managed Cloud Services",
"slug": "managed-cloud-services"
},
{
"name": "Hybrid Cloud Services",
"slug": "hybrid-cloud-services"
},
{
"name": "Compliant Cloud Services",
"slug": "compliant-cloud-services"
},
{
"name": "Disaster Recovery Cloud Services",
"slug": "disaster-recovery-cloud-services"
},
{
"name": "Virtual Networking Cloud Services",
"slug": "virtual-networking-cloud-services"
}
]
},
{
"name": "Managed Services",
"slug": "managed-services",
"sub-nav": [
{
"name": "Technical Help Desk Services",
"slug": "technical-help-desk-services"
},
{
"name": "Monitoring",
"slug": "monitoring"
},
{
"name": "Server Management",
"slug": "server-management"
},
{
"name": "Managed Hosting",
"slug": "managed-hosting"
},
{
"name": "Data Backup Services",
"slug": "data-backup-services"
},
{
"name": "Data Recovery Services",
"slug": "data-recovery-services"
},
{
"name": "Data Replication Services",
"slug": "data-replication-services"
},
{
"name": "Disaster Recovery Services",
"slug": "disaster-recovery-services"
},
{
"name": "Security Services",
"slug": "security-services"
},
{
"name": "Compliance Services",
"slug": "compliance-services"
}
]
}
]
},
{
"name": "Resources",
"slug": "resources",
"sub-nav": [
{
"name": "News",
"slug": "news"
},
{
"name": "Blog",
"slug": "blog"
},
{
"name": "Videos",
"slug": "videos"
},
{
"name": "Events",
"slug": "events"
},
{
"name": "Learning",
"slug": "learning"
}
]
},
{
"name": "About",
"slug": "about",
"sub-nav": [
{
"name": "Leadership",
"slug": "leadership"
},
{
"name": "History",
"slug": "history"
},
{
"name": "Recognition",
"slug": "recognition"
},
{
"name": "Data Centers",
"slug": "data-centers"
}
]
},
{
"name": "Contact",
"slug": "contact",
"sub-nav": [
{
"name": "Careers",
"slug": "careers"
}
]
}
]
}
Raw
nav.liquid
<ul class="left">
<li class="divider"></li>
{% for item in global.navigation %}
{% if item.name != "Contact" %}
{% capture path %}/{{ item.slug }}{% endcapture %}
<li class="{% if item.sub-nav %}has-dropdown{% endif %}">
<a href="{{ path }}">{{ item.name }}</a>
{% if item.sub-nav %}
<ul class="dropdown">
{% for subnavitem in item.sub-nav %}
{% capture path2 %}{{ path }}/{{ subnavitem.slug }}{% endcapture %}
<li class="divider"></li>
<li class="{% if subnavitem.sub-nav %}has-dropdown{% endif %}">
<a href="{{ path2 }}">{{ subnavitem.name }}</a>
{% if subnavitem.sub-nav %}
<ul class="dropdown">
{% for subnavitem2 in subnavitem.sub-nav %}
{% capture path3 %}{{ path2 }}/{{ subnavitem2.slug }}{% endcapture %}
<li class="divider"></li>
<li class="{% if subnavitem2.sub-nav %}has-dropdown{% endif %}">
<a href="{{ path3 }}">{{ subnavitem2.name }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
<li class="divider"></li>
{% endif %}
{% endfor %}
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment