LMU-SITEMAP (Standard Module )
src/app/shared/components/lmu-sitemap/templates
Demo Section
Each variation will be presented in the following section.
Readme
lmuSitemap (component)
Description
The component ‘LMU-sitemap’ is a lmu specific new Sitemap solution. The FE shows 4 layers of navigation and is nested inside a ‘nav’ - Tag. The sitemap width orientate on the width of the headline as seen in search screen page from Aperto. For HCM/tab-mode the focus-link get a border. For desktop devices the sitemap-links (layer 1-4) are active in the area of there link names. For mobile devices the sitemap-link are active in the whole area of the list line.
Requirements
Veams#5.0.0
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/lmu-sitemap
Fields
lmu-sitemap.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.lmuSitemapClasses | String | '' |
Modifier classes for component |
| settings.lmuSitemapContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.links | Array | Contains content objects with information of sitemap links |
lmu-sitemap__sublinks.hbs
Content
| Parameter | Type | Description |
|---|---|---|
| content.linkText | String | Site-Title (or menu name) of the linked page |
| content.linkHref | String | URL of the page |
| content.linkTraget | String | Targetname , could be empty: open the link in the same window or teaser |
| content.linkLevel | Int | show the sitemap-level of the link |
| content.links | Array | Contains content objects with information of sitemap-links for the sub sitemap-level |
SASS
Modifier Classes
There are modifier classes you can add to c-lmu-sitemap:
| Modifier | Description |
|---|---|
| is-level-[Number] | Css Class for a sitemap list element, [Number] contain the sitemaplevel |
| is-link-level-[Number] | Css Class for a link element, [Number] contain the sitemaplevel |
Templates
lmu-sitemap.hbs
<div class="c-lmu-sitemap{{#if settings.lmuSitemapContextClass}}--{{settings.lmuSitemapContextClass}}{{else}}--default{{/if}}{{#if settings.lmuSitemapClasses}} {{settings.lmuSitemapClasses}}{{/if}}"
data-css="c-lmu-sitemap"
data-js-module="lmu-sitemap"{{#if settings.lmuSitemapJsOptions}}
data-js-options='{{stringify settings.lmuSitemapJsOptions}}'{{/if}}>
{{#wrapWith "grid__container"}}
{{#wrapWith "grid__row"}}
<nav class="lmu-sitemap__container">
{{#if this.content.links}}
<ol class="lmu-sitemap__list">
{{#each this.content.links}}
{{> lmu-sitemap__sublinks}}
{{/each}}
</ol>
{{/if}}
</nav>
{{/wrapWith}}
{{/wrapWith}}
</div>
lmu-sitemap__sublinks.hbs
<li class="lmu-sitemap__list-item{{#if this.content.linkLevel}} is-level-{{this.content.linkLevel}}{{/if}}">
<p class="lmu-sitemap__paragraph">
{{#if this.content.linkHref}}
<a href="{{this.content.linkHref}}" {{#if this.content.linkTraget}}target="{{this.content.linkTraget}}"{{/if}} class="lmu-sitemap__link {{#if this.content.linkLevel}} is-link-level-{{this.content.linkLevel}}{{/if}}">
{{/if}}
{{this.content.linkText}}
{{#if this.content.linkHref}}
</a>
{{/if}}
</p>
{{#if this.content.links}}
<ol class="lmu-sitemap__list">
{{#each this.content.links}}
{{> lmu-sitemap__sublinks}}
{{/each}}
</ol>
{{/if}}
</li>
Data File
lmu-sitemap.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Sitemap"
},
"settings": {
"lmuSitemapContextClass": "default",
"lmuSitemapClasses": false
},
"content": {
"links": [
{
"content": {
"linkText": "Startseite",
"linkHref": "https://www.uni-muenchen.de/index.html",
"linkTraget": "",
"linkLevel": "0",
"links": [
{
"content": {
"linkText": "Studium",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "1"
}
},
{
"content": {
"linkText": "Forschung",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "1",
"links": [
{
"content": {
"linkText": "Forschung aktuell",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2"
}
},
{
"content": {
"linkText": "Profil",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2"
}
},
{
"content": {
"linkText": "Verbünde",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2",
"links": [
{
"content": {
"linkText": "Exzellenzinitiative",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
},
{
"content": {
"linkText": "DFG",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
},
{
"content": {
"linkText": "BMBF",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
},
{
"content": {
"linkText": "EU",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
}
]
}
},
{
"content": {
"linkText": "Preise",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2"
}
},
{
"content": {
"linkText": "Nachwuchsförderung",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2",
"links": [
{
"content": {
"linkText": "Promotion",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
},
{
"content": {
"linkText": "Postdoc-Phase",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
},
{
"content": {
"linkText": "Tenure Track an der LMU",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
}
]
}
},
{
"content": {
"linkText": "Publikationen",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2"
}
},
{
"content": {
"linkText": "Service",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2"
}
}
]
}
},
{
"content": {
"linkText": "Die LMU",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "1",
"links": [
{
"content": {
"linkText": "Porträt",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2"
}
},
{
"content": {
"linkText": "Auszeichnungen",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2",
"links": [
{
"content": {
"linkText": "Exzellenzinitiative",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
},
{
"content": {
"linkText": "Ars Legendi-Preis",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
},
{
"content": {
"linkText": "Leibnizpreisträger",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
},
{
"content": {
"linkText": "ERC Grants",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
},
{
"content": {
"linkText": "Humboldt-Professuren mal längerer Menüpunkt",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3"
}
},
{
"content": {
"linkText": "Nobelpreisträger",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "3",
"links": [
{
"content": {
"linkText": "Gerhard Ertl",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "4"
}
},
{
"content": {
"linkText": "Theodor W. Hänsch",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "4"
}
},
{
"content": {
"linkText": "Ernst Otto Fischer",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "4"
}
},
{
"content": {
"linkText": "Karl Ritter von Frisch",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "4"
}
},
{
"content": {
"linkText": "Feodor Lynen",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "4"
}
},
{
"content": {
"linkText": "Adolf Butenandt",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "4"
}
},
{
"content": {
"linkText": "Adolf Butenandt",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "4"
}
}
]
}
}
]
}
},
{
"content": {
"linkText": "Zahlen und Fakten",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2"
}
},
{
"content": {
"linkText": "Standorte",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2"
}
},
{
"content": {
"linkText": "Kontakt",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "2"
}
}
]
}
},
{
"content": {
"linkText": "Datenschutz",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "1"
}
},
{
"content": {
"linkText": "Impressum",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "1"
}
},
{
"content": {
"linkText": "Kontakt",
"linkHref": "#",
"linkTraget": "",
"linkLevel": "1"
}
}
]
}
}
]
}
}
}
}
Styles
lmu-sitemap.scss
/* ===================================================
component: lmu-sitemap
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-lmu-sitemap"] {
.lmu-sitemap__container {
position: relative;
@include bp($bp-tablet-p) {
@include grid-column-width(10);
}
@include bp($bp-tablet-l) {
@include grid-column-width(11);
}
@include bp($bp-desktop-l) {
@include grid-column-width(10);
}
}
.lmu-sitemap__list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
display: flex;
flex-flow: column nowrap;
overflow: hidden;
@include print() {
display: block;
}
}
.lmu-sitemap__paragraph {
overflow: hidden;
display: block;
}
.lmu-sitemap__link {
text-decoration: none;
overflow: hidden;
display: block;
position: relative;
color: $color-green;
font-size: 1.5rem;
line-height: (22/15);
font-family: $font-bold;
transition: color $animation-duration-std $animation-easing-std;
padding: 4px 0 4px 30px;
@include bp($bp-tablet-p) {
font-size: 1.6rem;
line-height: (24/16);
padding: 7px 0 7px 30px;
}
@include bp($bp-desktop-m) {
display: inline-block;
padding: 7px 7px 7px 30px;
}
@include print() {
padding: 4px 0 4px 15px;
}
&:hover,
&:focus,
&.a11y-focus-key {
color: $color-dark;
&::before {
@include pseudo();
@include sprites-icon-arrow-black();
transform: perspective(1px) translateX(5px);
}
}
&.a11y-focus-key {
outline-offset: -2px;
}
&::before {
@include pseudo();
@include sprites-icon-arrow-green100();
left: 0;
top: 7px;
transition: transform $animation-duration-std $animation-easing-std;
@include bp($bp-tablet-p) {
top: 12px;
}
@include print() {
content: "-";
top: 2px;
background-image: none;
}
}
&.is-link-level-0 {
padding: 5px 0 10px 30px;
border-bottom: 1px solid $color-green;
display: block;
@include bp($bp-tablet-p) {
padding: 8px 0 20px 30px;
}
@include print() {
padding: 5px 0 10px 15px;
}
}
&.is-link-level-1 {
color: $color-black;
}
&.is-not-translated {
opacity: 50% !important;
}
}
.lmu-sitemap__list-item {
padding: 10px 0 0;
display: block;
overflow: hidden;
&.is-level-1 {
.lmu-sitemap__list {
margin: 0 0 16px;
}
}
&.is-level-2 {
.lmu-sitemap__paragraph {
transform-origin: left;
transform: scale(.9);
width: 111.1111111111111%;
padding-left: 1%;
@include bp($bp-tablet-p) {
padding-left: 5%;
}
}
}
&.is-level-3 {
.lmu-sitemap__paragraph {
transform-origin: left;
transform: scale(.81);
width: 123.4567901234568%;
padding-left: 12%;
}
}
&.is-level-4 {
.lmu-sitemap__paragraph {
transform-origin: left;
transform: scale(.729);
width: 137.1742112482853%;
padding-left: 18%;
@include bp($bp-tablet-p) {
padding-left: 20%;
}
}
}
&.is-level-2,
&.is-level-3,
&.is-level-4 {
@include bp($bp-desktop-m) {
padding: 0;
}
.lmu-sitemap__list {
margin: 0;
}
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-lmu-sitemap--default {
}
HTML Output
Sitemap
<div class="c-lmu-sitemap--default" data-css="c-lmu-sitemap" data-js-module="lmu-sitemap">
<div class="grid__container">
<div class="grid__row">
<nav class="lmu-sitemap__container">
<ol class="lmu-sitemap__list">
<li class="lmu-sitemap__list-item is-level-0">
<p class="lmu-sitemap__paragraph">
<a href="https://www.uni-muenchen.de/index.html" class="lmu-sitemap__link is-link-level-0">
Startseite
</a>
</p>
<ol class="lmu-sitemap__list">
<li class="lmu-sitemap__list-item is-level-1">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-1">
Studium
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-1">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-1">
Forschung
</a>
</p>
<ol class="lmu-sitemap__list">
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Forschung aktuell
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Profil
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Verbünde
</a>
</p>
<ol class="lmu-sitemap__list">
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
Exzellenzinitiative
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
DFG
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
BMBF
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
EU
</a>
</p>
</li>
</ol>
</li>
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Preise
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Nachwuchsförderung
</a>
</p>
<ol class="lmu-sitemap__list">
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
Promotion
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
Postdoc-Phase
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
Tenure Track an der LMU
</a>
</p>
</li>
</ol>
</li>
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Publikationen
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Service
</a>
</p>
</li>
</ol>
</li>
<li class="lmu-sitemap__list-item is-level-1">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-1">
Die LMU
</a>
</p>
<ol class="lmu-sitemap__list">
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Porträt
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Auszeichnungen
</a>
</p>
<ol class="lmu-sitemap__list">
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
Exzellenzinitiative
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
Ars Legendi-Preis
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
Leibnizpreisträger
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
ERC Grants
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
Humboldt-Professuren mal längerer Menüpunkt
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-3">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-3">
Nobelpreisträger
</a>
</p>
<ol class="lmu-sitemap__list">
<li class="lmu-sitemap__list-item is-level-4">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-4">
Gerhard Ertl
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-4">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-4">
Theodor W. Hänsch
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-4">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-4">
Ernst Otto Fischer
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-4">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-4">
Karl Ritter von Frisch
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-4">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-4">
Feodor Lynen
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-4">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-4">
Adolf Butenandt
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-4">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-4">
Adolf Butenandt
</a>
</p>
</li>
</ol>
</li>
</ol>
</li>
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Zahlen und Fakten
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Standorte
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-2">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-2">
Kontakt
</a>
</p>
</li>
</ol>
</li>
<li class="lmu-sitemap__list-item is-level-1">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-1">
Datenschutz
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-1">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-1">
Impressum
</a>
</p>
</li>
<li class="lmu-sitemap__list-item is-level-1">
<p class="lmu-sitemap__paragraph">
<a href="#" class="lmu-sitemap__link is-link-level-1">
Kontakt
</a>
</p>
</li>
</ol>
</li>
</ol>
</nav>
</div>
</div>
</div>