<div class="c-meta-menu">
<section class="c-meta-menu__section">
<a href="#" class="c-meta-menu__link">
<h3 class="c-meta-menu__section-title u-h6">Vermarktung</h3>
</a>
<nav>
<ul class="c-meta-menu__list o-list-bare">
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Private Kunden</a>
</li>
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Gewerbliche <br/>Kunden</a>
</li>
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Digitale Werbung</a>
</li>
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Mediadaten</a>
</li>
</ul>
</nav>
</section>
<section class="c-meta-menu__section">
<a href="#" class="c-meta-menu__link">
<h3 class="c-meta-menu__section-title u-h6">Verlag</h3>
</a>
<nav>
<ul class="c-meta-menu__list o-list-bare">
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Ausbildung</a>
</li>
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Jobs</a>
</li>
</ul>
</nav>
</section>
<section class="c-meta-menu__section">
<a href="#" class="c-meta-menu__link">
<h3 class="c-meta-menu__section-title u-h6">Services</h3>
</a>
<nav>
<ul class="c-meta-menu__list o-list-bare">
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Alexa-Skill</a>
</li>
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Leserreisen</a>
</li>
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Push-Nachrichten</a>
</li>
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Tägliche Rätsel</a>
</li>
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Veranstaltungen</a>
</li>
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">WhatsApp-Newsletter</a>
</li>
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">Archiv</a>
</li>
</ul>
</nav>
</section>
</div>
<div class="c-meta-menu">
{% for section in sections %}
<section class="c-meta-menu__section">
<a href="#" class="c-meta-menu__link">
<h3 class="c-meta-menu__section-title u-h6">{{ section.title }}</h3>
</a>
<nav>
<ul class="c-meta-menu__list o-list-bare">
{% for item in section.navItems %}
<li class="c-meta-menu__item">
<a href="#" class="c-meta-menu__link">{{ item }}</a>
</li>
{% endfor %}
</ul>
</nav>
</section>
{% endfor %}
</div>
{
"sections": [
{
"title": "Vermarktung",
"navItems": [
"Private Kunden",
"Gewerbliche <br/>Kunden",
"Digitale Werbung",
"Mediadaten"
]
},
{
"title": "Verlag",
"navItems": [
"Ausbildung",
"Jobs"
]
},
{
"title": "Services",
"navItems": [
"Alexa-Skill",
"Leserreisen",
"Push-Nachrichten",
"Tägliche Rätsel",
"Veranstaltungen",
"WhatsApp-Newsletter",
"Archiv"
]
}
]
}
.c-meta-menu {
display: flex;
&__section {
/*
position: relative;
width: 33.3333%;
float: left;
*/
flex: 1 1 33.3333%;
}
&__item {
margin-bottom: .75em;
}
&__link {
border-bottom-width: 0;
color: $color-black;
&:active,
&:focus,
&:hover {
color: $color-grey-light;
@include transition(color);
}
}
}
There are no notes for this item.