Christina Riedl
Telefon: 07223 967-326
Telefax: 07223 967-7326
E-Mail: christina.riedl@schoeck.de
Menüs Mobilemenü
Verwendung
Auf mobile Endgeräte optimierte Navigation mit Überblendung der einzelnen Navigationsebenen.
Hinweis
Wird ab einem Viewport von 991px eingeblendet.
Vorschau
HTML
<div id="offcanvas_navigation" class="offcanvas_element offcanvas_panel hidden-md hidden-lg" style="display: block;">
<div class="offcanvas_inner">
<div class="offcanvas_upper">
<nav class="nav_wrapper">
<div class="level level1" id="pagewrapper-1">
<div class="menu">
<ul class="level-nav offcanvas_nav level-1-nav">
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-2"><span class="text">Produkte</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-3"><span class="text">Downloads</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-11"><span class="text">Service</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-714"><span class="text">Wissensportale</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-151"><span class="text">Unternehmen</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-411"><span class="text">Kontakt</span></span>
</li>
</ul>
</div>
</div>
<div class="level-wrapper level2-wrapper" id="pagewrapper-2" data-prevlevel="#pagewrapper-1">
<div id="page-2" class="level level-2">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-1">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-2-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Produkte</span></a>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-206"><span class="text">Produktfinder</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-624"><span class="text">Isokorb®</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-681"><span class="text">Tronsole®</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-690"><span class="text">Thermoanker</span></span>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Novomur®</span></a>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-694"><span class="text">Dorn</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-697"><span class="text">Bole®</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-702"><span class="text">Combar®</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-708"><span class="text">ASE</span></span>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-206" data-prevlevel="#pagewrapper-2">
<div id="page-206" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-2">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Produktfinder</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Attika</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Balken</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Balkon</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Betonfassade</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Brüstung</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Decke</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Laubengang</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Loggia</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Sonderanwendung</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Treppe</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Vordach</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Wand</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-624" data-prevlevel="#pagewrapper-2">
<div id="page-624" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-2">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Isokorb®</span></a>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-625"><span class="text">Isokorb® 80 mm</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-626"><span class="text">Isokorb® XT 120 mm</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-648"><span class="text">Isokorb® XT-Combar</span></span>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Isokorb® Typ KST</span></a>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-629"><span class="text">Isokorb® ID</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-628"><span class="text">Isokorb® R</span></span>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level4-wrapper" id="pagewrapper-625" data-prevlevel="#pagewrapper-624">
<div id="page-625" class="level level-4">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-624">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-4-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Isokorb® 80 mm</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ K</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KF</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ K-Eck</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ K-HV</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ K-BH</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ K-WO</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ K-WU</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ Q</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ HP</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ EQ</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ Z</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ D</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ S</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ W</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KS</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ QS</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KSH</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ QSH</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level4-wrapper" id="pagewrapper-626" data-prevlevel="#pagewrapper-624">
<div id="page-626" class="level level-4">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-624">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-4-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Isokorb® XT 120 mm</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KFXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ EXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KXT-HV</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KXT-BH</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KXT-WO</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KXT-WU</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ QXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ HPXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ EQXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ DXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ SXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ WXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ AXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ FXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ OXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ ZXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KSXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ QSXT</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level4-wrapper" id="pagewrapper-648" data-prevlevel="#pagewrapper-624">
<div id="page-648" class="level level-4">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-624">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-4-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Isokorb® XT-Combar</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KXT-Combar</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ KFXT-Combar</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level4-wrapper" id="pagewrapper-629" data-prevlevel="#pagewrapper-624">
<div id="page-629" class="level level-4">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-624">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-4-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Isokorb® ID</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ IDKXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ IDQXT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ IDK</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ IDQ</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">IDock®</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level4-wrapper" id="pagewrapper-628" data-prevlevel="#pagewrapper-624">
<div id="page-628" class="level level-4">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-624">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-4-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Isokorb® R</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ RKS</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ RQS</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ RK</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ RQP</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ RQP+RQP</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-681" data-prevlevel="#pagewrapper-2">
<div id="page-681" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-2">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Tronsole®</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ T</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ F</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ Q</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ B</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ Z</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ L</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ R</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-690" data-prevlevel="#pagewrapper-2">
<div id="page-690" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-2">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Thermoanker</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ TA-H</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ TA-D</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-694" data-prevlevel="#pagewrapper-2">
<div id="page-694" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-2">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Dorn</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ SLD</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ LD</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-697" data-prevlevel="#pagewrapper-2">
<div id="page-697" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-2">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Bole®</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ O</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ U</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ F</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-702" data-prevlevel="#pagewrapper-2">
<div id="page-702" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-2">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Combar®</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Material</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typen & Zubehör</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Entwurf bis zum Einbau</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Partnerinstitute</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">FAQs</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-708" data-prevlevel="#pagewrapper-2">
<div id="page-708" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-2">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">ASE</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ DW0</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ DW1</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ DW2</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typ P</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level2-wrapper" id="pagewrapper-3" data-prevlevel="#pagewrapper-1">
<div id="page-3" class="level level-2">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-1">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-2-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Downloads</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Preisliste</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Prospekte</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Technische Informationen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Einbauanleitungen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Zulassungen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Typenprüfungen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Gutachten</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Software</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Bauphysik</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Übereinstimmungszertifikate</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Leistungserklärungen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">CAD/BIM-Dateien</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Detailcenter</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Ausschreibungstexte</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Kundenmagazin Statikus</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Rechtliches</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level2-wrapper" id="pagewrapper-11" data-prevlevel="#pagewrapper-1">
<div id="page-11" class="level level-2">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-1">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-2-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Service</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Detailcenter</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">BIM</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Wärmebrücken-Rechner</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Bemessungssoftware</span></a>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-155"><span class="text">Veranstaltungen</span></span>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Planungsunterlagen bestellen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Zertifizierung Einbau Schöck Tronsole®</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-155" data-prevlevel="#pagewrapper-11">
<div id="page-155" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-11">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Veranstaltungen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schöck Seminare</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Partnerseminare</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Webinare</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Messen</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level2-wrapper" id="pagewrapper-714" data-prevlevel="#pagewrapper-1">
<div id="page-714" class="level level-2">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-1">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-2-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Wissensportale</span></a>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-234"><span class="text">Wärmebrückenportal</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-513"><span class="text">Trittschallportal</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-295"><span class="text">Passivhausportal</span></span>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-234" data-prevlevel="#pagewrapper-714">
<div id="page-234" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-714">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Wärmebrückenportal</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Wärmeschutz</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Feuchteschutz</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Konstruktive Wärmebrücken</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Normen und Regelwerke</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Lexikon</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Produktlösungen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Wärmebrücken-Rechner</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-513" data-prevlevel="#pagewrapper-714">
<div id="page-513" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-714">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Trittschallportal</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">DIN 4109 Bauaufsichtliche Anforderungen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">VDI 4100 und DEGA Privatrechtliche Anforderungen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schallschutznachweis nach DIN 4109 und E DIN EN ISO 12354-2</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Prüfverfahren für Trittschallemente</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Lexikon zum Trittschallschutz</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Ausführung Schallschutzsysteme</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-295" data-prevlevel="#pagewrapper-714">
<div id="page-295" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-714">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Passivhausportal</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Grundlagen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Anwendungen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Produktlösungen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Referenzen Passivhaus</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Links</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level2-wrapper" id="pagewrapper-151" data-prevlevel="#pagewrapper-1">
<div id="page-151" class="level level-2">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-1">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-2-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Unternehmen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Über Schöck</span></a>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-18"><span class="text">Karriere</span></span>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-477"><span class="text">News und Presse</span></span>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Kundenmagazin Statikus</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Mitgliedschaften</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Zertifikate und Auszeichnungen</span></a>
</li>
<li>
<span class="levellink offcanvas_nav_item " data-nextlevel="page-4"><span class="text">Referenzen</span></span>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-18" data-prevlevel="#pagewrapper-151">
<div id="page-18" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-151">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Karriere</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">So sind wir</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Fach- und Führungskräfte</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Studenten</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schüler</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Stellenangebote</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Kontakt</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-477" data-prevlevel="#pagewrapper-151">
<div id="page-477" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-151">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">News und Presse</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Presse</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">News</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Blog</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Facebook</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Twitter</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">YouTube</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level3-wrapper" id="pagewrapper-4" data-prevlevel="#pagewrapper-151">
<div id="page-4" class="level level-3">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-151">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-3-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Referenzen</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schöck Isokorb®</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schöck Isokorb® XT</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schöck Isokorb® Typ KST</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schöck Isokorb® ID</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schöck Isokorb® R</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schöck Tronsole®</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schöck Thermoanker</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schöck Dorn</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schöck Bole®</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Schöck Combar®</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="level-wrapper level2-wrapper" id="pagewrapper-411" data-prevlevel="#pagewrapper-1">
<div id="page-411" class="level level-2">
<div class="title">
<div class="title-elem return-elem" data-target="#pagewrapper-1">
<span class="return">Zurück</span>
</div>
</div>
<div class="menu">
<ul class="level-nav offcanvas_nav level-2-nav">
<li>
<a href="#" class="offcanvas_nav_item overview_item"><span class="text">Kontakt</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Beratung für Planer</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Beratung für Händler</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Beratung für Verarbeiter</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Beratung international</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Händler in Ihrer Nähe</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Kontakt zu zertifizierten Verarbeitern</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Kontaktformulare</span></a>
</li>
<li>
<a href="#" class="offcanvas_nav_item "><span class="text">Ihre Ideen</span></a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm">Nur für mobile Endgeräte bzw. Viewports unter 992px</div>
CSS
@charset "UTF-8";
.offcanvas_panel {
background-color: #fff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
display: none;
left: 0;
max-height: 100%;
max-width: 400px;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 30px;
top: 50px;
width: 100%;
}
#offcanvas_navigation .offcanvas_inner .nav_wrapper {
overflow: hidden;
position: relative;
transition: 0.4s min-height ease;
}
#offcanvas_navigation .offcanvas_inner .nav_wrapper .level1 {
position: relative;
z-index: 10;
}
#offcanvas_navigation .offcanvas_inner .nav_wrapper .level-wrapper {
background-color: #fff;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
transition: 0.5s opacity ease;
}
#offcanvas_navigation .offcanvas_inner .nav_wrapper .level-wrapper.open {
opacity: 1;
}
#offcanvas_navigation .offcanvas_inner .nav_wrapper .level-wrapper.open.cutme {
max-height: 100%;
overflow: hidden;
}
#offcanvas_navigation .offcanvas_inner .nav_wrapper .level-wrapper .level {
display: none;
}
#offcanvas_navigation .offcanvas_inner .nav_wrapper .level2-wrapper {
z-index: 11;
}
#offcanvas_navigation .offcanvas_inner .nav_wrapper .level3-wrapper {
z-index: 12;
}
#offcanvas_navigation .offcanvas_inner .nav_wrapper .level4-wrapper {
z-index: 13;
}
#offcanvas_navigation .offcanvas_inner .nav_wrapper .level5-wrapper {
z-index: 14;
}
#offcanvas_navigation .nav_wrapper .level .title .return-elem {
border-bottom: 1px solid #e6e6e6;
color: #7c7c7b;
transition: 0.2s color ease;
font-size: 16px;
font-size: 1rem;
line-height: 21px;
line-height: 1.3125rem;
cursor: pointer;
display: block;
padding: 14px 19px 14px 23px;
}
@media screen and (max-width: 767) {
#offcanvas_navigation .nav_wrapper .level .title .return-elem {
transition: none;
}
}
#offcanvas_navigation .nav_wrapper .level .title .return-elem:before {
font-family: 'schoeck';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
}
#offcanvas_navigation .nav_wrapper .level .title .return-elem:before {
display: block;
line-height: 21px;
line-height: 1.3125rem;
float: left;
font-size: 24px;
margin-right: 12px;
}
#offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item {
border-bottom: 1px solid #e6e6e6;
color: #0069b4;
transition: 0.2s color ease;
font-size: 19px;
font-size: 1.1875rem;
line-height: 21px;
line-height: 1.3125rem;
font-family: 'CorpidCd_TT8', Arial;
font-weight: normal;
font-style: normal;
cursor: pointer;
display: block;
padding: 14px 19px 14px 23px;
}
@media screen and (max-width: 767) {
#offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item {
transition: none;
}
}
#offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.levellink:before, #offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.overview_item:before {
font-family: 'schoeck';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
}
#offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.levellink:before, #offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.overview_item:before {
color: #7c7c7b;
line-height: 21px;
line-height: 1.3125rem;
display: block;
float: right;
font-size: 24px;
margin-left: 12px;
transition: 0.2s color ease;
}
@media screen and (max-width: 767) {
#offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.levellink:before, #offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.overview_item:before {
transition: none;
}
}
#offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.current {
color: #f9b200;
}
#offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.current:before, #offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.current.overview_item:after {
color: #f9b200;
}
#offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.overview_item:after {
font-family: 'schoeck';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
}
#offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.overview_item:after {
color: #7c7c7b;
line-height: 21px;
line-height: 1.3125rem;
display: block;
float: right;
font-size: 14px;
margin-left: 12px;
transition: 0.2s color ease;
}
@media screen and (max-width: 767) {
#offcanvas_navigation .nav_wrapper .level .menu .offcanvas_nav_item.overview_item:after {
transition: none;
}
}
SCSS
@import "../general/_general";
.offcanvas_panel {
background-color:#fff;
box-shadow:0 10px 25px rgba(0, 0, 0, .05);
display:none;
left:0;
max-height:100%;
max-width:400px;
overflow-x:hidden;
overflow-y:auto;
padding-bottom:30px;
top:50px;
width:100%;
}
#offcanvas_navigation {
.offcanvas_inner {
.nav_wrapper {
overflow:hidden;
position:relative;
@include transition(0.4s min-height ease);
.level1 {
position:relative;
z-index:10;
}
.level-wrapper {
background-color:#fff;
left:0;
opacity:0;
position:absolute;
top:0;
width:100%;
@include transition(0.5s opacity ease);
&.open {
opacity:1;
&.cutme {
max-height:100%;
overflow:hidden;
}
}
.level {
display:none;
}
}
.level2-wrapper {
z-index:11;
}
.level3-wrapper {
z-index:12;
}
.level4-wrapper {
z-index:13;
}
.level5-wrapper {
z-index:14;
}
}
}
}
#offcanvas_navigation {
.nav_wrapper {
.level {
.title {
.return-elem {
border-bottom:1px solid $lightgrey;
color:$darkgrey;
@include linkcolor-transition;
@include rem-font-size(16);
@include rem-line-height(21);
cursor:pointer;
display:block;
padding:14px 19px 14px 23px;
@include schoeck-icon($icon-arrow-left);
&:before {
display:block;
@include rem-line-height(21);
float:left;
font-size:24px;
margin-right:12px;
}
}
}
.menu {
.offcanvas_nav_item {
border-bottom:1px solid $lightgrey;
color:$blue;
@include linkcolor-transition;
@include rem-font-size(19);
@include rem-line-height(21);
@include corpid-cd-heavy;
cursor:pointer;
display:block;
padding:14px 19px 14px 23px;
&.levellink,
&.overview_item {
@include schoeck-icon($icon-arrow-right);
&:before {
color:$darkgrey;
@include rem-line-height(21);
display:block;
float:right;
font-size:24px;
margin-left:12px;
@include linkcolor-transition;
}
}
&.current {
color:$orange;
&:before,
&.overview_item:after {
color:$orange;
}
}
&.overview_item {
@include schoeck-icon-after($icon-sectionnav);
&:after {
color:$darkgrey;
@include rem-line-height(21);
display:block;
float:right;
font-size:14px;
margin-left:12px;
@include linkcolor-transition;
}
}
}
}
}
}
}
JavaScript
jQuery(document).ready(function () {
// offcanvas navigation handling
var $navWrapper = jQuery('#offcanvas_navigation .nav_wrapper'),
$scrollContainer = jQuery('#offcanvas_navigation'),
transitionSpeed = 400;
var resetOffcanvasNav = function () {
$scrollContainer.find('.offcanvas_overlay').hide()
$navWrapper.find('.level-wrapper').removeClass('open').removeClass('cutme');
$navWrapper.css('min-height', '0');
$navWrapper.find('.level-wrapper .level').hide().css('height', 'auto');
$navWrapper.find('.level1').show();
preselectNavigation();
$scrollContainer.animate({scrollTop: 0}, transitionSpeed, 'easeInOutQuint');
};
$navWrapper.find('.level-nav .levellink').on('click', function () {
var $link = jQuery(this),
$currentLevel = $link.parents('.level'),
$currentLevelWrapper = $currentLevel.parents('.level-wrapper'),
nextLevelId = $link.attr('data-nextlevel'),
$nextLevelNav = jQuery('#' + nextLevelId),
$nextLevelWrapper = $nextLevelNav.parents('.level-wrapper'),
$prevLevelWrapper = jQuery($currentLevelWrapper.attr('data-prevlevel'));
$prevLevelWrapper.hide();
$nextLevelNav.show();
$navWrapper.css('min-height', $nextLevelNav.actual('outerHeight', true));
$nextLevelWrapper.addClass('open');
if ($currentLevelWrapper.length > 0) {
$currentLevelWrapper.addClass('cutme').find('.level').css('height', 'auto');
}
else {
$currentLevel.fadeOut(transitionSpeed);
}
$scrollContainer.animate({scrollTop: 0}, transitionSpeed, 'easeInOutQuint');
});
$navWrapper.find('.level .return-elem').on('click', function () {
var $link = jQuery(this),
$currentLevel = $link.parents('.level'),
$currentLevelWrapper = $currentLevel.parents('.level-wrapper'),
$prevLevelWrapper = jQuery($link.attr('data-target')),
$prevPrevLevelWrapper = jQuery($prevLevelWrapper.attr('data-prevlevel'));
$currentLevelWrapper.removeClass('open');
if ($prevLevelWrapper.hasClass('level1')) {
$prevLevelWrapper.fadeIn(transitionSpeed);
}
$prevLevelWrapper.removeClass('cutme');
$currentLevel.fadeOut(transitionSpeed).css('height', 'auto');
if ($prevLevelWrapper.hasClass('level1')) {
$navWrapper.css('min-height', 0);
}
else {
$navWrapper.css('min-height', $prevLevelWrapper.actual('outerHeight'));
}
setTimeout(function () {
$prevPrevLevelWrapper.show();
}, transitionSpeed);
$scrollContainer.animate({scrollTop: 0}, transitionSpeed, 'easeInOutQuint');
});
});