14 #permalink Navigations

Source: megadropdown/css/megadropdown.css, line 1

14.1 #permalink Megadropdown

See for yourself ...

Source: megadropdown/css/megadropdown.css, line 251

14.1.1 #permalink Navigation

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Example
Zurück
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

14.1.2 #permalink Links im Overlay

Source: megadropdown/css/mainnavi.css, line 1

14.1.2.1 #permalink default

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Examples
Default styling
:hover
The element's hover state
.is-current
when the navigation item is the current page
Markup 
<ul class="mainnavi_list">
    <li>
        <a href="#" class="mainnavi_link {modifiers}">
            <span>Navigationspunkt</span>
        </a>
    </li>
</ul>
Source: megadropdown/css/mainnavi.css, line 7

14.1.2.2 #permalink Übersichtslink

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Examples
Default styling
:hover
The element's hover state
.is-current
when the navigation item is the current page
Markup 
<ul class="mainnavi_list">
    <li>
        <a href="#" class="mainnavi_link mainnavi_link--overview {modifiers}">
            <span><small>Übersicht</small></span><br>
            <span>Navigationspunkt</span>
        </a>
    </li>
</ul>
Source: megadropdown/css/mainnavi.css, line 24

14.1.2.3 #permalink mit Unterpunkten

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Examples
Default styling
:hover
The element's hover state
.is-active
when the navigation item is in rootline
Markup 
<ul class="mainnavi_list">
    <li>
        <a href="#" class="mainnavi_link has-subnav icontxt {modifiers}" data-megadropdown-cmd="Level::jump-in">
            <span>Navigationspunkt</span>
            <span class="fa fa-chevron-right"></span>
        </a>
    </li>
</ul>
Source: megadropdown/css/mainnavi.css, line 42

14.1.3 #permalink Links in der Leiste

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Examples
Default styling
:hover
The element's hover state
.is-current
when the navigation item is the current page
Markup 
<div class="megadropdown_bar">
    <div class="megadropdown_bar_inner pagesize">
        <div class="megadropdown_section lvl--1">
            <ul class="mainnavi_list">
                <li>
                    <a href="#" class="mainnavi_link {modifiers}">
                        <span>Navigationspunkt</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
Source: megadropdown/css/mainnavi.css, line 62

14.2 #permalink Offcanvas

See for yourself ...

Source: offcanvas/css/offcanvas.css, line 1

14.2.1 #permalink Navigation

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsa, qui cumque enim harum possimus impedit mollitia provident ad consequuntur, voluptatibus, nostrum tempore atque fugiat, accusamus ex temporibus cupiditate soluta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores sit eveniet aliquam. Debitis amet laborum cumque quos quidem. Error, at, quaerat. Et natus quidem accusantium hic ducimus, tenetur, minima illum?
Markup 
<!-- inline style here is only for KSS. Please remove it when using this element -->
<div class="offcanvas" style="transform: translate3d(0,0,0); border: 1px solid black;">
    <div class="offcanvas_menu"
        data-widget="OffCanvasMenu"
        data-offcanvas-id="nav:1">
        <div class="offcanvas_menu_level offcanvas_menu_level--open">
            <ul class="nav_list">
                <li class="nav_list_item">
                    <span class="nav_box nav_box--next"><a href="#" class="nav_box_text">Navipunkt 1</a><span class="nav_box_icon" data-offcanvas-cmd="next"><i class="fa fa-chevron-right"></i></span></span>
                    <div class="offcanvas_menu_level">
                        <span data-offcanvas-cmd="back" class="nav_box nav_box--prev"><span class="nav_box_icon" data-offcanvas-cmd="next"><i class="fa fa-chevron-left"></i></span><span class="nav_box_text">zurück</span></span>
                        <a href="#" class="nav_header">
                            Navipunkt 1
                        </a>
                        <ul class="nav_list">
                            <li class="nav_list_item">
                                <span class="nav_box nav_box--small"><a href="#" class="nav_box_text">Navipunkt 1.1</a></span>
                            </li>
                            <li class="nav_list_item">
                                <span class="nav_box nav_box--small"><a href="#" class="nav_box_text">Navipunkt 1.2</a></span>
                            </li>
                            <li class="nav_list_item">
                                <span class="nav_box nav_box--small"><a href="#" class="nav_box_text">Navipunkt 1.3</a></span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav_list_item">
                    <span class="nav_box nav_box--next"><a href="#" class="nav_box_text">Navipunkt 1</a><span class="nav_box_icon" data-offcanvas-cmd="next"><i class="fa fa-chevron-right"></i></span></span>
                    <div class="offcanvas_menu_level">
                        <span data-offcanvas-cmd="back" class="nav_box nav_box--prev"><span class="nav_box_icon" data-offcanvas-cmd="next"><i class="fa fa-chevron-left"></i></span><span class="nav_box_text">zurück</span></span>
                        <a href="#" class="nav_header">
                            Navipunkt 2
                        </a>
                        <ul class="nav_list">
                            <li class="nav_list_item">
                                <span class="nav_box nav_box--small"><a href="#" class="nav_box_text">Navipunkt 2.1</a></span>
                            </li>
                            <li class="nav_list_item">
                                <span class="nav_box nav_box--small"><a href="#" class="nav_box_text">Navipunkt 2.2</a></span>
                            </li>
                            <li class="nav_list_item">
                                <span class="nav_box nav_box--small"><a href="#" class="nav_box_text">Navipunkt 2.3</a></span>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="nav_list_item">
                    <span class="nav_box"><a href="#" class="nav_box_text">Navipunkt 3</a></span>
                </li>
            </ul>
        </div>
    </div>
    <div class="offcanvas_pusher">
        <div class="content offcanvas_scroller">
            <div id="top" class="offcanvas_scroller_inner">
                <button data-offcanvas="nav:1">
                    Menü
                </button><br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsa, qui cumque enim harum possimus impedit mollitia provident ad consequuntur, voluptatibus, nostrum tempore atque fugiat, accusamus ex temporibus cupiditate soluta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores sit eveniet aliquam. Debitis amet laborum cumque quos quidem. Error, at, quaerat. Et natus quidem accusantium hic ducimus, tenetur, minima illum?
            </div>
        </div>
    </div>
