Example
Markup
<button data-megadropdown-cmd="Burger::click" type="button">Menü</button>
<div class="megadropdown" data-widget="Megadropdown" data-megadropdown-close-channels='["Search::open"]'>
<div class="megadropdown_overlay">
<div class="megadropdown_back-button-wrap pagesize">
<a href="#" class="megadropdown_back-button icontxt" data-megadropdown-cmd="Level::jump-back">
<span class="icontxt_icon icontxt_icon--center fa fa-chevron-left"></span>
<span class="icontxt_content">Zurück</span>
</a>
</div>
<div class="megadropdown_overlay_inner pagesize">
<div class="megadropdown_clip">
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link has-subnav icontxt is-current" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link mainnavi_link--overview">
<span><small>Übersicht</small></span><br>
<span>Navigationspunkt 1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt is-current" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 1.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link mainnavi_link--overview is-current">
<span><small>Übersicht</small></span><br>
<span>Navigationspunkt 1.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 1.1.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 1.1.1.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.2.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.2.2</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.2.3</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.2.4</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.2.5</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 1.1.1.2.6</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.2.6.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.2.6.2</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.2.6.3</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.2.6.4</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.2.6.5</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.3</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.4</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.5</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.6</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.7</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.1.8</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.1.2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 1.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 1.2.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.2.1.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 1.2.1.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.2.1.2.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.2.1.2.2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 1.2.2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="megadropdown_teaser--left">
<p class="h3">Navigationspunkt 1</p class="h3">
<p class="megadropdown_teaser_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, voluptatibus ipsa eius excepturi sit beatae molestiae tempore pariatur omnis, doloremque sunt assumenda quos aut harum maiores repellat! Ducimus cupiditate, totam?
</p>
<a class="megadropdown_teaser_link" href="#">
<span>Mehr erfahren</span>
<span class="fa fa-chevron-right"></span>
</a>
</div>
<div class="megadropdown_teaser--right">
<a href="#">
<img src="http://placehold.it/600x337?text=Bild" alt="">
</a>
</div>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link mainnavi_link--overview">
<span><small>Übersicht</small></span><br>
<span>Navigationspunkt 2</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 2.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link mainnavi_link--overview">
<span><small>Übersicht</small></span><br>
<span>Navigationspunkt 2.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 2.1.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 2.1.1.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 2.1.1.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 2.1.1.2.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 2.1.1.2.2</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 2.1.1.2.3</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 2.1.1.2.4</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 2.1.1.2.5</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 2.1.2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 2.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 2.2.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 2.2.1.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 2.2.1.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 2.2.1.2.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 2.2.1.2.2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 2.2.2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="megadropdown_teaser--left">
<p class="h3">Navigationspunkt 2</p class="h3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, voluptatibus ipsa eius excepturi sit beatae molestiae tempore pariatur omnis, doloremque sunt assumenda quos aut harum maiores repellat! Ducimus cupiditate, totam?
</p>
<a class="megadropdown_teaser_link" href="#">
<span>Mehr erfahren</span>
<span class="fa fa-chevron-right"></span>
</a>
</div>
<div class="megadropdown_teaser--right">
<a href="#">
<img src="http://placehold.it/600x337?text=Bild" alt="">
</a>
</div>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 3</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link mainnavi_link--overview">
<span><small>Übersicht</small></span><br>
<span>Navigationspunkt 3</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 3.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link mainnavi_link--overview">
<span><small>Übersicht</small></span><br>
<span>Navigationspunkt 3.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 3.1.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 3.1.1.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 3.1.1.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 3.1.1.2.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 3.1.1.2.2</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 3.1.1.2.3</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 3.1.1.2.4</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 3.1.1.2.5</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 3.1.2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 3.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 3.2.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 3.2.1.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 3.2.1.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 3.2.1.2.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 3.2.1.2.2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 3.2.2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="megadropdown_teaser--left">
<p class="h3">Navigationspunkt 3</p class="h3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, voluptatibus ipsa eius excepturi sit beatae molestiae tempore pariatur omnis, doloremque sunt assumenda quos aut harum maiores repellat! Ducimus cupiditate, totam?
</p>
<a class="megadropdown_teaser_link" href="#">
<span>Mehr erfahren</span>
<span class="fa fa-chevron-right"></span>
</a>
</div>
<div class="megadropdown_teaser--right">
<a href="#">
<img src="http://placehold.it/600x337?text=Bild" alt="">
</a>
</div>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 4</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link mainnavi_link--overview">
<span><small>Übersicht</small></span><br>
<span>Navigationspunkt 4</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 4.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link mainnavi_link--overview">
<span><small>Übersicht</small></span><br>
<span>Navigationspunkt 4.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 4.1.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 4.1.1.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 4.1.1.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 4.1.1.2.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 4.1.1.2.2</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 4.1.1.2.3</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 4.1.1.2.4</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 4.1.1.2.5</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 4.1.2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 4.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 4.2.1</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 4.2.1.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link has-subnav icontxt" data-megadropdown-cmd="Level::jump-in">
<span>Navigationspunkt 4.2.1.2</span>
<span class="fa fa-chevron-right"></span>
</a>
<div class="megadropdown_section">
<ul class="mainnavi_list">
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 4.2.1.2.1</span>
</a>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 4.2.1.2.2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#" class="mainnavi_link">
<span>Navigationspunkt 4.2.2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="megadropdown_teaser--left">
<p class="h3">Navigationspunkt 4</p class="h3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, voluptatibus ipsa eius excepturi sit beatae molestiae tempore pariatur omnis, doloremque sunt assumenda quos aut harum maiores repellat! Ducimus cupiditate, totam?
</p>
<a class="megadropdown_teaser_link" href="#">
<span>Mehr erfahren</span>
<span class="fa fa-chevron-right"></span>
</a>
</div>
<div class="megadropdown_teaser--right">
<a href="#">
<img src="http://placehold.it/600x337?text=Bild" alt="">
</a>
</div>
</li>
<li>
<a href="#" class="mainnavi_link" >
<span>Navigationspunkt 5</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Source:
megadropdown/css/megadropdown.css, line 261