<nav role="navigation" class="vgr-secondary-navigation" aria-labelledby="secondary-navigation-title">
<div class="vgr-secondary-navigation__header">
<a href="/" id="secondary-navigation-title" class="vgr-secondary-navigation__header-title">Praktisk information</a>
</div>
<div class="vgr-secondary-navigation__content">
<ul>
<li>
<a href="" data-selected data-isexpanded>Allmänna kurser</a>
<ul>
<li>
<a href="#">Plus</a>
</li>
<li>
<a href="#">Grafisk</a>
</li>
<li>
<a href="#">Friluftsliv</a>
</li>
<li>
<a href="#">Silver och smycke</a>
</li>
<li>
<a href="#">Test</a>
</li>
<li>
<a href="#">Spa och hälsa</a>
</li>
</ul>
</li>
<li>
<a href="#" data-haschildren>Särskilda kurser</a>
</li>
<li>
<a href="#" data-haschildren>Sommarkurser</a>
</li>
<li>
<a href="#" data-haschildren>Distanskurser</a>
</li>
</ul>
</div>
</nav>
<nav role="navigation" class="vgr-secondary-navigation" aria-labelledby="secondary-navigation-title">
<div class="vgr-secondary-navigation__header">
<a href="{{ url }}" id="secondary-navigation-title" class="vgr-secondary-navigation__header-title">{{ title }}</a>
</div>
<div class="vgr-secondary-navigation__content">
<ul>
{% for item in items %}
<li>
<a href="{{ item.url }}"{% if item.selected %} data-selected{% if item.items %} data-isexpanded{% endif %}{% else %}{% if item.items %} data-haschildren{% endif %}{% endif %}>{{ item.title }}</a>
{% if item.selected and item.items %}
<ul>
{% for item2 in item.items %}
<li>
<a href="{{ item2.url }}"{% if item2.selected %} data-selected{% endif %}>{{ item2.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</nav>
{
"title": "Praktisk information",
"url": "/",
"items": [
{
"title": "Allmänna kurser",
"selected": true,
"items": [
{
"title": "Plus",
"url": "#"
},
{
"title": "Grafisk",
"url": "#"
},
{
"title": "Friluftsliv",
"url": "#"
},
{
"title": "Silver och smycke",
"url": "#"
},
{
"title": "Test",
"url": "#"
},
{
"title": "Spa och hälsa",
"url": "#"
}
]
},
{
"title": "Särskilda kurser",
"url": "#",
"items": [
{
"title": "Plus",
"url": "#"
}
]
},
{
"title": "Sommarkurser",
"url": "#",
"items": [
{
"title": "Plus",
"url": "#"
}
]
},
{
"title": "Distanskurser",
"url": "#",
"items": [
{
"title": "Plus",
"url": "#"
}
]
}
]
}
.secondary-navigation {
position: relative;
margin-bottom: 1.5rem;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
word-wrap: break-word;
font-family: Helvetica,Arial,sans-serif;
}
.vgr-secondary-navigation {
position: relative;
margin-bottom: 1.5rem;
border: 1px solid #ddd;
border-radius: 3px;
background-color: #fff;
word-wrap: break-word;
font-family: Helvetica,Arial,sans-serif;
display:none;
@media screen and (min-width: $medium) {
display:block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.vgr-secondary-navigation__header-title {
display: block;
margin: 0;
padding: 1rem;
font-weight: 700;
font-size: 1.125rem;
line-height: 150%;
background: #005c95;
color: #fff;
text-decoration: none;
&:focus,
&:hover { text-decoration: underline; }
}
.vgr-secondary-navigation__content li {
margin: 0;
border-top: 1px solid #ddd;
&:first-child {
border-top: none;
}
li a {
padding-left: 20px;
}
}
.vgr-secondary-navigation__content a {
position:relative;
display: block;
padding: .4em 2rem .4em .4em;
text-decoration: none;
&:focus,
&:hover {
text-decoration:underline;
}
&[data-selected]:focus {
color:#000;
}
}
.vgr-secondary-navigation__content [data-hasChildren]:after,
.vgr-secondary-navigation__content [data-isExpanded]:after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform:translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: .35rem 0 .35rem .35rem;
border-color: transparent transparent transparent #222;
}
.vgr-secondary-navigation__content [data-selected] {
background: #d7f0ff;
}
}