Page with sidemenu

A page with a side menu. The basics is that it is on the side. When a small device sees the page the sidebar is collapsed and a collapse icon apears.


html

<div class="navbar-expand-lg">
    <div class="row ">
        <div class="d-lg-none col-12 bg-primary text-xs-right">
            <a href="#side-menu" data-toggle="collapse" class="btn btn-default bg-primary text-white">
                <i class="fa fa-life-ring"></i>
                Show menu
            </a>
        </div>
        <div class="col-lg-3 col-12 bg-info text-white collapse navbar-collapse py-1" id="side-menu">
            <div>
                <h3>
                    Sidemenu
                </h3>
                <p>
                    Here you can add a side menu, Or just add some info for the user. It is shown on large screens and hidden on small.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi corporis eligendi et fugiat harum ipsa odit quis quod repellendus rerum, sequi similique suscipit, voluptate? A accusamus aperiam autem dicta hic.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolorem minus nesciunt, non perspiciatis repudiandae sapiente! Dolores enim possimus voluptas! Ad fugit itaque, iure officia quibusdam repudiandae ut voluptatibus voluptatum!
                </p>
            </div>
        </div>
        <div class="col-lg-9 col-12 py-1">
            <h3>
                Content
            </h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus facere illum ipsam minima nobis numquam. Architecto atque cupiditate dolorem ea nesciunt, praesentium qui, rem repellat repudiandae, sapiente tempora totam voluptatem!
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur consequatur corporis cumque delectus dignissimos doloribus, ducimus et eum facilis illo iste minima nostrum obcaecati odit praesentium recusandae vero voluptas.
            </p>
        </div>
    </div>
</div>

subscribe via RSS | connect on gitbub