-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnavigation-full-screen.html
64 lines (48 loc) · 18.7 KB
/
navigation-full-screen.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html><html lang="de"><head><title>Navigation Full Screen | Designsystem der Stadtwerke Münster</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="title" content="Navigation Full ScreenDesignsystem"><meta name="description" content=""><meta name="keywords" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="index,follow"><meta name="author" content="Autor"><meta name="publisher" content="Publizist"><meta property="og:site_name" content="Designsystem der Stadtwerke Münster"><meta property="og:url" content="https://swmue.brandsites.denavigation-full-screen.html"><meta property="og:title" content="Navigation Full Screen"><meta property="og:description" content=""><meta property="og:image" content="https://swmue.brandsites.deassets/picts/default.png"><meta property="og:locale" content="de_DE"><meta property="og:language" content="de"><link rel="apple-touch-icon" sizes="180x180" href="assets/fav/apple-touch-icon.png?v=1637680488962"><link rel="icon" type="image/png" sizes="32x32" href="assets/fav/favicon-32x32.png?v=1637680488962"><link rel="icon" type="image/png" sizes="16x16" href="assets/fav/favicon-16x16.png?v=1637680488962"><link rel="manifest" href="assets/fav/site.webmanifest?v=1637680488962"><link rel="shortcut icon" href="assets/fav/favicon.ico?v=1637680488962"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-TileImage" content="assets/fav/mstile-144x144.png?v=1637680488962"><meta name="msapplication-config" content="assets/fav/browserconfig.xml?v=1637680488962"><meta name="theme-color" content="#ffffff"><link rel="stylesheet" href="assets/css/app.bundle.css"><link rel="stylesheet" href="assets/css/ide-editmode.css"><script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="a2857e8c-8bbc-45fa-baf6-0d0986cb44f6" type="text/javascript" async></script><script>
let bots = new RegExp('/bot|slurp|crawler|spider|crawling/i');
if (!bots.test(navigator.userAgent)) {
let css = '[data-animate]{opacity:0;}';
let style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
}
</script><script>if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) document.write('<script>document.createElement("picture");<\/script><script src="/assets/js/picturefill.min.js" async><\/script>');</script></head><body><header></header><main><script>
if (!window.log) {
const log = console.log.bind(window)
window.addEventListener('load', (event) => {
return
log('a')
function adjustButton(menu) {
let menuButtons = menu.querySelector('.main-navigation-mobile')
let button = menu.querySelector('[data-name="times-solid"], [data-name="bars-solid"]')
if (!button) return
log('xB', button)
if (menuButtons && menuButtons.classList.contains('c-navigation--visible')) {
log('is not vis')
button.dataset.name = 'times-solid'
button.querySelector('i').className = 'ic ic__times-solid'
} else {
log('is visible')
button.dataset.name = 'bars-solid'
button.querySelector('i').className = 'ic ic__bars-solid'
}
}
document.querySelectorAll('.c-navigation').forEach(menu => {
let menuButtons = menu.querySelector('.main-navigation-mobile')
let xButton = menu.querySelector('[data-name="times-solid"], [data-name="bars-solid"]')
if (!xButton) return
adjustButton(menu)
xButton.addEventListener('click', (button) => {
button.preventDefault()
menu.querySelector('.main-navigation-mobile').classList.toggle('c-navigation--visible')
adjustButton(menu)
})
})
});
}
</script><div class="c-navigation" role="tablist"><div class="meta-menu"><a href="#" class=""><i class='ic ic__home-solid'></i></a> <a href="#" class=" c-navigation--active">Zuhause</a> <a href="#" class="">Unterwegs</a> <a href="#" class="">Unternehmen</a> <a href="#" class="">Geschäftskunden</a> <a href="#" class="">Karriere</a> <a href="#" class="">Magazin</a> <a href="#" class="">PlusCard</a></div><div class="main-navigation "><span class="logo"><span class="left"><figure class="c-picture"><picture> <img src="assets/img/logo-cyan.svg" alt="Logo"></picture></figure></span> <span class="badge"><span class="c-badge c-badge--round">Zuhause</span></span></span> <span class="links"><a href="#" class="">Energie</a> <a href="#" class=" c-navigation--active">Internet</a> <a href="#" class="">Trinkwasser</a> <a href="#" class="">Service & Beratun</a> <a href="#" class="">Nachhaltigkeit</a></span><span class="button-container"><a href="#" class=""><i class='ic ic__envelope'></i></a><a href="#" class=""><i class='ic ic__user'></i></a><a href="#" class=""><i class='ic ic__shopping-cart-solid'></i></a></span></div><div class="main-navigation-mobile"> <span class="links "><a href="#" class=""><span>Energie</span><span class='icons__item' data-name='angle-right-solid'><i class='ic ic__angle-right-solid'></i></span></a> <a href="#" class=" c-navigation--active"><span>Internet</span><span class='icons__item' data-name='angle-right-solid'><i class='ic ic__angle-right-solid'></i></span></a> <a href="#" class=""><span>Trinkwasser</span><span class='icons__item' data-name='angle-right-solid'><i class='ic ic__angle-right-solid'></i></span></a> <a href="#" class=""><span>Service & Beratun</span><span class='icons__item' data-name='angle-right-solid'><i class='ic ic__angle-right-solid'></i></span></a> <a href="#" class=""><span>Nachhaltigkeit</span><span class='icons__item' data-name='angle-right-solid'><i class='ic ic__angle-right-solid'></i></span></a></span><span class="meta-menu-mobile"><a href="#" class=""><i class='ic ic__home-solid'></i></a> <a href="#" class=" c-navigation--active">Zuhause</a> <a href="#" class="">Unterwegs</a> <a href="#" class="">Unternehmen</a> <a href="#" class="">Geschäftskunden</a> <a href="#" class="">Karriere</a> <a href="#" class="">Magazin</a> <a href="#" class="">PlusCard</a></span></div></div><div class="c-section"><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-8"><div class="c-text c-markdown"></div></div></div></div></div><div class="c-section p-2"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-text"><h2><strong>Überschrift A</strong></h2><p><strong>Bildblöcke 6/6</strong></p></div></div></div></div><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-6"><figure class="c-picture"><picture><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 480px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 576px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 656px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 768px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 992px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 1200px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 1440px)"> <img src="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" alt=""></picture></figure></div><div class="g-col-12 g-col-tp-6 mt-mw-auto-3 mt-mw-auto"><figure class="c-picture"><picture><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 480px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 576px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 656px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 768px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 992px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 1200px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 1440px)"> <img src="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" alt=""></picture></figure></div></div></div><div class="g-container mt-1"><div class="g-row"><div class="g-col-12"><p><strong>Bildblöcke 4/4/4</strong></p></div></div></div><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-4 mb-mw-auto-3 mb-1"><figure class="c-picture"><picture><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 480px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 576px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 656px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 768px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 992px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 1200px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 1440px)"> <img src="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" alt=""></picture></figure></div><div class="g-col-12 g-col-tp-4 mb-mw-auto-3 mb-1"><figure class="c-picture"><picture><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 480px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 576px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 656px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 768px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 992px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 1200px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 1440px)"> <img src="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" alt=""></picture></figure></div><div class="g-col-12 g-col-tp-4 mb-mw-auto-3 mb-1"><figure class="c-picture"><picture><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 480px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 576px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 656px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 768px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 992px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 1200px)"><source srcset="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" media="(max-width: 1440px)"> <img src="assets/picts/Stadtwerke-MS_INNENSTADT_20211027_091582.jpg" alt=""></picture></figure></div></div></div><div class="g-container mt-1"><div class="g-row"><div class="g-col-12"><h2><strong>Rounded</strong></h2></div></div></div><div class="g-container"><div class="g-row"><div class="g-col-12 g-col-tp-4 mb-1"><figure class="c-picture c-picture--rounded"><picture> <img src="assets/picts/avatar.jpg" alt=""></picture></figure></div></div></div><div class="g-container"><div class="g-row"><div class="g-col-12 g-offset-tp-8 g-col-tp-4 mb-1"><figure class="c-picture c-picture--rounded"><picture> <img src="assets/picts/avatar.jpg" alt=""></picture></figure></div></div></div></div><aside class="sidebar"><nav class="c-side-nav"> <button class="c-side-nav__nav-toggle" id="c-side-nav__toggle"><span class="c-side-nav__toggle-icon"></span></button><div class="c-side-nav__picture-wrapper"><a class="c-side-nav__picture-link" href="/"><div class="c-picture"> <img alt="Logo" src="assets/img/logo.svg"> <span class="c-badge" style="
position: absolute;
left: 101px;
bottom: -10px;
">v1.0.0</span></div></a><div class="c-cta-group"> <a class="c-cta" href="https://github.com/wirDesign-communication-AG/stadtwerke-muenster-design-system" target="_blank"><span class="c-cta__text">GitHub</span></a> <a class="c-cta" href="https://www.figma.com/file/wLXdixPS3eSOEmOtvxj6Jg/SWMS-?node-id=0%3A1" target="_blank"><span class="c-cta__text">Figma</span></a></div><div class="c-cta-group c-filter"><span class="c-input-wrapper " data-action="wrapper"><div class="c-input__container"> <input autofocus class="c-input c-filter__input" type="search" name="input" id="input" aria-label="Componentenfilter. Bitte Text eintragen." placeholder="Filter Components..."></div></span></div></div><div class="c-side-nav__nav-wrapper"><ul><li><p>Introduction</p><ul><li> <a class="" href="index.html" title="Overview">Overview</a></li><li> <a class="" href="getting-started.html" title="Getting Started">Getting Started</a></li><li> <a class="" href="accessibility.html" title="Accessibility">Accessibility</a></li><li> <a class="" href="principles.html" title="Principles">Principles</a></li><li> <a class="" href="theming.html" title="Theming">Theming</a></li></ul></li><li><p>Basics</p><ul><li> <a class="" href="animation.html" title="Animation">Animation</a></li><li> <a class="" href="colors.html" title="Colors">Colors</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/colors.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-primary" data-anchor="color-primary" title="Primary">Primary</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-secondary" data-anchor="color-secondary" title="Secondary">Secondary</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-special" data-anchor="color-special" title="Special">Special</a></li><li> <a class="c-side-nav__section-link" href="/colors.html#color-backgrounds" data-anchor="color-backgrounds" title="Backgrounds">Backgrounds</a></li></ul></li><li> <a class="" href="graphics.html" title="Graphics">Graphics</a></li><li> <a class="" href="layout.html" title="Layout">Layout</a></li><li> <a class="" href="icons.html" title="Icons">Icons</a></li><li> <a class="" href="logo.html" title="Logo">Logo</a></li><li> <a class="" href="spacing.html" title="Spacing">Spacing</a></li><li> <a class="" href="typography.html" title="Typography">Typography</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/typography.html#typo-intro" data-anchor="typo-intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-headlines" data-anchor="typo-headlines" title="Headline">Headline</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-text" data-anchor="typo-text" title="Text">Text</a></li><li> <a class="c-side-nav__section-link" href="/typography.html#typo-quote" data-anchor="typo-quote" title="Quote">Quote</a></li></ul></li></ul></li><li><p>Form-Elements</p><ul><li> <a class="" href="checkbox.html" title="Checkbox">Checkbox</a></li><li> <a class="" href="date-picker.html" title="Date-Picker">Date-Picker</a></li><li> <a class="" href="dropdown.html" title="Dropdown">Dropdown</a></li><li> <a class="" href="file-upload.html" title="File-Upload">File-Upload</a></li><li> <a class="" href="form.html" title="Form">Form</a></li><li> <a class="" href="input.html" title="Input">Input</a></li><li> <a class="" href="radio-button.html" title="Radio-Button">Radio-Button</a></li><li> <a class="" href="switch.html" title="Switch">Switch</a></li><li> <a class="" href="toggle-button.html" title="Toggle-Button">Toggle-Button</a></li><li> <a class="" href="tooltip.html" title="Tooltip">Tooltip</a></li></ul></li><li><p>Basic Components</p><ul><li> <a class="" href="badge.html" title="Badge">Badge</a></li><li> <a class="" href="button.html" title="Button">Button</a><ul class="c-side-nav__sub-sidebar"><li> <a class="c-side-nav__section-link" href="/button.html#intro" data-anchor="intro" title="Intro">Intro</a></li><li> <a class="c-side-nav__section-link" href="/button.html#standard" data-anchor="standard" title="Variationen">Variationen</a></li><li> <a class="c-side-nav__section-link" href="/button.html#cta-group" data-anchor="cta-group" title="Gruppe">Gruppe</a></li></ul></li><li> <a class="" href="chips.html" title="Chips">Chips</a></li><li> <a class="" href="eye-catcher.html" title="Eye-Catcher">Eye-Catcher</a></li><li> <a class="" href="image.html" title="Image">Image</a></li><li> <a class="" href="loader.html" title="Loader">Loader</a></li><li> <a class="" href="lottie-animation.html" title="Lottie-Animation">Lottie-Animation</a></li><li> <a class="" href="messages.html" title="Messages">Messages</a></li><li> <a class="" href="quote.html" title="Quote">Quote</a></li><li> <a class="" href="text.html" title="Text">Text</a></li><li> <a class="" href="table.html" title="Table">Table</a></li><li> <a class="" href="video.html" title="Video">Video</a></li></ul></li><li><p>Modules</p><ul><li> <a class="" href="accordion.html" title="Accordion">Accordion</a></li><li> <a class="" href="breadcrumb.html" title="Breadcrumb">Breadcrumb</a></li><li> <a class="" href="card.html" title="Card">Card</a></li><li> <a class="" href="carousel.html" title="Carousel">Carousel</a></li><li> <a class="" href="hero.html" title="Hero">Hero</a></li><li> <a class="" href="hero-carousel.html" title="Hero-Carousel">Hero-Carousel</a></li><li> <a class="" href="navigation.html" title="Navigation">Navigation</a></li><li> <a class="" href="tabs.html" title="Tabs">Tabs</a></li><li> <a class="" href="text-picture.html" title="Text-Picture">Text-Picture</a></li></ul></li></ul></div></nav></aside></main><footer><div class="c-footer p-1"><div class="g-container"><div class="g-row"><div class="g-col-12"><div class="c-footer__nav-wrapper"><nav class="c-footer__nav"><ul class="c-footer__nav-list"><li class="c-footer__nav-list-item"> <a href="impressum.html" title="Impressum">Impressum</a></li><li class="c-footer__nav-list-item"> <a href="datenschutz.html" title="Datenschutz">Datenschutz</a></li></ul></nav></div></div></div></div></div></footer><script src='assets/js/app.js'></script><script src='assets/js/side-nav.js'></script><script src='assets/js/code-block.js'></script></body></html>