Christina Riedl
Telefon: 07223 967-326
Telefax: 07223 967-7326
E-Mail: christina.riedl@schoeck.de
Menüs Flyoutmenü
Verwendung
Das Flyoutmenü ist eine, auf die Bedienung mit der Maus ausgelegte, Navigation mit bis zu 4 Ebenen im Produktbereich und mit bis zu 2 Ebenen in allen weiteren Bereichen.
Hinweis
Wird ab einem Viewport von 991px ausgeblendet und die Ansicht wechselt auf die mobile Navigation.
Vorschau
HTML
<header id="cnt_header" class="hidden-print">
<div class="hidden-sm hidden-xs desktop_header clearfix">
<div class="navigation_wrapper">
<div class="navigation_lower">
<div class="mainnav_wrapper clearfix">
<nav id="main_navigation">
<ul class="clearfix level-1">
<li class="sub">
<a href="#">Produkte</a>
<div class="flyout">
<div class="flyout_inner">
<div class="infobox">
<div class="title">Produkte</div>
<div class="text">
<p>Die Schöck Gruppe bietet zukunftsweisende
Produktlösungen und -systeme für die
unterschiedlichsten bauphysikalischen, statischen und
konstruktiven Anwendungen im Neubau und Bestand.</p>
<p>Der Produktfinder von Schöck hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese Weise
gelangen Sie vom Bauteil über mehrere Spezifizierungen
zum Produkt Ihres Bedarfs.</p>
<p>Alternativ können Sie direkt das konkrete Produkt
auswählen, zu dem Sie Informationen benötigen.</p>
</div>
</div>
<ul class="level-2">
<li class="sub">
<a href="#">Produktfinder</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres Bedarfs.</p>
</div>
</div>
<ul class="level-3">
<li>
<a href="#">Attika</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
<li>
<a href="#">Balken</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
<li>
<a href="#">Balkon</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
<li>
<a href="#">Betonfassade</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
<li>
<a href="#">Brüstung</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
<li>
<a href="#">Decke</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
<li>
<a href="#">Laubengang</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
<li>
<a href="#">Loggia</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
<li>
<a href="#">Sonderanwendung</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
<li>
<a href="#">Treppe</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
<li>
<a href="#">Vordach</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
<li>
<a href="#">Wand</a>
<div class="infobox">
<div class="title">Produktfinder</div>
<div class="text">
<p>Der Schöck Produktfinder hilft Ihnen, sich in
unserem Sortiment zurecht zu finden. Auf diese
Weise gelangen Sie vom Bauteil über mehrere
Spezifizierungen zum Produkt Ihres
Bedarfs.</p>
</div>
</div>
</li>
</ul>
</li>
<li class="sub">
<a href="#">Isokorb®</a>
<div class="infobox">
<div class="title">Isokorb®</div>
<div class="text">
<p>Tragende Wärmedämmelemente für auskragende
Bauteile.</p>
</div>
</div>
<ul class="level-3">
<li class="sub">
<a href="#">Isokorb® 80 mm</a>
<div class="infobox">
<ul class="row level-4">
<li class="col-xs-4" data-title="Isokorb® Typ K" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r frei auskragende Stahlbetonbalkone.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ K</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ KF" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r frei auskragende Balkone, speziell f&uuml;r die Anforderungen im Fertigteilwerk in geteilter Ausf&uuml;hrung.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ KF</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ K-Eck" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r Balkone &uuml;ber Au&szlig;enecken.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ K-Eck</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ K-HV" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r frei auskragende Balkone mit H&ouml;henversatz.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ K-HV</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ K-BH" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r frei auskragende Balkone mit H&ouml;henversatz.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ K-BH</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ K-WO" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r frei auskragende Balkone oder Vord&auml;cher mit Wandanschluss nach oben.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ K-WO</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ K-WU" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r frei auskragende Balkone oder Vord&auml;cher mit Wandanschluss nach unten.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ K-WU</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ Q" data-desc="<p>W&auml;rmed&auml;mmelement zur Querkraft&uuml;bertragung bei Balkonen auf St&uuml;tzen, Loggien sowie bei punktuell hohen Querkr&auml;ften.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ Q</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ HP" data-desc="<p>Erg&auml;nzungsmodul zur punktuellen &Uuml;bertragung von planm&auml;&szlig;igen Horizontalkr&auml;ften parallel oder/und senkrecht zur D&auml;mmebene.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ HP</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ EQ" data-desc="<p>Erg&auml;nzungsmodul&nbsp;zur Aufnahme von Erdbebeneinwirkungen.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ EQ</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ Z" data-desc="<p>W&auml;rmed&auml;mmelement als Erg&auml;nzung f&uuml;r unterschiedliche Einbausituationen und Brandschutzanforderungen.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ Z</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ D" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r Balkonplatten, die in Deckenfelder einspringen.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ D</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ S" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r den Anschluss auskragender Konsolbalken.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ S</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ W" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r den Anschluss geschosshoher Wandscheiben.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ W</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ KS" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r frei auskragende Stahlkonstruktionen.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ KS</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ QS" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r unterst&uuml;tzte Stahlkonstruktionen.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ QS</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ KSH" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r frei auskragende Holzkonstruktionen.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ KSH</a>
</li>
<li class="col-xs-4" data-title="Isokorb® Typ QSH" data-desc="<p>W&auml;rmed&auml;mmelement f&uuml;r unterst&uuml;tzte Holzkonstruktionen.</p>" data-image-src="/img/dummy/280x158.png">
<a href="#">Typ QSH</a>
</li>
</ul>
<div class="infobox_content row">
<div class="col-xs-6 col-text">
<div class="title">Isokorb® 80 mm</div>
<div class="text">
<p>Das tragende Wärmedämmelement mit einer
Dämmkörperdicke von 80 mm für
Stahlbeton-Stahlbeton und Stahl-Stahlbeton
Konstruktionen.</p>
</div>
</div>
<div class="col-xs-6 col-image"></div>
</div>
</div>
</li>
<li class="">
<a href="#">Isokorb® XT 120 mm</a>
<div class="infobox">
<div class="infobox_content row">
<div class="col-xs-6 col-text">
<div class="title">Isokorb® XT 120 mm</div>
<div class="text">
<p>Das tragende Wärmedämmelement mit einer
Dämmkörperdicke von 120 mm für
Stahlbeton-Stahlbeton und Stahl-Stahlbeton
Konstruktionen.</p>
</div>
</div>
<div class="col-xs-6 col-image"></div>
</div>
</div>
</li>
<li class="">
<a href="#">Isokorb® XT-Combar</a>
<div class="infobox">
<div class="infobox_content row">
<div class="col-xs-6 col-text">
<div class="title">Isokorb® XT-Combar</div>
<div class="text">
<p>Das tragende Wärmedämmelement mit einer
Dämmkörperdicke von 120 mm für Beton-Beton
Konstruktionen und
Glasfasertechnologie.</p>
</div>
</div>
<div class="col-xs-6 col-image"></div>
</div>
</div>
</li>
<li>
<a href="#">Isokorb® Typ KST</a>
<div class="infobox">
<div class="title">Isokorb® Typ KST</div>
<div class="text">
<p>Wärmedämmelement für den Anschluss von frei
auskragenden Stahlträgern an
Stahlkonstruktionen.</p>
</div>
<div class="image">
<img data-src="/img/dummy/530x298.png"/>
</div>
</div>
</li>
<li class="">
<a href="#">Isokorb® ID</a>
<div class="infobox">
<div class="infobox_content row">
<div class="col-xs-6 col-text">
<div class="title">Isokorb® ID</div>
<div class="text">
<p>Der Schöck Isokorb® ID für die
bauzeitenflexible Balkonmontage im
Neubau.</p>
</div>
</div>
<div class="col-xs-6 col-image"></div>
</div>
</div>
</li>
<li class="">
<a href="#">Isokorb® R</a>
<div class="infobox">
<div class="infobox_content row">
<div class="col-xs-6 col-text">
<div class="title">Isokorb® R</div>
<div class="text">
<p>Der Schöck Isokorb® R realisiert sowohl
die Sanierung von Bestandsbauten mit
Balkonen als auch die Neukonstruktion von
Balkonen an den Bestand.</p>
</div>
</div>
<div class="col-xs-6 col-image"></div>
</div>
</div>
</li>
</ul>
</li>
<li class="">
<a href="#">Tronsole®</a>
<div class="infobox">
<div class="title">Tronsole®</div>
<div class="text">
<p>Einbaufertige Trittschall-Dämmelemente für alle
Anschlüsse im Treppenhaus.</p>
</div>
</div>
</li>
<li class="">
<a href="#">Thermoanker</a>
<div class="infobox">
<div class="title">Thermoanker</div>
<div class="text">
<p>Energieeffizienter Glasfaseranker für
kerngedämmte Sandwich- und Elementwände.</p>
</div>
</div>
</li>
<li class="">
<a href="#">Novomur®</a>
<div class="infobox">
<div class="title">Novomur®</div>
<div class="text">
<p>Wasserabweisende Wärmedämmelemente für den
Gebäudesockel.</p>
</div>
<div class="image">
<img data-src="/img/dummy/530x298.png"/>
</div>
</div>
</li>
<li class="">
<a href="#">Dorn</a>
<div class="infobox">
<div class="title">Dorn</div>
<div class="text">
<p>Einbaufertige Schub- und Schwerlastdorne für die
Übertragung von Querkräften in Dehnfugen.</p>
</div>
</div>
</li>
<li class="">
<a href="#">Bole®</a>
<div class="infobox">
<div class="title">Bole®</div>
<div class="text">
<p>Sichere Durchstanzbewehrung für Flachdecken.</p>
</div>
</div>
</li>
<li class="">
<a href="#">Combar®</a>
<div class="infobox">
<div class="title">Combar®</div>
<div class="text">
<p>Zukunftsweisende Glasfaserbewehrung für
vielfältige Anwendungsgebiete als Alternative zu
Betonstahl.</p>
</div>
</div>
</li>
<li class="">
<a href="#">ASE</a>
<div class="infobox">
<div class="title">ASE</div>
<div class="text">
<p>Einbaufertige Betonschalung für
Halbfertigteile.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="sub">
<a href="#">Downloads</a>
<div class="flyout flat">
<div class="flyout_inner clearfix">
<div class="infobox">
<div class="title">Download</div>
<div class="text">
<p>Der Downloadbereich enthält die aktuellsten
Unterlagen wie Technische Information, Zulassungen,
Software und CAD-Zeichnungen.</p>
</div>
</div>
<ul class="level-2">
<li>
<a href="#">Preisliste</a>
</li>
<li>
<a href="#">Prospekte</a>
</li>
<li>
<a href="#">Technische Informationen</a>
</li>
<li>
<a href="#">Einbauanleitungen</a>
</li>
<li>
<a href="#">Zulassungen</a>
</li>
<li>
<a href="#">Typenprüfungen</a>
</li>
<li>
<a href="#">Gutachten</a>
</li>
<li>
<a href="#">Software</a>
</li>
<li>
<a href="#">Bauphysik</a>
</li>
<li>
<a href="#">Übereinstimmungszertifikate</a>
</li>
<li>
<a href="#">Leistungserklärungen</a>
</li>
<li>
<a href="#">CAD/BIM-Dateien</a>
</li>
<li>
<a href="#">Detailcenter</a>
</li>
<li>
<a href="#">Ausschreibungstexte</a>
</li>
<li>
<a href="#">Kundenmagazin Statikus</a>
</li>
<li>
<a href="#">Rechtliches</a>
</li>
</ul>
</div>
</div>
</li>
<li class="sub" style="">
<a href="#">Service</a>
<div class="flyout" style="left: 0px;">
<div class="flyout_inner" style="">
<div class="infobox">
<div class="title">Service</div>
<div class="text"><p>Das umfassende Serviceangebot von
Schöck bietet Ihnen Fachwissen und Unterstützung bei
Ihrer Planung.</p></div>
</div>
<ul class="level-2">
<li>
<a href="#">Detailcenter</a>
<div class="infobox">
<div class="title">Detailcenter</div>
<div class="text"><p>Das Detailcenter bietet Planern
über 300 Anschlussdetails für tragende und dämmende
Anschlüsse mit Schöck Isokorb®, Tronsole®, Novomur®
und Thermoanker.</p></div>
</div>
</li>
<li>
<a href="#">BIM</a>
<div class="infobox">
<div class="title">BIM</div>
<div class="text"><p>Die BIM Bibliotheken von Schöck
ermöglichen eine präzise und effiziente Planung.</p>
</div>
</div>
</li>
<li>
<a href="#">Wärmebrücken-Rechner</a>
<div class="infobox">
<div class="title">Wärmebrücken-Rechner</div>
<div class="text"><p>In 5 Schritten Wärmeströme,
Oberflächentemperaturen und ψ-Werte für
Balkonkonstruktionen ermitteln.</p></div>
</div>
</li>
<li class="sub">
<a href="#">Bemessungsprogramme</a>
<div class="infobox">
<div class="title">Bemessungsprogramme</div>
<div class="text"><p>Bemessungshilfen von Schöck.
Unsere digitalen Produktlösungen für eine
zuverlässige statische Bemessung.</p></div>
</div>
<ul class="level-3">
<li>
<a href="#">Bemessungssoftware</a>
<div class="infobox">
<div class="title">Bemessungssoftware</div>
<div class="text"><p>Mit Hilfe der
Bemessungsprogramme wird die Möglichkeit
gegeben, die ausgewählten Produkte
wirtschaftlich in statischer Hinsicht
nachzuweisen und Zeichnungen für einen korrekten
Einbau bereitzustellen.</p></div>
</div>
</li>
<li>
<a href="#">Isokorb®
Typenfinder</a>
<div class="infobox">
<div class="title">Isokorb® Typenfinder</div>
<div class="text"><p>Der Schöck Isokorb®
Typenfinder hilft Ihnen gemäß Ihrer statischen
Anforderungen den passenden Schöck Isokorb® Typ
zu finden. Generieren Sie ganz einfach ein
übersichtliches Datenblatt, das alle relevanten
Kennwerte inkl. λ<sub>eq</sub> auf einen Blick
beinhaltet.</p></div>
</div>
</li>
</ul>
</li>
<li class="sub">
<a href="#">Veranstaltungen</a>
<div class="infobox">
<div class="title">Veranstaltungen</div>
<div class="text"><p>Alle Schöck Seminare,
Partnerseminare, Webinare sowie Kongresse und Messen
im Überblick.</p></div>
</div>
<ul class="level-3">
<li>
<a href="#">Schöck
Seminare</a>
<div class="infobox">
<div class="title">Veranstaltungen</div>
<div class="text"><p>Alle Schöck Seminare,
Partnerseminare, Webinare sowie Kongresse und
Messen im Überblick.</p></div>
</div>
</li>
<li>
<a href="#">Partnerseminare</a>
<div class="infobox">
<div class="title">Veranstaltungen</div>
<div class="text"><p>Alle Schöck Seminare,
Partnerseminare, Webinare sowie Kongresse und
Messen im Überblick.</p></div>
</div>
</li>
<li>
<a href="#">Messen</a>
<div class="infobox">
<div class="title">Veranstaltungen</div>
<div class="text"><p>Alle Schöck Seminare,
Partnerseminare, Webinare sowie Kongresse und
Messen im Überblick.</p></div>
</div>
</li>
</ul>
</li>
<li>
<a href="#">Planungsunterlagen
bestellen</a>
<div class="infobox">
<div class="title">Planungsunterlagen bestellen</div>
<div class="text"><p>Unsere Unterlagen aus dem
Downloadbereich versenden wir auf Wunsch auch als
Druckversion.</p></div>
</div>
</li>
<li>
<a href="#">Zertifizierung</a>
<div class="infobox">
<div class="title">Zertifizierung</div>
<div class="text"><p>Qualitätsbewusste Verarbeiter
haben die Möglichkeit, sich von Schöck für den
Einbau des Trittschalldämmsystems Schöck Tronsole®
und der Fassadenfestigung Schöck Thermoanker zertifizieren
zu lassen.</p></div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="">
<a href="#">Wissensportale</a>
</li>
<li class="">
<a href="#">Unternehmen</a>
</li>
<li class="">
<a href="#">Kontakt</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div class="hidden-md hidden-lg">Nur für Desktop bzw. Viewports über 991px</div>
CSS
/* header styles */
ul li {
list-style: none;
}
#cnt_header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1010;
height: 65px;
background-color: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
transform: translate3d(0px, 0px, 0px);
/* absolute px fallbacks for non-vw capable browsers */
padding-left: 50px;
padding-left: 4.5vw;
padding-right: 50px;
padding-right: 4.5vw;
}
@media screen and (max-width: 991px) {
#cnt_header {
display: none;
}
}
#cnt_header .desktop_header .logo_wrapper {
float: left;
}
#cnt_header .desktop_header .logo_wrapper a {
display: block;
}
#cnt_header .desktop_header .navigation_wrapper {
float: left;
width: calc(100% - 144px);
}
#cnt_header .desktop_header .navigation_wrapper #main_navigation {
position: relative;
z-index: 2;
}
/* mainnav */
#main_navigation > ul {
/* absolute px fallbacks for non-vw capable browsers */
display: inline-block;
margin-top: 5px;
/* some margin so we can see the tab-effect on hover better */
}
#main_navigation > ul > li {
float: left;
margin-right: 20px;
}
#main_navigation > ul > li:last-child {
margin-right: 0;
}
#main_navigation > ul > li.current > a {
color: #f9b200;
}
#main_navigation > ul > li.sub {
position: relative;
}
#main_navigation > ul > li.sub .flyout {
display: none;
}
#main_navigation > ul > li.sub > a:after {
/* this element does overlay the shadow of the flyout so we get a clean shape */
content: '';
display: none;
position: absolute;
width: 100%;
left: 0;
bottom: 0px;
height: 10px;
background-color: #fff;
z-index: 11;
}
#main_navigation > ul > li.menuaim_active > a {
color: #f9b200;
}
#main_navigation > ul > li.menuaim_active.sub .flyout {
display: block;
}
#main_navigation > ul > li.menuaim_active.sub > a {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
#main_navigation > ul > li.menuaim_active.sub > a:after {
display: block;
}
#main_navigation > ul > li > a {
display: block;
padding: 0 10px;
font-family: 'CorpidCd_TT8', Arial;
font-weight: normal;
font-style: normal;
font-size: 17px;
font-size: 1.0625rem;
line-height: 48px;
color: #0069b4;
position: relative;
border-radius: 4px 4px 0 0;
}
@media print, screen and (min-width: 1200px) {
#main_navigation > ul > li > a {
padding: 0 15px;
}
}
@media screen and (min-width: 1500px) {
#main_navigation > ul > li > a {
padding: 0 20px;
}
}
#main_navigation > ul > li .flyout {
position: absolute;
top: 100%;
z-index: 10;
}
#main_navigation > ul > li .flyout .flyout_inner {
background-color: #fff;
position: relative;
width: 260px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 4px;
transition: 0.3s width ease-out;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner {
width: 240px;
}
}
#main_navigation > ul > li .flyout .flyout_inner.level_1_active_with_infobox {
width: 520px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner.level_1_active_with_infobox {
width: 480px;
}
}
#main_navigation > ul > li .flyout .flyout_inner.level_2_active {
width: 260px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner.level_2_active {
width: 240px;
}
}
#main_navigation > ul > li .flyout .flyout_inner.level_2_active_with_sub, #main_navigation > ul > li .flyout .flyout_inner.level_2_active_with_infobox {
width: 520px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner.level_2_active_with_sub, #main_navigation > ul > li .flyout .flyout_inner.level_2_active_with_infobox {
width: 480px;
}
}
#main_navigation > ul > li .flyout .flyout_inner.level_2_active_with_infobox_with_sub {
width: 780px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner.level_2_active_with_infobox_with_sub {
width: 720px;
}
}
#main_navigation > ul > li .flyout .flyout_inner.level_2_active_with_infobox_with_sub .infobox {
left: 520px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner.level_2_active_with_infobox_with_sub .infobox {
left: 480px;
}
}
#main_navigation > ul > li .flyout .flyout_inner.level_3_active {
width: 520px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner.level_3_active {
width: 480px;
}
}
#main_navigation > ul > li .flyout .flyout_inner.level_3_active_with_infobox {
width: 780px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner.level_3_active_with_infobox {
width: 720px;
}
}
#main_navigation > ul > li .flyout .flyout_inner.level_3_active_with_infobox_with_sub {
width: 1040px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner.level_3_active_with_infobox_with_sub {
width: 960px;
}
}
#main_navigation > ul > li .flyout .flyout_inner.level_3_active_with_infobox_with_sub .infobox {
left: 520px;
width: 520px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner.level_3_active_with_infobox_with_sub .infobox {
left: 480px;
}
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner.level_3_active_with_infobox_with_sub .infobox {
width: 480px;
}
}
#main_navigation > ul > li .flyout .flyout_inner ul {
display: none;
border-right: 1px solid #e6e6e6;
background-color: #fff;
padding: 30px;
width: 260px;
left: 260px;
position: absolute;
top: 0;
height: 100%;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner ul {
width: 240px;
}
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner ul {
left: 240px;
}
}
#main_navigation > ul > li .flyout .flyout_inner ul.calculate_height {
height: auto;
}
#main_navigation > ul > li .flyout .flyout_inner ul li > a {
color: #0069b4;
font-size: 15px;
font-size: 0.9375rem;
line-height: 17px;
line-height: 1.0625rem;
font-family: 'CorpidCd_TT8', Arial;
font-weight: normal;
font-style: normal;
padding: 7px 0;
display: block;
border-bottom: 1px solid #e6e6e6;
}
#main_navigation > ul > li .flyout .flyout_inner ul li.menuaim_active > a {
color: #f9b200;
}
#main_navigation > ul > li .flyout .flyout_inner ul li.menuaim_active > .infobox {
display: block;
}
#main_navigation > ul > li .flyout .flyout_inner ul li.sub > a {
position: relative;
padding-right: 12px;
}
#main_navigation > ul > li .flyout .flyout_inner ul li.sub > a:after {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-left: 4px solid;
border-bottom: 4px solid transparent;
margin: 0;
}
#main_navigation > ul > li .flyout .flyout_inner ul li.sub.menuaim_active > ul {
display: block;
}
#main_navigation > ul > li .flyout .flyout_inner ul li:last-child > a {
border-bottom: none;
}
#main_navigation > ul > li .flyout .flyout_inner ul.level-2 > li.sub > .infobox {
left: 520px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner ul.level-2 > li.sub > .infobox {
left: 480px;
}
}
#main_navigation > ul > li .flyout .flyout_inner ul.level-3 > li > .infobox {
left: 260px;
width: 260px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner ul.level-3 > li > .infobox {
left: 240px;
}
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner ul.level-3 > li > .infobox {
width: 240px;
}
}
#main_navigation > ul > li .flyout .flyout_inner ul.level-3 > li > .infobox > .infobox_content .col-image .image img {
width: 100%;
height: auto;
}
#main_navigation > ul > li .flyout .flyout_inner ul.level-3 > li > .infobox > .infobox_content .text {
font-size: 12px;
font-size: 0.75rem;
line-height: 16px;
line-height: 1rem;
color: #7c7c7b;
}
#main_navigation > ul > li .flyout .flyout_inner ul.level-3 > li > .infobox .row {
height: auto;
}
#main_navigation > ul > li .flyout .flyout_inner ul.level-3 > li > .infobox ul {
display: block;
border: none;
margin-bottom: 40px;
}
#main_navigation > ul > li .flyout .flyout_inner ul.level-3 > li > .infobox ul li {
padding: 0 15px;
}
#main_navigation > ul > li .flyout .flyout_inner ul.level-3 > li > .infobox ul li a {
border-bottom: 1px solid #e6e6e6;
}
#main_navigation > ul > li .flyout .flyout_inner ul.level-3 > li.sub > .infobox {
width: 520px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner ul.level-3 > li.sub > .infobox {
width: 480px;
}
}
#main_navigation > ul > li .flyout .flyout_inner ul.level-4 {
display: block;
border: none;
padding: 0;
width: auto;
height: auto;
position: static;
left: auto;
top: auto;
margin-bottom: 15px;
}
#main_navigation > ul > li .flyout .flyout_inner > ul {
display: block;
position: static;
left: 0;
}
#main_navigation > ul > li .flyout .flyout_inner .infobox {
display: none;
width: 260px;
left: 260px;
position: absolute;
top: 0;
height: 100%;
background-color: #fff;
padding: 30px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner .infobox {
width: 240px;
}
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout .flyout_inner .infobox {
left: 240px;
}
}
#main_navigation > ul > li .flyout .flyout_inner .infobox.calculate_height {
height: auto;
}
#main_navigation > ul > li .flyout .flyout_inner .infobox .row {
height: 100%;
}
#main_navigation > ul > li .flyout .flyout_inner .infobox .title {
font-size: 17px;
font-size: 1.0625rem;
line-height: 23px;
line-height: 1.4375rem;
color: #0069b4;
font-family: 'CorpidCd_TT8', Arial;
font-weight: normal;
font-style: normal;
margin-bottom: 10px;
}
#main_navigation > ul > li .flyout .flyout_inner .infobox .text {
font-size: 14px;
font-size: 0.875rem;
line-height: 18px;
line-height: 1.125rem;
margin-bottom: 10px;
}
#main_navigation > ul > li .flyout .flyout_inner .infobox .image img {
width: 100%;
height: auto;
}
#main_navigation > ul > li .flyout .flyout_inner > .infobox {
display: block;
}
#main_navigation > ul > li .flyout.flat .flyout_inner {
width: 520px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat .flyout_inner {
width: 480px;
}
}
#main_navigation > ul > li .flyout.flat .flyout_inner.level_1_active_with_infobox {
width: 780px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat .flyout_inner.level_1_active_with_infobox {
width: 720px;
}
}
#main_navigation > ul > li .flyout.flat .flyout_inner.level_1_active_with_infobox .infobox {
left: 520px;
width: 260px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat .flyout_inner.level_1_active_with_infobox .infobox {
left: 480px;
}
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat .flyout_inner.level_1_active_with_infobox .infobox {
width: 240px;
}
}
#main_navigation > ul > li .flyout.flat .flyout_inner > ul {
float: left;
border-right: none;
width: 260px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat .flyout_inner > ul {
width: 240px;
}
}
#main_navigation > ul > li .flyout.flat .infobox {
width: 520px;
left: 520px;
border-left: 1px solid #e6e6e6;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat .infobox {
width: 480px;
}
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat .infobox {
left: 480px;
}
}
#main_navigation > ul > li .flyout.flat .infobox .row {
height: auto;
}
#main_navigation > ul > li .flyout.flat_onecol .flyout_inner {
width: 260px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat_onecol .flyout_inner {
width: 240px;
}
}
#main_navigation > ul > li .flyout.flat_onecol .flyout_inner.level_1_active_with_infobox {
width: 520px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat_onecol .flyout_inner.level_1_active_with_infobox {
width: 480px;
}
}
#main_navigation > ul > li .flyout.flat_onecol .flyout_inner > ul {
float: left;
border-right: none;
width: 260px;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat_onecol .flyout_inner > ul {
width: 240px;
}
}
#main_navigation > ul > li .flyout.flat_onecol .infobox {
left: 260px;
width: 260px;
border-left: 1px solid #e6e6e6;
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat_onecol .infobox {
left: 240px;
}
}
@media screen and (max-width: 1070px) {
#main_navigation > ul > li .flyout.flat_onecol .infobox {
width: 240px;
}
}
#main_navigation > ul > li .flyout.flat_onecol .infobox .row {
height: auto;
}
SCSS
@import "../general/_general";
/* header styles */
ul {
li {
list-style:none;
}
}
#cnt_header {
position:absolute;
top:0;
left:0;
width:100%;
z-index:1010;
height:65px;
background-color:$white;
@include box-shadow(0 10px 20px rgba(0, 0, 0, .05));
@include transform(translate3d(0px, 0px, 0px));
/* absolute px fallbacks for non-vw capable browsers */
padding-left:50px;
padding-left:4.5vw;
padding-right:50px;
padding-right:4.5vw;
@media screen and (max-width:$screen-sm-max) {
display:none;
}
.desktop_header {
.logo_wrapper {
float:left;
a {
display:block;
}
}
.navigation_wrapper {
float:left;
width:calc(100% - 144px);
#main_navigation {
position:relative;
z-index:2;
}
}
}
}
/* mainnav */
#main_navigation {
> ul {
/* absolute px fallbacks for non-vw capable browsers */
display:inline-block;
margin-top:5px; /* some margin so we can see the tab-effect on hover better */
> li {
float:left;
margin-right:20px;
&:last-child {
margin-right:0;
}
&.current {
> a {
color:$orange;
}
}
&.sub {
position:relative;
.flyout {
display:none;
}
> a {
&:after {
/* this element does overlay the shadow of the flyout so we get a clean shape */
content:'';
display:none;
position:absolute;
width:100%;
left:0;
bottom:0px;
height:10px;
background-color:$white;
z-index:11;
}
}
}
&.menuaim_active {
> a {
color:$orange;
}
&.sub {
.flyout {
display:block;
}
> a {
@include box-shadow(0 0 10px rgba(0, 0, 0, 0.1));
background-color:$white;
&:after {
display:block;
}
}
}
}
> a {
display:block;
padding:0 10px;
@include corpid-cd-heavy;
@include rem-font-size(17);
line-height:48px;
color:$blue;
position:relative;
@include border-radius(4px 4px 0 0);
@media print, screen and (min-width:$screen-lg-min) {
padding:0 15px;
}
@media screen and (min-width:1500px) {
padding:0 20px;
}
}
.flyout {
position:absolute;
top:100%;
z-index:10;
.flyout_inner {
background-color:$white;
position:relative;
@include flyoutBaseSizeStyle(width);
overflow:hidden;
@include box-shadow(0 0 10px rgba(0, 0, 0, 0.1));
@include border-radius(4px);
@include transition(0.3s width ease-out);
&.level_1_active {
}
&.level_1_active_with_infobox {
@include flyoutBaseSizeStyle(width, 2);
}
&.level_2_active {
@include flyoutBaseSizeStyle(width);
}
&.level_2_active_with_sub,
&.level_2_active_with_infobox {
@include flyoutBaseSizeStyle(width, 2);
}
&.level_2_active_with_infobox_with_sub {
@include flyoutBaseSizeStyle(width, 3);
.infobox {
@include flyoutBaseSizeStyle(left, 2);
}
}
&.level_3_active {
@include flyoutBaseSizeStyle(width, 2);
}
&.level_3_active_with_sub {
}
&.level_3_active_with_infobox {
@include flyoutBaseSizeStyle(width, 3);
}
&.level_3_active_with_infobox_with_sub {
@include flyoutBaseSizeStyle(width, 4);
.infobox {
@include flyoutBaseSizeStyle(left, 2);
@include flyoutBaseSizeStyle(width, 2);
}
}
ul {
display:none;
border-right:1px solid $lightgrey;
background-color:$white;
padding:30px;
@include flyoutBaseSizeStyle(width);
@include flyoutBaseSizeStyle(left);
position:absolute;
top:0;
height:100%;
&.calculate_height {
height:auto;
}
li {
> a {
color:$blue;
@include rem-font-size(15);
@include rem-line-height(17);
@include corpid-cd-heavy;
padding:7px 0;
display:block;
border-bottom:1px solid $lightgrey;
}
&.menuaim_active {
> a {
color:$orange;
}
> .infobox {
display:block;
}
}
&.sub {
> a {
position:relative;
padding-right:12px;
&:after {
display:inline-block;
width:0;
height:0;
vertical-align:middle;
content:'';
@include autocenterY();
right:0;
border-top:4px solid transparent;
border-right:4px solid transparent;
border-left:4px solid;
border-bottom:4px solid transparent;
margin:0;
}
}
&.menuaim_active {
> ul {
display:block;
}
}
}
&:last-child {
> a {
border-bottom:none;
}
}
}
&.level-2 {
> li {
&.sub {
> .infobox {
@include flyoutBaseSizeStyle(left, 2);
}
}
}
}
&.level-3 {
> li {
> .infobox {
@include flyoutBaseSizeStyle(left);
@include flyoutBaseSizeStyle(width);
> .infobox_content {
.col-image {
.image {
img {
width:100%;
height:auto;
}
}
}
.text {
@include rem-font-size(12);
@include rem-line-height(16);
color:$darkgrey;
}
}
.row {
height:auto;
}
ul {
display:block;
border:none;
margin-bottom:40px;
li {
padding:0 15px;
a {
border-bottom:1px solid $lightgrey;
}
}
}
}
&.sub {
> .infobox {
@include flyoutBaseSizeStyle(width, 2);
}
}
}
}
&.level-4 {
display:block;
border:none;
padding:0;
width:auto;
height:auto;
position:static;
left:auto;
top:auto;
margin-bottom:15px;
}
}
> ul {
display:block;
position:static;
left:0;
}
.infobox {
display:none;
@include flyoutBaseSizeStyle(width);
@include flyoutBaseSizeStyle(left);
position:absolute;
top:0;
height:100%;
background-color:$white;
padding:30px;
&.calculate_height {
height:auto;
}
.row {
height:100%;
}
.title {
@include rem-font-size(17);
@include rem-line-height(23);
color:$blue;
@include corpid-cd-heavy;
margin-bottom:10px;
}
.text {
@include rem-font-size(14);
@include rem-line-height(18);
margin-bottom:10px;
}
.image {
img {
width:100%;
height:auto;
}
}
}
> .infobox {
display:block;
}
}
&.flat {
.flyout_inner {
@include flyoutBaseSizeStyle(width, 2);
&.level_1_active_with_infobox {
@include flyoutBaseSizeStyle(width, 3);
.infobox {
@include flyoutBaseSizeStyle(left, 2);
@include flyoutBaseSizeStyle(width);
}
}
> ul {
float:left;
border-right:none;
@include flyoutBaseSizeStyle(width);
}
}
.infobox {
@include flyoutBaseSizeStyle(width, 2);
@include flyoutBaseSizeStyle(left, 2);
border-left:1px solid $lightgrey;
.row {
height:auto;
}
}
}
&.flat_onecol {
.flyout_inner {
@include flyoutBaseSizeStyle(width);
&.level_1_active_with_infobox {
@include flyoutBaseSizeStyle(width, 2);
}
> ul {
float:left;
border-right:none;
@include flyoutBaseSizeStyle(width);
}
}
.infobox {
@include flyoutBaseSizeStyle(left);
@include flyoutBaseSizeStyle(width);
border-left:1px solid $lightgrey;
.row {
height:auto;
}
}
}
}
}
}
}
JavaScript
jQuery(document).ready(function()
{
// calculation values
var flyoutInnerBaseSize=260;
enquire.register("screen and (max-width: 1070px)", {
match: function()
{
flyoutInnerBaseSize=240;
},
unmatch: function()
{
flyoutInnerBaseSize=260;
}
});
/* helper functions */
var getFlyoutHeight=function($elem)
{
var minHeight=0, /* flyout min height */
$parentUls=$elem.parents('ul'),
$uls=$elem.children('ul'),
$infobox=$elem.children('.infobox'),
$flatFlyoutPrevUl=$parentUls.prev('ul'),
$flatFlyoutInfobox=$elem.parents('.flyout.flat, .flyout.flat_onecol').children('.flyout_inner').children('.infobox');
$parentUls.addClass('calculate_height');
$uls.addClass('calculate_height');
$infobox.addClass('calculate_height');
$flatFlyoutPrevUl.addClass('calculate_height');
$flatFlyoutInfobox.addClass('calculate_height');
var parentUlsHeight=0,
ulsHeight=0,
infoboxHeight=$infobox.actual('outerHeight'),
flatFlyoutPrevUlHeight=$flatFlyoutPrevUl.actual('outerHeight'),
flatFlyoutInfoboxHeight=$flatFlyoutInfobox.actual('outerHeight');
$uls.each(function()
{
ulsHeight=Math.max(ulsHeight, jQuery(this).actual('outerHeight'));
});
$parentUls.each(function()
{
parentUlsHeight=Math.max(parentUlsHeight, jQuery(this).actual('outerHeight'));
});
$parentUls.removeClass('calculate_height');
$uls.removeClass('calculate_height');
$infobox.removeClass('calculate_height');
$flatFlyoutPrevUl.removeClass('calculate_height');
$flatFlyoutInfobox.removeClass('calculate_height');
return Math.max(minHeight, parentUlsHeight, ulsHeight, infoboxHeight, flatFlyoutPrevUlHeight, flatFlyoutInfoboxHeight);
};
var lazyloadImages=function($images, callback)
{
$images.each(function()
{
var $img=jQuery(this);
$img.attr('src', $img.data('src')).removeAttr('data-src');
}).promise().done(callback);
};
var adjustFlyoutPosition=function($row, $flyoutInner)
{
var rowOuterWidth=$row.outerWidth(),
rightOffset=(jQuery(window).width()-($row.offset().left+rowOuterWidth)),
offsetIndicator=rightOffset+rowOuterWidth,
flyoutOuterWidth=flyoutInnerBaseSize;
// detect menu depth and set flyoutOuterWidth accordion to it
if($row.find('ul.level-3 li.sub > .infobox').length)
flyoutOuterWidth=flyoutInnerBaseSize*4;
else if($row.find('ul.level-3 li > .infobox').length)
flyoutOuterWidth=flyoutInnerBaseSize*3;
else if($row.find('ul.level-2 li.sub > .infobox').length)
flyoutOuterWidth=flyoutInnerBaseSize*3;
else if($row.find('ul.level-2 li.sub').length)
flyoutOuterWidth=flyoutInnerBaseSize*2;
else if($row.find('ul.level-2 li > .infobox').length)
flyoutOuterWidth=flyoutInnerBaseSize*2;
else if($row.find('.flyout_inner > .infobox').length)
flyoutOuterWidth=flyoutInnerBaseSize*2;
if(offsetIndicator<flyoutOuterWidth)
{
$flyoutInner.addClass('adjusted');
$flyoutInner.css('left', Math.floor((flyoutOuterWidth-offsetIndicator)* -1));
}
}
var resetFlyoutPositionAdjustment=function($row, $flyoutInner)
{
$flyoutInner.removeClass('adjusted');
$flyoutInner.css('left', 0);
}
/* split flat flyout */
jQuery('#main_navigation .flyout.flat').each(function()
{
var $ths=jQuery(this),
$flyoutInner=$ths.find('.flyout_inner'),
$originalUl=$ths.find('ul.level-2'),
$originalLis=$originalUl.find('li'),
breakpoint=Math.ceil($originalLis.length/2),
lisToMove=$originalLis.slice(breakpoint);
if($originalLis.length<10)
{
$ths.removeClass('flat');
$ths.addClass('flat_onecol');
return;
}
var $newUl=jQuery('<ul class="level-2"></ul>');
lisToMove.appendTo($newUl);
$newUl.appendTo($flyoutInner);
});
/* menu aim for mainnav */
jQuery('#main_navigation > ul').menuAim({
activate: function(row)
{
var $row=jQuery(row),
$flyoutInner=$row.find('.flyout_inner'),
currentLevelActiveClass='level_1_active',
$lazyloadingContainer=$flyoutInner.children('.infobox');
if($lazyloadingContainer.length==0)
$lazyloadingContainer=$flyoutInner;
if(!$row.hasClass('sub'))
{
// if a $row has no .sub class we dont to do need anything but activate it
$row.addClass('menuaim_active');
return;
}
if($flyoutInner.children('.infobox').length)
currentLevelActiveClass+='_with_infobox';
$row.data('currentLevelActiveClass', currentLevelActiveClass);
if($row.hasClass('sub'))
adjustFlyoutPosition($row, $row.find('.flyout'));
lazyloadImages($lazyloadingContainer.find('img[data-src]'), function()
{
$row.addClass('menuaim_activating');
$lazyloadingContainer.waitForImages(function()
{
if(!$row.hasClass('menuaim_activating')) // this can happen when you enter and immediatly leave the flyout so you trigger deactivate before lazyloading is done. The flyout would stand open if we remove this.
return;
$flyoutInner.css('height', getFlyoutHeight($flyoutInner));
$row.removeClass('menuaim_activating').addClass('menuaim_active');
$flyoutInner.addClass(currentLevelActiveClass);
});
});
},
deactivate: function(row)
{
var $row=jQuery(row),
$flyoutInner=$row.find('.flyout').children('.flyout_inner');
$flyoutInner.css('height', '');
$row.removeClass('menuaim_activating').removeClass('menuaim_active');
$flyoutInner.removeClass($row.data('currentLevelActiveClass'));
if($row.hasClass('sub'))
resetFlyoutPositionAdjustment($row, $row.find('.flyout'));
},
exitMenu: function()
{
return true;
},
submenuDirection: 'below'
});
/* menu aim for mainnav flyout */
jQuery('#main_navigation > ul > li.sub .flyout ul').not('.level-4').menuAim({
activate: function(row)
{
var $row=jQuery(row),
$flyoutInner=$row.closest('.flyout_inner'),
$infobox=$row.children('.infobox'),
currentLevelActiveClass='level_2_active',
$lazyloadingContainer=$infobox;
if($lazyloadingContainer.length==0)
$lazyloadingContainer=$flyoutInner;
if($row.parent('ul').hasClass('level-3'))
currentLevelActiveClass='level_3_active';
if($infobox.length)
currentLevelActiveClass+='_with_infobox';
if($row.hasClass('sub'))
currentLevelActiveClass+='_with_sub';
$row.data('currentLevelActiveClass', currentLevelActiveClass);
lazyloadImages($lazyloadingContainer.find('img[data-src]'), function()
{
$row.addClass('menuaim_activating');
$lazyloadingContainer.waitForImages(function()
{
if(!$row.hasClass('menuaim_activating')) // this can happen when you enter and immediatly leave the flyout so you trigger deactivate before lazyloading is done. The flyout would stand open if we remove this.
return;
$flyoutInner.css('height', getFlyoutHeight($row));
$row.removeClass('menuaim_activating').addClass('menuaim_active');
$flyoutInner.addClass(currentLevelActiveClass);
});
});
},
deactivate: function(row)
{
var $row=jQuery(row),
$flyoutInner=$row.closest('.flyout_inner');
$row.removeClass('menuaim_activating').removeClass('menuaim_active');
$flyoutInner.removeClass($row.data('currentLevelActiveClass'));
},
exitMenu: function(row)
{
var $row=jQuery(row),
$flyoutInner=$row.closest('.flyout_inner');
$flyoutInner.css('height', getFlyoutHeight($row.parent()));
return true;
},
submenuDirection: 'right'
});
// level 4 handling
jQuery('#main_navigation > ul > li.sub .flyout ul.level-4').each(function()
{
var $ul=jQuery(this),
$parentInfobox=$ul.parents('.infobox'),
$parentInfoboxContentWrapper=$parentInfobox.find('.infobox_content'),
$parentLi=$parentInfobox.parents('li'),
infoboxDefaultContent=$parentInfoboxContentWrapper.html();
$ul.find('li').hover(function()
{
var $row=jQuery(this),
rowHeadline=$row.data('title'),
rowImage=$row.data('image-src'),
rowDesc=unescape($row.data('desc')),
$flyoutInner=$row.closest('.flyout_inner'),
$imageCol=$parentInfoboxContentWrapper.children('.col-image');
$parentInfoboxContentWrapper.children('.col-text').find('.title').html(rowHeadline);
// image
if(rowImage)
{
if($imageCol.find('img').length==0)
$imageCol.append('<div class="image"><img/></div>');
$imageCol.find('.image');
$imageCol.find('img').attr('src', rowImage);
}
else
{
$imageCol.find('.image').hide();
}
// desc
if(rowDesc)
$parentInfoboxContentWrapper.find('.text').html(rowDesc);
else
$parentInfoboxContentWrapper.find('.text').hide();
$row.addClass('menuaim_active');
$parentInfobox.waitForImages(function()
{
$flyoutInner.css('height', getFlyoutHeight($parentLi));
});
}, function()
{
var $row=jQuery(this),
$flyoutInner=$row.closest('.flyout_inner'),
$lazyloadingContainer=$parentInfobox;
$row.removeClass('menuaim_active');
$parentInfoboxContentWrapper.html(infoboxDefaultContent);
lazyloadImages($lazyloadingContainer.find('img[data-src]'), function()
{
$lazyloadingContainer.waitForImages(function()
{
$flyoutInner.css('height', getFlyoutHeight($parentLi));
});
})
});
});
});