L&S Living Styleguide

<!-- 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>