</body>
Source: offcanvas/css/offcanvas.css, line 152

14.2.2 #permalink Link (.nav_box)

Source: offcanvas/css/mainnavi.css, line 1

14.2.2.1 #permalink default

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Examples
Default styling
:hover
The element's hover state
.nav_box--active
when the navigation item is the current page
Markup 
<!-- .offcanvas_menu_level is only there to get the background color.
See 14.2.1 Offcanvas Navigation for correct markup -->
<div class="offcanvas_menu_level" style="position: static; transform: none; width: 300px">
    <ul class="nav_list">
        <li class="nav_list_item">
            <span class="nav_box {modifiers}"><a href="#" class="nav_box_text">Navipunkt</a></span>
        </li>
    </ul>
</div>
Source: offcanvas/css/mainnavi.css, line 7

14.2.2.2 #permalink mit Unterpunkten

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

:hover - The element's hover state

Example
Markup 
<!-- .offcanvas_menu_level is only there to get the background color. -->
<div class="offcanvas_menu_level" style="position: static; transform: none; width: 300px">
    <ul class="nav_list">
        <li class="nav_list_item">
            <span class="nav_box nav_box--next ">
                <a href="#" class="nav_box_text">Navipunkt</a>
                <span class="nav_box_icon" data-offcanvas-cmd="next"><i class="fa fa-chevron-right"></i></span>
            </span>
        </li>
    </ul>
</div>
Source: offcanvas/css/mainnavi.css, line 26

14.2.2.3 #permalink ab Ebene 2

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Examples
Default styling
:hover
The element's hover state
.nav_box--active
when the navigation item is the current page
Markup 
<!-- .offcanvas_menu_level is only there to get the background color.
See 14.2.1 Offcanvas Navigation for correct markup -->
<div class="offcanvas_menu_level" style="position: static; transform: none; width: 300px">
    <ul class="nav_list">
        <li class="nav_list_item">
            <span class="nav_box nav_box--small {modifiers}"><a href="#" class="nav_box_text">Navipunkt</a></span>
        </li>
    </ul>
</div>
Source: offcanvas/css/mainnavi.css, line 48

14.2.2.4 #permalink ab Ebene 2 mit Unterpunkten

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

:hover - The element's hover state

Example
Markup 
<!-- .offcanvas_menu_level is only there to get the background color. -->
<div class="offcanvas_menu_level" style="position: static; transform: none; width: 300px">
    <ul class="nav_list">
        <li class="nav_list_item">
            <span class="nav_box nav_box--small nav_box--next ">
                <a href="#" class="nav_box_text">Navipunkt</a>
                <span class="nav_box_icon" data-offcanvas-cmd="next"><i class="fa fa-chevron-right"></i></span>
            </span>
        </li>
    </ul>
</div>
Source: offcanvas/css/mainnavi.css, line 67